Team blue: Project Skim
- Damon Kiesow is senior product manager at The Boston Globe
- Adam Schweigert is director of technology at Investigative News
- Haoyun Su is a data journalist at the Indianapolis Star
- Tyson Whiting is a lead designer at Vox Media
- KK Rebecca Lai is a junior at Northwestern University and a Knight Lab student fellow
- Priya Krishnakumar is a senior at Northwestern University and a Knight Lab student fellow
In their own words:
Our team tackled the design challenge: “How might we create a mobile experience that is easily scannable for long form?” While there are many possible ways that designers could improve the brows-ability of a long-form story on small screens, we prototyped two possible use cases:
- Summary card approach: A design for chunking a long-form story that allows readers to swipe between sub-points within the longer narrative.
- Anchor tag approach: A design that allows a readers to quickly skim through the major elements in a story package.
#teamblue at #sndmakes is working on helping users scan longer stories more easily on mobile … pic.twitter.com/ZuCYU9WwMy
— Rebekah ☠ Monson (@rsm) March 21, 2014
Summary card design
"Skim" also has a summary card approach. http://t.co/n6u24KxCHY #SNDMakes
— SND (@SND) March 23, 2014
The team used a recent story from the Bangor Daily News. The article had a mixture of short video segments, animated GIFs and photos. And, it was broken into clearly defined chapters. To improve the ‘skim-ability’ of this piece the team designed a ‘summary card’ experience to top each story section. From the homepage the summaries are accessed by swiping left/right allowing a quick browse through the storyline and a quick introduction to the main characters and places. From any summary card a reader can scroll down to read that section – or quickly return to the top of the story to read from the beginning. This summary cards serve both as info nuggets and ‘bookmarks’ for returning readers.
Anchor tag design
The team from "Skim" took a longform @BuzzFeed story and made it easily digestable. http://t.co/7JiLSjzBGG #SNDMakes
— SND (@SND) March 23, 2014
The team illustrated this idea with “Kony 2012,” a 7,000 word story published in March on Buzzfeed. It includes text and photos, but does not break into discrete sections or chapters. To enable skimming on mobile the team added a ‘skim’ button in the top navigation, identified key quotes and designed pull quotes to be embedded in the text. They then added a ‘skim’ button in the top navigation which simply jumps the reader between the quotes, providing a quick overview of the story, while keeping the reader within the main body.
Design is happening @kkrebeccalai @priyakkumar @komickiller #SNDmakes pic.twitter.com/Cuv4eJlIOZ
— Joe Germuska (@JoeGermuska) March 22, 2014
Check out the other ideas: Backstory | Moving Stories | Sluice
New fundraising campaign: Do you love SND and care about its future? Show your support, and leave us a tip.