Brief

 

CLIENT:
CNN

TEAM:
3 members

DURATION:
2 weeks

DEVICE:
iOS mobile app

TOOLS:
Sketch, InVision, Google Drive

DELIVERABLES:
Clickable prototype in Invision

 
 

MY ROLE:
Evaluate the existing CNN mobile application, complete a competitive/comparative analysis of similar apps, conduct user interviews, synthesize interview data, hand sketch ideas for screens. create wireframes in Sketch, administer user tests, create clickable prototype in InVision, refine visual designs.

PROJECT OVERVIEW: 
CNN wanted to find new ways to get millennials* involved with their government at the local, state, and national level. Our goal was to create a solution that would better educate voters about the current election cycle as well as keep them informed about policies in their area.

*Pew Research Centre classifies “millennials” as those born between 1981 and 1996.

 

Research

COMPETITIVE/COMPARATIVE ANALYSIS

 

While the other members of my team started by researching CNN’s background, I downloaded roughly a dozen mobile apps that were either related to news consumption or were intended to help users locate and contact their representatives. From there I chose to focus on four of them to compare to the current CNN app.

Apps compared: Politico, The Washington Post, Countable, Political

 
 

Findings: Most apps either focused exclusively on news content or exclusively on political activism, but they did not offer a combination of both.

Solution: Integrate CNN’s existing news platform with new features to allow users to discover more information about their representatives and politics in their area.

 

USER INTERVIEWS

 

My team and I collectively came up with around 40 questions to ask our participants. The questions focused on their current news consumption habits, how they learn about issues that affect them, and their familiarity with the political process across different levels of government.

We each interviewed 2 participants (for a total of 6) between the ages of 25-37.

 
 

After our user interviews were completed, every team member wrote down the findings on individual Post-Its, which were color-coded to each interviewee.

The team then spent the next hour grouping our findings based on similar pain points, thoughts, or desires our users had.

 
 

Some of the trends we discovered through synthesizing our user interviews showed us that millennials:

  • Are uninformed about local and state politics

  • Are unsure who represents them or how to find out more about their representatives

  • Consume news through many outlets, with social media being one of the most used

  • Have issues trusting news sources

  • Don’t feel like their votes count

 

 

USER PERSONAS

After using affinity mapping to synthesize the data from our user interviews, our team felt confident in creating two user personas for the project. We would keep these personas in mind while we designed our app.

 
 
 
 
 
 

FEATURES

 

Now that we really understood the users we were designing for and had two personas in hand, we came up with our list of features using the MoSCoW method.

 
 
 
 


We decided that the app must:

  • Give users the ability to find, learn more about, and contact their representatives

  • Provide information about upcoming elections and legislation

  • Integrate social media into the current CNN app

  • Allow users to customize their news feeds based on topics

  • Connect the current CNN news resources with resources for voters

 

 

Designs

SKETCHES

With our feature list in hand, we each hand sketched our own versions of the screens on paper, and later came together to decide the best aspects of all of our sketches to combine.

 
 
 

 

WIREFRAMES

I took the hand-drawn sketches I made and created high-fidelity wireframes for them in Sketch. Our team didn't focus too much on the visual design at this stage, as we wanted to start testing the flow with users as soon as possible.

 
 
 

 

USER TESTING

After I created a new clickable prototype in InVision, each team member performed usability tests. We had 5 participants between the ages of 27 and 37.

Some of the scenarios I used during these tests had the users:

  • Find out who their senators were

  • Figure out the date of an upcoming bill vote

  • Adjust their account settings

 

 

USER TESTING FINDINGS

After the team conducted our user tests, we each identified the pain points our users experienced during these tests.

Some of them included:

  • The initial sign-in/account creation screen didn’t give the user the ability to sign-in via their social media accounts or skip the process altogether, and users didn't know why they would also connect their social accounts during this process

  • We used the term “national” instead of “federal” when referring to representatives/bills/elections and it caused some confusion

  • Our initial navigation structure was unclear, as we used the word “Vote” as the menu label that encompassed all of our new features

  • Reviews on representatives could be made anonymously, which affected the level of trust users had about them

 

 

ITERATIONS

After conducting our usability tests, we had a good understanding of what worked and what didn't work for our users. We collectively agreed on the solutions and I started creating new iterations of our screens.

 
 Our original footer navigation (left) confused users because it wasn’t clear what the “Vote” button led to. I reworked the navigation to miMic CNN’s current layout as well as change the wording to “Voter Center” so users would understand they could access a variety of resources there.

Our original footer navigation (left) confused users because it wasn’t clear what the “Vote” button led to. I reworked the navigation to miMic CNN’s current layout as well as change the wording to “Voter Center” so users would understand they could access a variety of resources there.

 
 

Our initial account creation flow (left) was clunky and didn't allow users to sign in with their social accounts. I simplified the flow (Right) and gave users more sign-up options as well as the ability to skip the process.

 

 

VISUAL DESIGN & REFINEMENTS

After performing one final usability test to make sure our iterations worked, I focused on the visual design of our screens and made sure everything looked cohesive before we presented it.

 
 
 
 
 
 
 

 

Conclusion

What went well during this project:

  • Our team had a good communication plan laid out from the beginning

  • We defined our goals and how to achieve them

  • Each team member contributed a lot to the research process

  • We played off of each other’s strengths

  • We listened to each other well and asked for advice or help to meet the end goal

What didn't go so well during this project:

  • Division of some responsibilities

  • Overthinking certain choices led to delays

  • Other team members didn’t follow through with things on a personal level

  • We stopped using our Trello board/project plan, so there wasn’t a great way to keep track of all the tasks left to do or who was doing them

  • Consolidating our Sketch files was tedious, as we all used different font sizes and weights in different areas

If the project were to continue, the team would want to:

  • Integrate the ability to add multiple locations so that users can also explore representatives/legislature in other geographical locations that they care about

  • Create user profile pages to create more of a social network within the CNN app

  • Continue integrating social media into the News portion of the CNN app

 
 
 

Want to talk to me about this project or any of my other work?