CBS Local App - Update
What problem was I trying to solve?
Rethinking of the UI and UX
Original Design
No previous smart phone app design.
- 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%