iOS mobile app
Sketch, InVision, Google Drive
Clickable prototype in Invision
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.
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.
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.
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
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.
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
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.
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.
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
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.
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.
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?