Responses by Tom Anderson, creative director, Green Chameleon.

Background: Lewa House leads the way for wildlife conservation in Kenya, offering its guests unforgettable experiences that have a lasting impact. We created an immersive storytelling experience that aims to capture the magic of Lewa House, encouraging users to explore the wonders it has to offer. Guided by lodge owner Sophie Macfarlane, users are taken on a journey of discovery, learning about Lewa’s history and the deep connection to the wildlife it protects.

Design core: The full scope of this project involved a total rethink of the Lewa House identity and online presence. We worked closely with the Lewa House team to evolve its brand, maintaining the essence of what makes Lewa so special while giving it a more contemporary feel in order to appeal to a wider audience.

Alongside a new logomark and introducing a more refined suite of typography, we carefully selected a new set of brand colors featuring warm and earthy tones inspired by the vibrant Lewa landscape. This was supported by hand-drawn elements to add to the rugged charm of the brand, which aimed to emulate the unique experience it offers as a travel destination.

Favorite details: Bringing Lewa’s story to life was our number one priority. We created a highly interactive narrative that ran through the site making use of purposeful animation, gamified features and rich media. Audio was the final piece of this puzzle. We worked with Sophie to create narrated introductions to each page, which helps deepen the connection between the user and the site’s content. Furthermore, genuine ambient noise from the Kenyan plains, as well as interactive wildlife soundbites added to the content page elements and marker points, encourages further discovery and immersion.

Challenges: Re-creating the visceral Lewa experience online was always going to be our biggest challenge. However, one of the most interesting and specific challenges we faced was creating the terrain for the interactive map. The challenge came in two main parts: first, we needed to create the 3-D geometry of the land using limited topographic data; second, we needed to create an accurate texture for the terrain ensuring the plains, rivers and forest were all represented accurately. Satellite imagery of Lewa was basic at best, so we utilized QuadSpinner Gaea world generator and Substance Painter to build on the data we did have, then procedurally added detail to the geometry and texture.

New lessons: We approach every project differently, tailoring everything we produce to the client’s business goals and objectives. As a result, we are constantly learning new skills and techniques along the way. One of the biggest takeaways from this project was improving performance across the board. The site is incredibly media rich: every page contains audio, multiple static images and video content. We used a number of techniques to improve load times and performance, including WebP image generation for any image uploaded through the CMS. We utilized the Basis Universal system to create “supercompressed” textures, as well as Draco compression in order to reduce the memory footprint of the project, as well as decrease overall load times for the map.

Navigation structure: A core objective for the project was to create an explorative journey for users to discover the wonders Lewa has to offer in a nonlinear, organic way. The site still contains a more traditional navigation, enabling users to quickly access information if needed. But the main user flow aims to lead users on an exciting, meandering path of discovery. The interactive map sits at the epicenter of this journey, encouraging users to engage with the content on a deeper, more emotional level. Main page links are positioned among educational and informative content, which can all be viewed without leaving the map. The main horizontal scrolling pages lead users through the story of Lewa, seamlessly flowing into one another to paint a full picture of what makes Lewa House truly special.

Technology: The back end is run on a custom WordPress-based framework, which has been tailored for our in-house projects. This project in particular extended the framework by adding seamless WebP image generation for any image uploaded through the CMS, which is served automatically to browsers that support the format through server-side feature detection.

Aside from your typical HTML and CSS, the front end makes extensive use of JavaScript in order to implement techniques, such as PJAX navigation, smooth scroll and WebGL. Notably, the images across the site are in WebGL in order for us to dynamically apply the “torn edges” without having to do this manually through image-editing software. An added benefit to using WebGL to display the images is the performance boost for certain animations that are applied, which would otherwise be costly when done outside of a canvas.

The map was built in WebGL and uses a tiled 4K texture, which we custom created. We built a system to easily place markers and animals on the map by uploading an SVG of their locations.