The current solution for visual explainers in the newsroom consisted of custom developed off-platform embeds
How might we create a high-impact visual storytelling format that supports our journalism for the USA TODAY Network?
Explainers are a high-impact visual storytelling format that’s independent from traditional stories or galleries. It’s a standalone, web-based experience that works best with great visuals and short, punchy text.
Product Design, Interaction Design, Prototyping
- Goals: Provide a solution for the newsrooms to generate high-impact visual stories, enrich the reading experience, retention efforts by measuring recirculation and depth of engagement
- Team: Storytelling Studio, USA Today Journalists, USA Today Graphics
- Role: Product Designer, Design Prototyper – one of two designers.
- Areas of focus: Visual design, prototyping, user testing, back-end visual cms authoring design
Background
The goals were simple we wanted to give newsroom designers and producers a tool that they could use to create a new storytelling experience. If you could think about the interaction it was just a slideshow type experience but we wanted something more that we could anchor to the USA Today brand and network as a whole.
We also one of the ability to work with the social team making a more streamlined workflow between photojournalist and the social teams. Right now this consists of two separate workflows where information synthesis and sharing isn’t as conducive and streamlined as it could’ve been.
We also knew that based on former data readers enjoyed short form contact that they can absorb. This was in the time and Instagram launched stories and Snapchat was beginning its heyday.
Requirements & Constraints
This tool will be built outside of the current authoring platform this tool will leverage the Universal Web framework on the display side this tool is designed to be used with or without a designer this tool is an MVP that will be iterated on over time
The Process and plan
Starting with templates (five) Prototyping Developing a user testing plan
Bespoke authoring cms
We had user testing We tracked iterations and prepared the MVP for progressive enhancement
Results & Learnings
Eventually AMP Stories became adopted by the content and editorial teams https://www.ampproject.org/docs/design/visual_story
See examples here:
- https://www.usatoday.com/explainer/parkland-survivors-march-florida-capitol/19/
- https://www.usatoday.com/explainer/the-evoloution-of-barbie/27/
- https://www.usatoday.com/explainer/surgerycenter/18/
- https://www.usatoday.com/explainer/alis-most-famous-quotes/6/
But, this wasn’t a complete failure; because now we have an opportunity to create stories much like this one on exposure.so but with our In-Depth framework.
See that case study here:
2020 Josh Miller