Case Study | UX Design

CNN Politics App

THe Problem

CNN’s competes in a busy marketplace for 24-hour news viewership and mobile app users—especially in election years. But as voters have expressed increasing dissatisfaction with their elected representatives, CNN wants to find new ways to get people involved with their government at the local, state, and national level. 

Their target solution would both better educate voters about the current election cycle (beyond just primary and general election results) but also keep them involved with the business of government on an on going basis.
Project Summary

A journey of 1,000 miles begins with the first step.

Project Outline

As a group assignment for General Assembly's UXDI course, we were asked to add or redesign features within the existing CNN app. We were required to conduct user research and get iterative feedback using rapid prototyping methods and present a high fidelity prototype showing how our solution solves the problems of our users.

Deliverables

  • Hi-Fidelity Prototype
  • 10-minute presentation of findings including research takeaways, process, our solution and recommended next steps
  • Design Deliverables document containing:
    • Site Map
    • Personas
    • User Flows
    • Annotated Wireframes

My Role

As the most senior visual designer on our team, my role was to art direct the process and coach the younger designers who were interested in learning visual design. I was responsible for the creation of wireframes, prototypes and high fidelity visuals of the iPhone app. I also mentored another designer to teach her how to use Sketch to create the iPad layout. Additionally, I contributed during the research, user flows and sitemap creation as well as playing an even role in the presentation of our solution.

Tools

RESEARCH & DISCOVERY: whiteboard, paper & pencil, Survey Monkey, text message surveys, in-person interviews, Post-It notes, Axure

WIREFRAMES/RAPID PROTOTYPING: paper, Axure

HIGH FIDELITY VISUAL DESIGN: Sketch, Illustrator, Photoshop, InVision
Research & Discovery

You know what they say when you assume...

Methodology

We used a combination of competitive analysis, user surveys, affinity mapping, card sorting and user testing to gather data about what people wanted to see in our redesign, what pain points they had with the current app, what content they were seeking and how they preferred to consume that content.

Takeaways

User data is an invaluable part of the process! We were able to get some great ideas for features as well as debunk several assumptions and find patterns of behaviors that were unexpected. The most common theme was that people wanted relevant, scannable content that they could consume in bite sized chunks as they fit their news between the other parts of their busy day.
PAIN POINTS
  • Long articles
  • Biased content
  • News outlets focused on scandals rather than “real news”
  • Not enough info on Candidates
    • Background & Resume      
    • Candidate’s stance on issues are unclear
OPPORTUNITIES
  • Focus on Election 2016!
  • Create all-in-one source for candidate information & Breaking News
  • Summarizing an article so staying up to date can be quick
  • Unbiased content that explains policies
  • Scannable, visual components that are quick and easy to digest
  • Categorization of issues to easily & quickly search through

Competitive Analysis

User Surveys

“Another cool option would be to allow you to select your stance on key issues and the see which of the the people running most closely represent your stance.”
— Brian Wingate, User Survey Response
Information Architecture

Make it quick. Make it easy. Make it relevant.

Simplify

We organized the content to make it much easier to navigate to using the dropdown menu instead of having to dig through irrelevant articles to hopefully find a gem. We also made most relevant content easy to find from the teasers on the home page as well as top sections of each candidate's profile.

Simplify

We took what we learned from our user surveys and made the content digestible in three depths of information; Quick scanning headlines, highlighted bullet lists of most pertinent information, and deep dive full articles that are still inline with the rest of the news feed or list of issues.

Simplify

Our surveys gave us the insights as to which formats users were most accustomed to. Utilizing this information we organized our content using a familiar scrolling news feed to make adoption as easy as possible.

Personas

User Flows

The existing user flows led to dead ends
We simplified the navigation to make relevant information easy to find

Site Map

By simplifying the information users want most, we made it possible for voters to find information about their candidates or specific issues without having to waste time combing through irrelevant articles.
Wireframes

Fail quickly. Fail forward.

Iterations

By taking advantage of the speed of implementation available via pencil and paper, we were able to test our assumptions and make radical changes to the content architecture and navigation without getting lost in "design debt" by finding out too late that our assumptions were off target.

We tested our wireframes at every stage of iteration to ensure we we implementing the best features and discarding the ones that users didn't find to be valuable.
Quick pencil sketches allowed us to collaborate as a team to work through ideas on the fly. We even used cutout windows to show how scrolling pages work.
Simple wireframes built in Axure gave us the ability to test animations on one of our most promising features–variable depth articles that are ideal for rapid consumption and scanning.
Breaking News headline appears
Hold headline for highlights as lightbox
Tap headline for full story as accordion
Rapid prototyping made it easy to implement feedback from our users to find the best solution for our navigation.
User Testing

Get feedback early and frequently.

Concepts were tested almost immediately using folded paper to illustrate hover and active states.
"If you're not testing with real users, you're not doing UX!"
We tested users at every step in the iteration process, including a member of CNN's web development team. Her feedback on our content organization and how the CNN team applies web traffic analytics to serve the most relevant content was very valuable.
“Looking for quick bullet point updates with links to further read if I wanted to. Everything quick and to the point.” 
— Emily, User Survey Response
High Fidelity Prototyping

Putting democracy to the test.

Solution

CNN  has a very visible and well established brand so it was important for our visual design to mirror the existing aesthetics. We opted to keep the native navigation setup of the existing app but updated the dropdown to suit our new sitemap.

News stories now have three levels of detail to address the need for quickly scannable content. Stories are displayed witha n image and headline and a simple touch and hold reveals a lightbox summary of the article with a bulleted list of highlights. Should you choose to dig deeper, tapping the story reveals the entire article inline with your news feed. You can continue reading right into the next story or tap again to collapse the story and return to scrolling the feed.

We implemented the Candidate Matchmaker Quiz, an existing asset that has been buried on the website and was previously not available on mobile devices. This allowed us to leverage the existing code and meet the requests from the user surveys.
Easily digestible bits of information are available for quick consumption while still allowing readers to dig deeper without having to leave their news feed.
The Candidate Matchmaker Quiz is designed to help voters clarify their own position on issues while learning more about the topics that are unfamiliar.

The quiz results show how your viewpoints match those of the candidates and allows you to see where your match stands on important issues.
Future Recommendations

Where we're going, we don't need desktops!

Mobile First

With the rising number of users accessing their information via mobile devices, especially news, our recommendation is to put even more resources towards optimizing the mobile platform. Many resources that are available on the desktop website were not available on the mobile app.
REflection

Know thy user. The what, why and how of success.

There's Value in testing assumptions

The biggest takeaway I gathered from this project was the importance of getting user feedback early and frequently. The information we gathered from our user testing shaped several of the features that ended up in the final product. The information gathered from stakeholders helped shape the organization of our content and taught us how they curate their content.