Responses by Iaan van Niekerk, founder, PlusPlusMinus.

Background: After having launched its previous website more than six years ago, Singita was looking to clarify the way its brand is represented online, hoping to distill its messaging to clearly communicate its offerings to travelers, travel partners and donors. As the previous site had grown over time and expanded its functionality on the front end, it was now time to reevaluate the technology stack and content-authoring experience.

The new website features all of Singita’s exquisite luxury lodges all over Africa. More information can be found on every lodge while discovering the magic that each one offers. The site strikes a balance between providing clear and easy-to-find information for the various lodges while also offering a delightful user experience through images, videos, typography, transitions and animations. The website also gives users the option to check availability for any lodge at any time with a custom booking process, which also helps travelers see future availability as well as alternative options for when their choices are not available.

In addition to its hospitality offerings, Singita plays a major part in the conservation and safeguarding of Africa’s wildlife populations and wilderness areas, as well as creating economic independence in the surrounding communities. The website needed to showcase these incredible conservation projects while highlighting the strategic partnerships that make this possible. It also provides opportunities for tourists and conservation enthusiasts to donate to specific projects and show their support.

Larger picture: The project kicked off weeks before the COVID-19 lockdown and worldwide travel bans were enforced. Together with the Singita team, we embraced the rebuilding of this website as an opportunity to reconsider its messaging and communicate its unique offerings. The world in general and travel in particular have changed. Singita needed to position itself for a post–travel ban world where meaningful travel and a positive impact will be more valued than ever. The website design, structure and messaging needed to change to reflect this shift.

The website’s launch coincided with various countries being opened for travel as lockdown restrictions eased at the start of 2021. The new site, therefore, enabled Singita to kick off the year with a fresh message.

Design core: From a design point of view, we focused on simplicity. We achieved this through being consistent with our use of buttons, typography, colors and UI elements. Only two fonts were used—one serif and one sans-serif—with variations created in various sizes and weights to communicate hierarchy and emphasis; the font is very legible while maintaining a touch of geometric elements that pick up on Singita’s design expression in its lodges.

Drawing inspiration from the specific lodges enabled us to select a specific color that captured each one’s distinctive design language and personality. Custom duotone icons that can be seen on each individual lodge page has a touch of color unique to its associated lodge. The site has also been built in a way that enables for this custom lodge color to be updated at a single place in the CMS, so that color updates will apply to all parts of the website that display the color for that lodge, including the primary navigation, buttons, illustrated geographic design elements, the Singita logo, background colors and the custom icons.

A final focus was to put Singita’s photos and videos as front-and-center elements on the website. The rest of the UI was designed to get out of the way of the visuals and serve only to enhance and showcase the content. We want the visitor to feel like they are paging through a beautifully curated coffee table book on their device, taking them through a journey through a very special part of Africa.

Favorite details: If a picture is worth a thousand words, nothing tells a story like a video. We were able to incorporate autoplaying videos in various key areas of the website. Singita’s video content did not have an opportunity to shine on the previous website, so incorporating the videos in such an engaging way wonderfully showcased the footage while drawing users into the experience of visiting a Singita lodge. We were delightfully surprised by how dramatic the impact of a simple technical feature could be when combined with exceptional content and seamless user experience.

Challenges: As we were responsible for designing and building the site’s previous version more than six years ago, we had the privilege of growing with Singita and its marketing team. The challenge therefore was to create something exciting and fresh when not having a purely objective, outside perspective on the project.

We believe that working together over time yields the best results, as our teams can work closely together and our outcomes are better aligned. However, this can only be achieved if we force ourselves to keep innovating and growing, as we know that the skills and expertise we brought to the previous website would not have been sufficient to meet Singita’s current vision and needs.

Navigation structure: Singita operates fifteen luxury lodges in four countries. The site also has a host of other content available for various stakeholders: guests, travel agents, industry partners and Singita team members, among others. The previous site struggled to create a clear hierarchy as many items were considered to be as important as the next. We decided to create a full-page menu with a very distinct hierarchy. This way, a website visitor can glance at all the content that is available, but attention will be drawn to the primary Singita offerings. When choosing the Lodges item, the full page animates to reveal all the lodges in the various countries and regions. To touch on the unique nature of each of the lodge properties and to visually introduce the lodge, we transition the background color of the menu to a distinct color for each property. The color is then further incorporated into the individual lodge pages.

On various pages of the site, we introduced context-aware navigation that enables visitors to find something particular related to the section of the website they’re currently viewing. For example, when on Lebombo Lodge, a bar appears on the bottom of the screen that reveals navigation elements only related to Lebombo, such as a dedicated photo and video gallery, lodge activities, and downloads, such as an eBrochure. This context-aware navigation enables us to keep the primary navigation relatively simple but provides relevant navigation prompts to visitors when they might need more options. The structure of all navigation elements is entirely reconsidered for mobile devices to provide a functional, usable user experience; we used different display elements better suited to the specific screen size.

Technology: The website’s front end is built using a combination with React and TypeScript. It makes use of modularized components that were developed in isolation using TypeScript and Emotion as a CSS-in-JavaScript approach. These components were added to Storybook, enabling the encapsulation and testing of components outside of the front-end application. The front-end application is built using Gatsby as a static-site generator to assist with its performance and security. We used a series of wrapping components that contain GraphQL queries that get all content from the CMS and then map the contents of the query to the correct props of the front-end components. This way, it generates the correct page for the visitor to see.

We used Contentful as a headless CMS for the content architecture together with custom-built layout components, enabling for visual and layout changes to be made through the CMS interface. We’ve designed the content architecture to be modular, reusable and scalable to ensure the content structure’s integrity as more and more content pieces are added. Gatsby Cloud is integrated with Contentful to enable content authors to preview the content changes on the front end before publishing any content.

Algolia powers the website search as well as various content areas where there is a need to organize or filter specific content types, such as blog posts, wildlife reports, awards and team members. The statically generated website is hosted on Netlify, integrated with our Git workflow to enable automatic deployment of approved code as well as to generate previews of code changes before they’re deployed to the live environment. To ensure that everything works properly and as expected, we’ve implemented unit tests and end-to-end tests using React Testing Library and Cypress. We do ongoing uptime monitoring and error logging to give us the confidence that the application continues to perform as optimally as possible.