CNN Connect is a concept derived to help keep the public informed and engaged at every stage of government. The application would serve as an additional source of information to guide the public throughout the year in order to actively participate in local, state, and national democracy.
Users need a better way to obtain information on local ballot measures and candidates so they can make informed decisions during all elections. They need this because there is a shortage of concise, consolidated information available to the public.
While studying potential users, it was clear our team needed to create a mobile application which allows users to stay up-to-date on current political issues, keep the users avidly involved with political knowledge and allow for an overall optimal user experience.
One important factor was the timeline: with just two weeks, how do we have a thorough understanding of the user and their needs while building out of this new App?
Our team interviewed a total of seven individuals to gain more insight into our users. We asked broad questions like, “What would you want to know about candidates in any specific race?” and “What would motivate you most to engage with officials on a local, state, and national level?
Once we gathered basic information, we dug deeper by asking questions like, “How would you like to interact with your government? Local, state, or national?” and “What would motivate you most to engage with officials on a local, state, and national level?” Our results were interesting, which lead to multiple rounds of affinity mapping. The categories formed then resulted in our main "How Might We..." statements.
Who participates in “The Great Experiement”? Creating a new app that would parlay with the main CNN App for information and news, would be difficult. As a team, we needed to thoroughly understand who would be using this separate app and how we would design/test for their wants, needs and pain points. Let's meet our two main personas for this project.
Determining the Task Flows first would clarify how our users would be using/interacting with the app. From there, creating the full User Flow and Information Architecture were vital for establishing screens for development.
After three design studios, the team was able to establish specific pages to build out in the next phase. This would allow us to create templates to be used throughout the app and create a cohesive look. Once, the team agreed on preliminary sketches, we dove deeper and created detailed low-fidelity sketches.
These would serve as a guide for me while developing the mid-fidelity mockups.
The first renderings of the new app were focused on usability and integration. The team really focused on the necessity of making the prototype workable and making it feel part of the Apple HIG Guidelines. The wireframes showcase scroll and swipe interactions, a cohesive flow in design from page to page and an overall template to be used for future build-outs.
Once all wireframes were built out in order to accomplish both user task flows, it was time to get necessary feedback in order to progress into Hi-Fidelity. Therefore it was time to create a prototype for our first round of Usability Testing.
Utilizing Figma, a prototype was configured to match the task flows of both personas. Our team was able recruit five individuals for initial usability testing. Since all testing had to be done remotely, our participants went through the process via Zoom.
We specified the testing to be focused on the main two task flows we generated for the two Personas earlier in the process, while promting our participants to do additional tasks here and there.
To get specific qualitative feedback, we made sure to guide the participants as little as possible. The following are some of the specific feedback from the participants.
100% of participants found the initial Call to Action button, "Register to Vote," too distracting and thought it was the main purpose of the app. The team wanted to make sure every user has the ability to register to vote within their city. So, it was a team decision to keep the CTA prominent on the main Home Page of the app.
We did, however, add verbiage and an icon to add some description of the action. This allowed for clarification and in the second round of user testing 80% of participants found the section helpful and informative.
60% of participants found the search option awkward to start their navigation throughout the app. To add extra guidance, we added the quick filters at the top of some of the main pages to allow for an easier experience.
These filters would allow users to filter by Political Party, Measures/Bills/Propositions, and their location (Local/State/National).
100% of participants were able to navigate through the prompted tasks. A small issue we found was the visual aesthetic of the contact icons (email, phone and twitter). Following Jakob's Law of Internet User Experience, we wanted to make sure the visual cues were simple and familiar from other applications users use daily.
50% of participants found the Donut Chart in the Mid-Fidelity Prototype confusing and lacking gamification. There was no prominent visual cue to give immediate gratification. So, we changed the visual aids to show the positive or negative affect the user was able to have on the polling feature.
This feature was controversial during our first round of user testing. Our team found that 80% of participants didn't want to participate in the polling action unless they knew what their engagement meant for the app. We explained these polls would be used for CNN to predict more accurate polling statistics.
With changes made and more fine tuning established, the research phase was complete for the time being. Therefore Hi-Fidelity Mockups were next to be completed. There were multiple areas of improvement, but nonetheless I was able to make necessary changes to get a prototype ready within a matter of hours. The Hi-Fidelity mocks and prototype were done in Figma to allow a quick turnaround.
We were even able to do some additional A/B Testing to land on specific design decisions for another round of iterations.
Take a look for yourself...
The CNN Connect app design was a large task. Our team was able to divide and conquer while still working in an agile product management environment. Working within the two-week time frame gave a lot of obstacles. With an additional two weeks our team would have been able to go into greater depths with building out a multitude of other pages needed to make this a minimal viable product (MVP).
In order for this to be a MVP, the mobile version would need to be built out for Android as well. Through the final round of user testing we came to the conclusion that some of users were caught off guard with an Android version being unavailable.
