Historically, our team struggled to get readers to engage with videos embedded in stories, so we treated them as optional elements that users didn’t need to watch in order to understand the article. In 2024, I was tasked with designing and developing two different stories with in-depth video reporting that was necessary to watch in order to understand the full-scope of the articles. My challenge was to design and develop custom video components that would encourage readers to engage with them and give users agency to customize their experience.
Challenge
The first project I worked on was an investigation into the death of Hans von Ohain in 2022, a Tesla recruiter who was killed in a crash while the car’s driver-assistance system was engaged. The reporting included dashcam footage from first responders, video of Von Ohain’s friend, Erik Rossiter, who was involved in the crash at the scene, and video of Von Ohain’s widow, Nora. The footage was both moving and informative, and helped the reader fully understand what happened during the crash, as well as its aftermath. It was important to me that we displayed the videos in a way that was thoughtful and engaging, and also respectful of Von Ohain’s friends and family who had agreed to be filmed.
In case the content could be triggering to readers, I didn’t want to make the videos autoplay. However, I still wanted users to be able to get some of the video experience, even if they didn’t click to play. Instead, I experimented with using looping gifs clipped out of the larger videos, and pull quotes, to share some of the information in the videos, while giving users a clear option to click on them.
Additionally, at the top of the story we wanted to use a mix of dash camera footage and audio from a 911 dispatcher. The project team felt that the video should autoplay at the top of the story, but I advocated for an introduction before the video started to explain to viewers what they were about to see. We also added a call to action asking users to to enable audio, but still included the option to enable or disable audio after the video had started.
Mockups in figma
Desktop and mobile video components
Topper video and call to action
The second project I was assigned told the story of April Simpkins, whose daughter, former Miss USA Cheslie Kryst, died by suicide in 2022. Our videographer worked closely with the reporter to tell Simpkins’ story from her own perspective, so we felt it was important to create a similar video experience that allowed readers to watch the footage while still respecting user preferences.
Since the videos were documentary-style b-roll, we felt comfortable using autoplay with the sound automatically turned off, but we still wanted to encourage users to enable audio and engage even closer with the footage. I similarly experimented with pairing quotes and videos, but this time wanted to include more white space to suit the quiet, thoughtful nature of the story.
Mockups in figma
Desktop and mobile video components
As a result of this work, both stories were recognized by The Webby Awards for their use and treatment of videos. The first story was named an Honoree for Best Visual Design - Aesthetic
Websites and Mobile Sites. The second story was named an Honoree for Best Individual Editorial Feature - Media Company Websites and Mobile Sites.