VOICE, THE POLITICAL LEARNING APP
PROJECT TYPE | UX Case Study
THE PROMPT
Create an app for social good that gets people involved in politics.
THE SOLUTION
The Voice app is a political learning tool with the goal to inform users about who their elected officials are at every level of government, local, state, and national; to engage them in learning the arguments for and against different issues and topics that are prevalent in US American culture; and learn where they fit in the massive political spectrum and hopefully use all the information that they learn from using this app to empower their decisions when voting during elections.
I noticed that there was a very bare market for political apps. The issue being that most apps that make an attempt to teach users about politics are presented echo chamber manner, showing them only what they want to see, interacting with other users that polarize their points of view without learning anything new. Other apps are just those that represent larger news organizations giving no further information. Unless you are actively searching for it, information for various politicians and government officials are not plain to see.
My strategy for the app:
Design an app that will teach users about polarizing topics
inform them about who their elected officials are and how to connect with them
help users understand where they fit in the political spectrum
Make the app enjoyable to use
PROJECT DURATION
6 Weeks
December 2021 - January 2022
PROJECT ROLE(S)
UX Designer
Paper + Digital Wireframing; Design Iteration; Low + High Fidelity Prototyping
UX Researcher
Conducting Interviews and Usability Studies
Visual Designer
UI Design
SOFTWARE USED
SUMMARY
I conducted interviews to understand the users needs and pain points. The feedback received through research made it clear that interview participants mostly had no idea about who their elected officials were other than at the national level and perhaps who their locally elected government officials were, such as the mayor. Participants had a vested interest in learning more about them and how their voting history aligns with how their own views on political issues and topics. Interview participants were also very curious about the political grid concept and where they would fall on it.
PERSONA | AMANDA
Amanda is a college student who needs quick and easily digestible political app because she has a fast-paced lifestyle.
PERSONA | DANIEL
Daniel is a hardworking first-generation Mexican immigrant who needs a political app presented in his first language because his English vocabulary is still growing.
DIGITAL WIREFRAMES
The profile page relates more to those users who enjoy having categorical identities such as with astrology signs. It is anticipated that political grids would be used in such a way, being compared with others. To avoid any negative interactions on the app itself, users cannot see or interact with others, other than being able to contact elected officials.
LOW-FIDELITY PROTOTYPE
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was made so that users can voice their stance on a topic from the Issues list. From the very beginning accessibility was on the forefront of my design choices with the selection of the users chosen language to reach those that may not have English as their first language of choice.
USABILITY STUDY | FINDINGS
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wire frames to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
STUDY 1
Users didn’t understand why there wasn’t a login section for the app. Questioned how it would save info.
Users wanted more defined information on officials such as names and titles.
Users wanted to know the information was in the “understand both sides” section of the issue topic section.
STUDY 2
Users felt that the product could be more pleasing in its design.
Users wanted to explore more sections of the issues section.
Users wanted to explore the political grids of their elected officials.
BEFORE & AFTER USABILITY STUDY 1
Early designs allowed for some customization, but after the usability studies, I decided to adjust how elected official information would be accessible. I added party affiliation and a contact button which would direct the user to a new page with information on how to get in touch with their elected officials. Later on in the second round of usability studies, I changed voting history to “compare political grids”. This allows users to cross examine their own patterns of issue positions with those of their elected officials and see how they align or diverge from their own beliefs.
BEFORE & AFTER USABILITY STUDY 2
With the second usability study, I was able to further refine the mockups and create a better overall user experience. Some users felt pigeonholed into making exact choices when it came to voting on specific topics. To address this I created a sliding scale so that more accurate information could be recorded rather than on a “strongly agree/ disagree” format.
KEY MOCKUPS
KEY MOCKUPS
HIGH-FIDELITY PROTOTYPE
The high-fidelity prototype showcases high levels of visual and organizational principles, while meeting users needs of identifying their government officials at every level, informing themselves on each cultural issue present in the United States, all while having a fun and engaging design that ultimately teaches them about who they are, what they support and who among their elected officials support them.
ACCESSIBILITY CONSIDERATIONS
1
Colors were chosen for those with varying degrees of color blindness, but also disrupt the polarizing effect colors.
2
The large, bold forms chosen for ease of use with a childlike appearance to convey information in a fun and genuine manner.
3
Language selection at the start of opening the app allows users to view information in the manner that is most comfortable for them.
SITEMAP
With the app designs completed, I started work on designing the responsive website. I used the Voice sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
RESPONSIVE DESIGNS
The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.
LESSONS LEARNED + NEXT STEPS
This app has huge potential for it’s fun and informative way of getting people involved in their local politics. Reactions to the information given have been absolutely positive with a growing crowd clamoring for when something like this might actually come to be. Unfortunately something like this app doesn’t exist as of yet and has been shuffled into the realm of ideas that might never come to be because it’s design is to inform and teach, not to make money.
“I have a state senator and representative? That’s a thing?”
With this project, I learned the importance of accessibility and usability studies. Accessibility allowed for a very beautiful UI with colors chosen for those with varying degrees of color blindness, but also disrupt the polarizing effect colors seem to have on political stances such as blues for democrats and red for republicans. The large, bold forms chosen for ease of use and a simplified wireframe that allows for easy digestion of information.
1
Enlist the help of data scientists and analysts to help compile information on the various government officials and their voting history so that complete and accurate “political grids” can be made.
2
Create a new section of the app, one that continues usage into election years and informs users of upcoming elections and creates lists of individuals that are incumbents and individuals that are running for elections and be able to compare their “political grids” to their own.
3
Fill out and continually update the Issues category list as they appear culturally within the United States as well as individual subtopics with their supporting and arguing points that they may continue to provide accurate information for users.