CBS Local News App

Successful redesign of CBS Local's core news app for tablet and smartphone, providing local news, media and radio streaming for CBS's 26 major markets across the country. Upon launch, downloads increased by 50% and unique page views by 10%.

What problem was I trying to solve?

Rethinking of the UI and UX 

• Looks more like an entertainment site than a news site

• Is it easy to find, read and consume content?

• Increase ability to scan headlines, allowing users to find content quickly

• Simplify branding and revisit brand hierarchy

• Bring design closer to the desktop and mobile web experiences

Dated design patterns

• Everything on the page

• All content having to be above the fold, limited scrolling

• Too much chrome, dated weather icons, update branding colors

Business goals

• Increase user downloads, app usage and loyalty

• Increase ad views of content/gallery banner ads, video pre-roll and audio stream ads

Who was this problem affecting?

Consumers of CBS Local content

• Watchers of CBS Local News and Listeners to CBS Local News, Sports & Music Radio Stations

• They are looking for the latest CBS local news, weather, sports on the go & want to stream their favorite local radio stations

• 45% of all users stream

CBS Local

• App abandonment (crashing), less revenue, tarnish brand with poor user experience

What steps did I take to solve it?

Design Research 

• Looked at popular news/media apps like NY Times, NPR, TED as well as Twitter and Pinterest to look for latest design patterns

• Referenced Feedly app for drawer organization

• Apple iOS for design inspiration

Reviewed Apple iOS Human Interface Guidelines

• Defer to content, take advantage of whole screen

• Remove crutch of skeuomorphism and let UI take a supporting role

• Provide clarity with use of white space, key use of color, system fonts, borderless buttons

Initial Home Screen Design

• First attempt of the home screen was inspired by Flipboard

• Looked slick but realized it was more a splash page

• Added one more click before users could see the real content

What was the final solution?

Card Based Design

• Container style design pattern that works on any screen size

• Design optimized for both landscape and portrait

• On mobile, moved images to the right to providing easy left hand scanning of headlines

• Simplified cards by removing more links and making section label clickable with arrow indicator

Branding

• Old YourDay branding was removed. Superfluous, sounded like a morning show and added extra complexity

• CBS Market logo moved to upper left hand corner, matching desktop placement

• Upper right hand placement of CBS's prominent sports and news radio station brands

• Clean, logical structure

Navigation

• Hamburger nav introduced to provide easy access to content sections, features and settings

• Edit front page feature: customize homepage content sections

  • Use case example: Sports fans could select their favorite NYC teams - Rangers, Giants & Yankees

  • Banner in the content area also provides access

The Player

• To save valuable screen space and promote scrolling, radio streaming and video access was moved from the bottom of screen to a right hand drawer

• Drawer is available from all screens

• The player opens when a station selected and an animated icon appears next to the active station

• Development of the player drawer icon

  • First version was a Live button but this didn't make sense because the station streams are live but the local TV News videos are not

  • Second version was a classic play button (round button with triangle) - but we felt it denoted videos more than it did audio

  • Chosen version was a headphones icon which made the most logical sense - on the go, you will use headphones to listen to audio and videos

What could I have done differently?

Asked more questions

• Direct user interviews - what they like/dislike

• ID more user types: commuter, sports fan

• Are people using the customizing homepage feature? If not, why?

• What is the percentage of TV News vs. Radio consumers?

• What time of day gets peek usage? How does it differ between markets?

• Where are users streaming: in their cars, on the street, at work?

Results Exceeded Expectations

• Downloads went up almost 50% - expected 20%

• Unique visitors went up 10% - expected: 5%

• Page views went down by 25% - via simplified navigation and content sections

• Number of ad unit impressions went up by 2%

App is available for download in the iOS and Android stores