CBS News App
Boosting a stagnant user base by reimagining a news ecosystem for mobile
Industry
News & Media
Employer
CBS Interactive
Client
In-house
Duration
Around 6 months start to finish
Role
Research
Prototyping
Visual Design
Team
1 UX & Visual Designer (myself)
1 Design Manager
1 Product Manager
5 Engineers
A long-overdue need for mobile
When I joined CBS News, their news ecosystem existed only on desktop, and it was feeling cluttered and dated. Around this time mobile device share was growing, and, we suspected, changing they way customers consumed news. We needed to rethink the CBS News experience for a wider variety of screen sizes and browsing habits.
We interviewed users of competitors' iPhone and Android apps, and asked them about their use habits. Over and over we heard that in addition to longer sessions, they were using phones to check news quickly in between other obligations.
Key customer quote 💡
I open the iPhone app on my morning train commute. I scan the headlines to get caught up on what’s happening in the world — then do a deeper dive if anything interests me.
- Dan
Existing cbsnews.com site: poor scannability, no mobile version
Organizing a vast, diverse content ecosystem
I knew we needed to get our information architecture right. CBS News produces a staggering amount of text, photo, and video journalism every day across a number of verticals — but the various content types had never been audited or standardized.
I conducted this audit and captured it in a simple sketch. Content was roughly organized into three broad sections:
News – text, photo, and video assets from cbsnews.com
Shows – video clips from CBS news shows like 60 Minutes
CBSN – 24/7 live news feed
…with various media types falling under each section. This initial sketch inspired the app's final navigation menu.
"Site map" sketch -> final app navigation menu
Curating the experience for screens large & small
We knew from qualitative research that people browsed news differently on different devices — scanning headlines and articles quickly on their phones, with a more "lean back" experience on tablets. So we were thoughtful about how the 'News' and 'Shows' experiences should differ across devices.
Because of space constraints, we designed the 'News' section as a single-column of headlines. We explored a quick accordion-style summary to support the quick browsing behaviors our customers described. Over in 'Shows', we designed larger, more visual cards to showcase the longer-format (and more expensive to produce) video content.
I diagrammed the flows between the various sections of the app to help developers conceptualize architecture in code.
IA / Flow diagram
On tablet, with more real estate to work with, I explored a more architected page grid — exploring via wireframe the appropriate density of articles and how to highlight "hero" stories, balance text and image, and drive browsing across various verticals in tablet & landscape. The focus here was adaptability, scanability, and clarity.
Tablet portrait & landscape grid studies
Sharpening brand expression across an iconic roster of news properties
Beyond page architecture, our focus shifted to the visual layer. How might we showcase CBS News' incredible breadth & depth of reporting and make the CBS News brand feel lively and fresh in a new environment?
We used the legacy CBS News font, Helvetica, but freshened it up with new weights, using a heavy weight for section titles, and a thin weight for headlines.
The 'News' section was primarily monochromatic to be easily legible outdoors in bright environments. But pops of color were injected via award-winning photography, and 'Show' promo modules.
News door: phone
News door: tablet
'Deep story' news door: tablet
While the news section of the app prioritizes scanning and quick consumption, assets in the shows section were designed as full-screen, swipeable cards to highlight their longer length and more evergreen nature.
We emphasized color and photography to make each show brand pop.
Shows door: phone
Shows door: tablet
The outcome? Growth from 8 to 10 million downloads, and thousands of rave reviews
With over 10 million downloads across the App and Play Stores, CBS News lets content shine while accommodating a variety of use cases. It has maintained a 4-star rating or higher on both the App and Play Stores since its launch.