Responses by Natalie Karbelnig, content lead; Edrea Lita, art director; and Ed Tang, technology director, Belle & Wissell, Co.

Background: Lost Cities imparts crucial information about the crisis currently facing corals globally and inspires individual action. With its unique layout, nonlinear narrative and evocative design, Lost Cities draws in a broader audience than the typical nature documentary. It allows visitors to set their own pace and explore according to their interests, offering in-depth information and achievable means to help corals.

Design core: Lost Cities’s subject—corals—provided the main inspiration for its design. Floating particles, spiral motifs and an underwater ambiance transport the audience to these “cathedrals of the sea.” The site’s audio elements provide further engagement: the expressive soundscape composed by Jesse Solomon Clark and warm, precise narration provided by the late Dr. Ruth Gates makes this a truly singular experience. Contextual “pop-ups” enrich stories with supplemental information for curious viewers, and an immersive, full-screen format focuses the visitor entirely on the world of corals.

Favorite details: Though the challenges facing corals are acute, Lost Cities needed to entice and inspire viewers without discouraging or upsetting possible advocates. Playful details such as the animating particle title, spiral transitions and subtle coral backdrops lighten the experience while keeping the focus on the subject. In addition, Dr. Ruth Gates’ narration—the final recording taken of her voice—pays a lasting tribute to her lifelong commitment to saving coral reefs worldwide. Lost Cities honors the enduring nature of her work, which lives on in the communities she inspired.

Navigation structure: We arrived at the navigation structure by searching for the best way to represent corals as structures in their own right. It was important to us that we could effectively represent the idea of corals and their polyp mouths. Through a series of prototypes, the phyllotaxis shape—which occurs quite often in nature—was selected as the best symbol for that coral structure, especially since it could show the interconnectedness that corals maintain through a network of short vignette sequences.

Technology: We built Lost Cities’s core utilizing React. We applied three.js and a simplex noise library to create the 3-D floating particle effects and title animation. The website also features a generative music engine that dynamically creates a unique soundtrack for each visitor; this system was created using libraries from CreateJS to preload and smoothly fade between sound assets from a library of more than 130 MP3 files.