The ‘Behind the Story’ card is a collaboration between the product team and reporters to better connect them with our audience and provide a more complete view the journalistic process. The transparency card provides an inside look at various articles, including investigative and ongoing pieces. This module, along with the reporter bio card, helps reinforce trust, transparency and engagement between readers and McClatchy papers.
Atoms
The ‘Behind the Story’ card is comprised of five atoms, including type styles, a gray layer background and a caret icon.
Molecules
I combined the Secondary Headline and Paragraph Summary atoms to create a new molecule for this card and help differentiate the text from the rest of the story body.
Iterations
I explored a few card style variations, including borders and an elevated drop shadow. After feedback from my manager, team members and PMs, we landed on a light gray background that visually placed the card a layer behind the story.
The final design
The final design features the first question and answer on load before dropping down to reveal up to seven more responses from the journalist. Reporters can include inline links to other resources, as well as photos and videos of the reporting process.
The 'Behind the Story' card on kansascity.com
