Responses by Guillermo Brotons, art director and designer, Decimal; Jacky Myint, developer and designer; and John Patrick Pullen, editor and founder, Long Lead.

Background: Long Lead is a story studio that produces journalism without compromise. Together with developer and designer Jacky Myint and design and technology studio Decimal, we published The Depths She’ll Reach, a multimedia profile of world-record-holding freediver Alenka Artnik who overcame family trauma and mental health challenges to set multiple world records. The website’s target audience is readers interested in adventure sports, self-help and mental health issues.

Like all of Long Lead’s productions, this is a standalone project. One of the tenets of our approach is that stories should dictate the design, not vice versa. This bespoke website was conceived entirely to tell Artnik’s story.

Design core: We wanted the site’s design to immerse the reader in the sensation of freediving. To that end, we shot original underwater videography, which we used as the background to the editorial copy. In addition to that, we recorded Artnik to integrate her voice into the experience.

Favorite details: There are so many that it’s hard to pick only a few. We wanted to balance the elegance of freediving with Artnik’s strength. We did that subtly through our font selection, using the serif GT Super for the display and the sans serif Aeonik for the body copy. The result is a timeless but progressive editorial experience for the reader.

Another detail we’re particularly proud of is integrating audio into the experience—this truly was a team effort! Not originally part of our design, a couple of early readers (an editor and our creative director) noted that, despite profiling the world’s most amazing female athlete, we didn’t quote her in the piece. This had been a deliberate decision by Xan Rice, the story’s writer, but it was a problem. To solve it, we initially came up with interspersing smaller videos with audio of Artnik as copy breaks, but that made the design too busy. Then, a back-end producer suggested using transparent videos instead of actual ones, effectively creating a floating button that readers could press to turn the audio on and off. Decimal took the concept through to execution, not only solving a big editorial problem but also adding an element to the experience that wasn’t in our initial plan. It was a big win for everyone, demonstrating what “journalism without compromise” means.

Challenges: The most challenging aspect of building the site was that we actually launched two sites on the same day, publishing Long Lead’s website nearly simultaneously with The Depths She’ll Reach. Though both designs were ready for launch day, flipping two switches at once involved some unexpected choreography that caused a bit of heartburn that morning.

New lessons: The transparent, video-as-an-audio-button trick was pretty great and one that we’ll likely use again on future multimedia editorial projects.

Navigation structure: Since this story is about a freediver, we wanted the experience to mimic the sensation of freediving—pretty easy to do since most editorial sites scroll downward. But to subtly and tastefully make this point, we designed a progress bar on the right-hand side similar to the rope a freediver follows into the depths. We put markers for the various sections on the progress bar, letting readers come back and click down the bar to return to where they left off. And we do have a significant amount of return traffic! That probably shouldn’t be so surprising considering the site contains a more-than-6,500-word story.

Technology: In terms of the front end, we built the site with HTML, SCSS and JavaScript. Due to the bespoke nature of the project and the desire not to be limited by a CMS, the back end is basically a Google doc that baked out the text with ArchieML into an HTML file.

Special features: We didn’t know that transparent videos were possible without the use of a canvas element, but with a bit of internet research and Stack Overflow, we discovered we could use the WebM (VP9) and the HEVC with alpha video formats to make them work within the video tag. We encoded videos in those formats using FFmpeg via the terminal.