An iOS companion app for politics - Powered by CNN




4 UX Designers


  • Project Management
  • Competitive Analysis
  • User Interviews
  • Research Synthesis
  • Paper Prototype
  • Usability Testing
  • Iterations


2 weeks


Sketch, InVision, pen, paper



CNN is among the world's leaders in online news and information delivery. In the US, the company is well known for its concentration in political coverage. However, many political activists and users rarely visit or use the app to consume political news, learn more about their local and state representatives, or involve in politics-related events.


CNN Connect (CNNCT) is is a companion iOS app to CNN that provides users a dashboard of political updates, facts, and information. Its goal is to enhance the experience while consuming news and encourage users to get involved with local politics. Main features include:

  • Get updates on bills and legislations
  • Learn more about local and state representatives
  • Compare and contrasts election candidates
  • Access to local voting schedule


Initial thinking allowed our team to be more conscious of the language, color, and tone throughout the process.

Initial thinking allowed our team to be more conscious of the language, color, and tone throughout the process.


Before diving into the research process, our team sought to understand the political context in order to approach the problem in a mindful way. We achieved it by coming up with a set of questions to help us organize our thoughts and plan a direction:

We listened to a talk about Civic Design and Voters to gather industry insights at World IA Day 2018.

  • What kind of language and tone we should use and avoid in the political context?
  • What do users want to know about their representatives and appointed officials?
  • What do users want to know about the election candidates?
  • How do users want to be engaged with the government?
  • How can CNN connect this engagement tool to their news content?

We also attended an event, listened to industry professional, and asked questions to explore the research that has been done on voters


  • Color, language, and tone are critical in a political context
  • Research result depends heavily on location of users
  • Users want to know how what's coming and how it affects their lives
  • CNN is a well-established brand with clear design guidelines
  • Integrating this political engagement tool into an existing app could face featuritis problem & change the balance of CNN’s news content



Countable is the winner and is leading the market with the number of active users and its app concept. Countable provides users with a variety of useful features. Its main weakness is information architecture as it is hard to navigate and find information while using the app. 

This is where my role started to emerge in the process. At this phase, I identified 3 direct competitors for CNN: Involved, Countable, and Facebook-Town Hall. I then created competitor profiles with these criteria:

  • User Flow
  • Pain Points
  • Branding
  • Features Assessment
  • Heuristic Evaluation
  • Strengths & Weaknesses


Our goal for user interview is to identify pain points and to validate which features would help users find political updates and get involved with local politics better.

We recognized that the scope of this project is big and it is best to execute with a user pool across different states and counties. However, in order to deliver result in a 2-week sprint, we narrowed the scope and picked New England region as a start point. To minimize bias, we diversify our user pool, conducted 12 interviews with users from various backgrounds and experience. For example, some users:

  • Immigrated to the US, lived abroad, or relocated to Massachusetts from another state
  • Work in different professional settings and industries
  • Actively involve in community building and local politics


Our team then did an Affinity Mapping exercise, color coding user interviews with stickies where each color represents a unique user. This exercise helped us see the trends and patterns of insights and organize them into different categories.

The synthesis process allowed us to connect all the dots, take a deep look into users' perspectives and we started to see the main challenge:



Our team then segmented all insights and developed 2 user personas: Kelly Clarke & Luis Genera

Persona 1: 

Goal: To contact representatives and go to Town Hall meetings

Must-Have Features:

  • Town Hall & Voting schedule
  • Event sharing
  • Contact Representatives

Persona 2

Goal: To get updated with issues, bills, and legislations and learn more about election candidates

Must-Have Features:

  • Fact-check candidates
  • Compare & contrast candidates
  • Identify local Representatives


During the ideation process, our team tried to engage users by including them into the creation process. We did it by hosting a Participatory design workshop in which we asked users to visualize their thoughts and ideas. We also conducted a design studio as a team to collaborate and brainstorm effectively.  

Participatory Design Workshop

Groups of users were invited to participatory workshops to provide their input. After listening to our problem statements, they were given drawing materials and asked to sketch or write any thoughts, ideas, or directions for the app.

Design Studio

Each member of our team, in 30 minutes, came up ideas of how the app should work and look like. We then came together, discussed, compared and made design decisions


As soon as we made design decisions, I ran usability testing to gather feedback as early as possible to identify issues and concerns for iterations. My goal for this process was not yet to worry about visuals but to make sure CNNCT had a functional structure. For the paper prototype, I created 4 scenarios, observed and listened to users as they go through the process. 

Usability Testing.png

I then went over users feedback, did some iterations on whiteboard, fixed the paper prototype, and re-tested with users until all problems were sorted out.



After testing with users, we felt more confident in our design decisions for CNNCT, we then focused on refining the flow of the app, making sure CNNCT and CNN were well integrated.


  • Get Involved = Find town halls, voting, community events to attend
  • Polling = Interact with other users
  • Elections = Learn more and fact-check candidates
  • Voting Schedule = Schedule and reminders
  • Representative = Find and contact officials

    Why a companion app?

    • Allow integration between CNN and CNNCT (just like Facebook and Messenger)
    • Maintain the balance of CNN news contents, avoid dominating the platform with political news

    Information Architecture


    User Flow


    At this phase, my role started to shift; as the app structure became more refined, another team member took the lead to integrate visuals into the digital wireframes, making the app become more realistic.

    Logo Study

    The Final Product

    Visual Design.png




    Team Gryffindor


    • More usability testing & iterations
    • Continue to interview users and evolve personas
    • Potential on-boarding process for new users


    • Recruit users as early as possible
    • Move quickly, research can't be 100% confident or accurate
    • Spend less time discussing low priority problems