Over the last six months we’ve been collaborating with The Atlantic to bring three interactive articles to life. It was an amazing opportunity to work side-by-side with a talented, multidisciplinary and relentless publication team. We learned a lot. We set out to create an immersive, yet thoughtful reading experience and I’d like to share some of our insights that helped get us there.
An immersive reading experience
I’ll start at the end. Here is a short video showing some highlights of the final output we created for the project:
And don’t forget to check out live site here.
The story behind the story
When we were introduced to the team at The Atlantic they were creating a series of articles about “Population Health” — a broad concept used to describe a more holistic approach to healthcare aimed at improving the health of entire communities rather than a single individual.
They wanted to tell these stories in an interactive and visual way. The challenge was to create interactive visualizations based on industry concepts and make them accessible to both healthcare professionals and the a casual audience.
From the beginning we knew we wanted to create an experience that was familiar from an interaction perspective but different from a visual perspective. We aspired to take the traditional editorial content The Atlantic is known for and combine it with a rich digital narrative.
Inspiration from the 90s
Early in the discovery process with The Atlantic, we wanted to understand more about what’s important to their business and what’s important to their readers. After a few short meetings it became clear that READING is really important — go figure.
That got us thinking about the history of reading on the Web. Going back to the early days of the web and the earliest web browsers. It quickly become obvious that there are (at least) two fundamental characteristics that have been present on the web since the beginning — reading and scrolling.
Early web browsers Netscape and Mosaic (circa 1993) — designed almost exclusively for reading and sharing content.
People have been reading and scrolling on the web longer than just about anything else! And at this point reading and scrolling (and the back button) should be respected as inherent attributes of the web (read: please stop scroll-jacking my websites).
Very early in the project we decided to preserve the natural document scroll and reading flow. We also established a small set of design principles that supported reading as the key tenet:
- Graphics should enhance, not displace the article text.
- Let readers read at their own pace.
- Use familiar design patterns for links and navigation.
Throughout the design process we found ourselves coming back to these principles often, both with the client and internally. There was a tendency to keep layering up the visuals so the reader could scan the article without actually reading it. We didn’t want to encourage that behavior so we focused on treating the graphics as supplements to rather than replacements for the copy.
Digital storytelling
If you take a quick tour of the big news and publication sites it’s shocking how little the content experience has changed over the last 15 years.
With a little help from the Internet Wayback Machine, the image below really highlights what I mean. Aside from the obvious styling improvements, the general approach to information remains unchanged. I don’t mean to single out The New Yorker — they aren’t the only ones. By and large, the industry hasn’t moved the needle much with regard to digital storytelling.
Typical article page on The New Yorker’s website from 2001 (left) and 2016 (right)
Understandably, generating bespoke digital experiences for the volume of content these types of sites crank out would be impossible. However, 15 years is a long time in tech-years. Especially compared to how much ground we’ve covered in other aspects of the Web, it feels like we’re ripe for some fresh thinking.
I’m not suggesting every article written for the web needs to be an extravagant production. I believe the story should dictate the type of visuals that accompany it. The goal, of course, is to improve engagement and comprehension.
The New York Times has been doing this with their interactive stories. This new breed of storytelling does a great job helping the reader to fundamentally understand the content. Whether the article is about an aerospace engineering feat or illuminating a relatively unknown part of the world, the visuals go a long way in helping the reader wrap their mind around the subject matter.
Examples of modern storytelling from The New York Times
The technology available on the Web is enabling some really exciting opportunities in the storytelling space, things we haven’t been able to do until very recently. We were certainly inspired by some of the interactive stories out there, and with WebGL and 3D capabilities at our disposal we wanted to bring an even more cinematic dimension to our project.
A cinematic approach
Rather than creating a series of interactive widgets embedded throughout the article, we decided to build an interactive narrative that flows alongside the copy. We used WebGL to build full 3D environments which gave us the flexibility to tell the story from a variety of perspectives.
Using 3D enabled us to leverage familiar filmmaking tools like cameras and scenes, and throughout our design process we adopted various film directing techniques to help us tell our story.
Storyboarding
We started drafting the key shots for each article, but quickly realized there were some complicated relationships between the sequences. We moved to storyboards so we could evaluate the story as a whole and rearrange clips as needed.
Storyboarding large sections of the story helped us manage relationships between sequences
Pacing
Another cinematic technique we put to use was pacing. It’s rare in movies to see complex action scene followed up by another intense action scene (unless you’re watching a Michael Bay film).
Great reference — lots of very practical advice on storytelling
Filmmakers use pacing as a way to manage the speed and flow of a scene. Similarly, we were strategic with the timing and ordering of close-ups vs infographic shots to preserve a natural ebb and flow in our story.
Ross Hockrow’s book Out of Order has a really nice chapter on the topic of pacing. It’s also a great desk-reference full of useful examples.
Spatial connections
Each of the three articles were based in a unique geographic location. So naturally, we decided to use a map as the base for each of our scenes. Several times throughout the articles, the text makes a big jump in scope from a hyper-local location to a state-wide or nation-wide comparison. In these instances, managing the viewer’s sense of context was challenging from both a visual and technical standpoint.
We used a variety of wireframes to establish how the user would transition between scenes
Steven Katz, author of the seminal filmmaking book “Film Directing Shot by Shot”, writes about the importance of managing spatial connections. He describes using spatial connections to:
“…describe spaces as large as the solar system or as small as the head of a pin, so [viewers] always know approximately how large the area is being framed.”
We spent a lot of time choreographing the visuals when transitioning spaces to help keep continuity and coherence. We kept logical camera movements while smoothly adding and removing elements from the scene. The goal was to seamlessly jump between huge geographic distances without disrupting the viewer’s sense of place.
The Match Cut
You’ve probably seen the Match Cut used in dozens of movies or commercials but didn’t realize it’s a common film direction technique. The goal of a match or graphic cut is to transition between two disparate spaces or compositions with a common object to establish a relationship between them.
Despite the entire scene and theming transitioning, the roads remain consistent in both shots for continuity.
The figure above shows one example of how we use a match cut to transition between two relatively different scenes while maintaining a few common elements to suggest there is a relationship between the both sections.
Letting data tell the story
Creating the visuals for each section of the text wasn’t always obvious. There were times throughout the project, when we stared blankly at the whiteboard re-reading the text desperately grasping for a concept, sentence or word to morph into a visual.
In those cases we resorted to doing our own research in hopes to find data that would help us craft a visual. Luckily, we found several public sector sites that had huge amounts of census and municipal data available. The only problem is that most of the data is available only in GIS formats which made it difficult to extract the parts we cared about — which is not uncommon for public data portals…but that’s a topic for another article.
We used open data sources to create custom 3D data visualizations
When we plotted the raw census data, we started to see patterns that would ultimately help us shape the visuals for the scenes. Above are a few examples of scenes that are driven by various open data sources.
Putting it all together
After many rounds of iteration, finessing the details, and handful of fire drills, we’re proud to see our work out in the wild. In retrospect, we walked away with some key learnings:
Promote reading
The scroll interaction was something we prototyped meticulously upfront, and our test users found it to be intuitive.
We learned that in a situation where reading is the primary task, it’s best to let the user’s natural reading pace drive the visuals (as opposed to having the visuals drive the reading).
Use cinematic techniques
Designing for the web is a relatively new landscape. Because there are infinite approaches to solving a visual problem, it’s common to overlook tried and true techniques from more established mediums. We found that applying classic cinematic techniques enabled us to craft solid narratives.
Leverage real data
It was somewhat painful to find, massage and prep data for use in WebGL. We tried to “fake it” to save time, but ultimately came to terms with the fact that leveraging real data, no matter how tedious, always resulted in a better, weighty, respectable graphic. In the end, we learned it’s wise to start with the raw data rather than waste time trying to simulate it.
We hope you enjoyed hearing about our creative process. I’m eager to see how the digital storytelling space continues to evolve this year.
If you’re interested in working together on these types of experiences send us note at hello@truthlabs.com or on twitter @truthlabschi or truthlabs.com
Thanks to Dan Thompson, Tyson Damman, Drew Vosburg, and Jason George.
This article was originally published on Erik's Medium page.
