Listen
This project was the culmination of a 4-year investigation into the tragic death of University of Utah student-athlete Lauren McCluskey. Despite her repeated pleas for help, the University, the police, and the people that were supposed to protect her failed to act.
My role as Senior Designer was to create the page design for mobile and desktop while collaborating with writers, editors, and photo editors to deliver a final product that was engaging but also respectful to Lauren and her family.
The Problem
Based on the scope of the investigation and the amount of documents, audio clips, videos, and photos that were collected over 4 years, we had 3 major problems to solve:
How do we break up this volume of text with enough visual elements?
How do we differentiate from the documentary that launches at the same time?
How do we make sure users don’t miss out on information in videos/audio?
Our Audience
Design Process
This project was unique in that the designer (me) was also the illustrator. Typically we work with a freelance illustrator but I have years of photo illustration experience and was comfortable taking on two roles. Because of that, the Research & Concepting phase included illustration explorations.
1 - Research & Concepting
2 - Wireframe
3 - Design
4 - Takeaways
Research & Concepting
We researched internal and external projects. With the popularity of true crime podcasts and documentaries, there was no shortage of inspiration. We typically don’t start with higher-fidelity concepts this early in the process, but we knew that the illustrations would influence the design and the tone of the piece, so we wanted to get a general design language established early on.
Wireframing
Wireframing began before reporting was complete or we had a rough draft to work with. Because of this, we began with blocking in components for every possible scenario rather than the entire page. Most of them ended up on the cutting room floor, but it made the design process a lot easier and we could work simultaneously to keep the project on track.
Audio was a major focus of ours. There was a documentary being developed simultaneously, so we needed a way to give the audience a unique experience. We were concerned that important information may be missed if a user preferred to read the story without the sound turned on, so we decided pretty quickly that closed captioning should be enabled by default. That decision carried over into video as well.
A few of the many iterations.
Design
By this point, we had a pretty good idea what the design would look like but that’s not to say it wasn’t without some challenges. Reporting was wrapping up and we had a majority of the final assets in hand but page layout, in most cases, should be done by this phase. However, we understood the fluid nature of investigative reporting and document collection required us to be agile and adapt to changing circumstances.
The biggest design challenge was the length of the story. How do we keep users engaged for over 5 minutes? The answer was Microsoft’s Azure neural text-to-speech. We partnered with the ESPN Edge Innovation Center to help integrate the text-to-speech functionality. Now users could choose to listen to the story like they would their favorite true crime podcast.
Next up was simplifying and unifying the UI across all of our audio and video players. Collaboration was essential with a project of this scope, and we worked with our developers to make sure the UI was consistent, making for a better user experience and less stress on dev resources.
Once all of the major hurdles were cleared, I was able to focus on the pacing of the story and assets, and making sure the photo illustrations complemented the story rather than distract.
Takeaways
Flexibility is key. When working on a project of this scope, you need to be able to quickly adjust and come up with new solutions. But in order to be flexible you also need to be organized. The number of assets we had was overwhelming at times and it took a lot of planning and teamwork to make sure everything went as smoothly as it did.