Revolutionize The Norm with Voting Reform!
・Overview・
-
Role
UI Designer
UX Writer
UX Researcher -
Tools
Pen & Paper
Figma -
Duration
June - July 2022
Product
ActionVote is an educational voting app that teaches users about voting reform by allowing them to test voting methods, find volunteer opportunities, & utilize voter resources to learn about better ways to vote.
01.
Voting Demos let users experience different systems in action.
02.
View the results right away to see how votes are counted.
03.
Straight forward messaging helps educate users, find resources, & share what they’ve learned online.
-
User Research
Interview
Create Personas
User Journey Map
Competitive Audit -
Ideate | Design
Brainstorming
Paper Wireframes
Information Architecture
Lo-fi Digital Screens -
Prototype
User Interactions
Visual Mockups
Hi-fi prototyping -
Test
Usability Study
Affinity Diagrams
User Tests -
Implement
Refining Designs
Next Steps
Documentation
Solution
We have the power to make positive change!
Do you want your vote to have a higher impact? Do you want to feel like your voice matters more? We can make it happen together with a better way to vote. Help educate others about voting reform!
ActionVote gives you a tool to test & compare different voting systems, find volunteer opportunities within your community, & share voting reform information to help revolutionize the vote.
・Understanding・
The Challenge
The current voting system & political climate are discouraging; people want to feel represented & understand how to make our elections better. Users want to make a greater positive impact, take action by volunteering, & find resources on voting policies to change the way we vote.
The Goal
Design for the greater good by enlightening communities about better elections through an educational voting reform app.
・Research・
Understanding the User
Users want their vote to matter, to stay informed on voting policies, & to volunteer for voting reform in order to change the way we vote.
Creating an educational voting app required understanding the knowledge & resources that users need. Questions I considered: What do users need from an informational voting app? Which features, interactions, or resources do people need for the best educational experience? How do we demonstrate different voting systems to users in a way that feels easy, understandable, & satisfying?
Using the primary research method, I conducted interviews, surveys & usability studies of people within my community. My predictions of what users want or need from the app include voting demos, volunteer resources, & informational articles about voting reform.
Other research methods used include a user test which measured KPI’s such as navigation/search & user error rates through rapid testing prototypes.
Interviews
To find the proper recruitment of people, I used my social network to identify people of differing ages & interests, who are active in the community, & have a basic understanding of the current voting system.
When preparing the script, I was careful to ask questions with neutral wording to allow participants to feel comfortable. I kept the questions simple, but open enough for participants to expand on their experiences with voting if they choose. Although the interview topic was primarily around voting specifically rather than politics, I made it clear to participants that all of their information & answers are anonymous. To create a light, pleasant environment, I also informed users that they did not have to answer a question if they felt uneasy. In this phase, it was important for me to be unbiased and listen carefully for any frustrations.
The interviews were conducted in person & online. I asked straight forward questions & interacted using neutral terms to allow the participants to elaborate & express any needs or pain points.
A few questions I asked included:
“What types of voting methods are you familiar with? Can you describe the voting methods you’re familiar with to the best of your ability?”
“Are you open to learning about new voting systems or options for United States elections?”
“If you were to search for resources on learning about different voting methods, where would you think to look? Are there particular websites, channels, radio stations, or news platforms that come to mind?”
Personas
After conducting interviews, I combined lifestyle similarities to generate personas and user stories. This step was key to the design process because it reflected real challenges that users may face and it allowed me to empathize with their needs in order to identify frustrations.
Pain Points
Based on the Interviews and user persona research, I chose 3 user pain points to address in my designs.
-
Learning
Voters are frustrated with current elections & feel as though their vote does not matter.
Users want to understand voting methods to learn about different options
-
Visualization
Users have difficulty visualizing alternative voting options to that of the current election system.
Users want to test & compare voting systems
-
Action
Getting involved in election reform is complex; users find it hard to contribute in a meaningful way.
Users want more volunteer opportunities to contribute towards positive political change
User Journey Map
Taylan’s user journey revealed features users might need from an educational voting app to spark engagement. These features include testing & comparing different voting methods, quickly see political policies & candidate info all in one place, share voting reform knowledge online to inform others.
・Ideation・
Problem Statement
“Taylan is an outgoing, hard working software engineer who needs quick & accessible information on voting methods & volunteer opportunities because she wants to help educate others about voting reform to elevate her community & have a greater positive impact.”
・Design・
Wireframes
Sketching out design ideas on paper allowed me to visualize the layout of the voting demos, and to plan the information architecture of the experience in the next part of my design process. The first screen options were originally designed to direct users straight to the voting demo.
Paper wireframing also enabled me to problem solve & creatively design based on the users accessibility needs & priorities from the pain points.
Low Fidelity Digital Screens
The digital screens for mobile app were designed to give users choices for navigation, while keeping the key goal in mind of educating people about voting reform by directing users to the demos first.
Screen Variations: Responsive Website
Users are interested in having access to a scalable website for desktop & tablet for better accessibility.
・Prototype・
Low Fidelity Prototype
My lo-fi prototypes demonstrate the primary user flow from the home screen, to testing the first demo for approval voting, to viewing the results, & moving forward to compare the next voting methods.
The flow was represented in the unmoderated usability study to assess the time it took users to navigate the desktop site, as well as any accessibility issues (see Maze test).
Mobile App Lo-fi Protoype
I mapped out animations & interactions with easy navigation to reflect a clear path for users to test out the voting options.
Design Mockups
Based on my usability insights, I made changes to the following aspects of my designs in Figma:
Text was added to the Footer navigation for clear accessibility & navigational guidance
Incorporating engaging imagery gives the user more context & understanding of the goal of the app
Layout changes to the ballots better fit descriptive text & create emphasis using color & effects
Assistive text & imagery help highlight important elements to create a more accessible product design overall.
Responsive Site Mockups
The website screen variations are displayed similarly across devices. Primary differences include adding more height to the hero image with space to add text & moving the demo cards from a vertical layout to a horizontal layout.
As seen in the high fidelity prototype below, the experience for Approval voting demos remain the same, using a carousel that swipes horizontally after voting to view the results. Overall, I stuck with a minimalist design & color scheme in order to draw attention to the information & make it as clear as possible.
..
・Testing・
Usability Study: Parameters
I conducted a usability study of my lo-fi prototype to determine if users encounter difficulties navigating the voting demos or understanding the results.
The unmoderated usability study I conducted was a remote, 10-15minute click-through of the lo-fi prototype observing 5 participants between 22 and 40 years of age. It included a System Usability Scale (SUS) survey, conducted anonymously, as a quick follow-up to empathize & understand the users reactions.
Affinity Diagram
I gathered notes based on participants’ thoughts, feelings, challenges, & suggestions from the user study.
By categorizing the notes into an affinity diagram, I was able to identify patterns & themes around their experiences with testing my prototype.
Next, I formulated insights based on these patterns to innovate & improve my designs.
User Test: Findings
Conducting usability studies for the mobile app exposed key user needs in order to positively experience the app flow. Findings from the study show that users had difficulty with navigation, iconography/imagery, & context within the app.
I added screens & made changes to the app based on these key research insights.
Insights
-
Navigation
Users had difficulty navigating the Ranked Choice Voting demo, therefore the RCV ballot needs more visual cues, textual hierarchy, & consistency
-
Iconography
Users were confused by what some of the icons represent, therefore the iconography design could be more intuitive
-
Context
Some users need context to help direct them through the app. An insight is to add text, visual elements, & more animation
High Fidelity Prototype
The final prototype showcases visual hierarchy & responsive UI by highlighting clickable items, use of color contrast, icons, & imagery with fluid animation.
Mobile Hi-fi Prototype
I applied elevation & contrast to buttons as well as images; I focused on the interactive qualities such as animations, timing between gestures, and iconography in order to give users the best possible visual guide.
・Implement・
What I Learned
While designing ActionVote, I learned that designing a simple experience that informs the user by telling a story through design is key to creating a better overall experience.
Impact
ActionVote contributes to the greater good by providing a usable demo to directly test voting methods that will inform the user through their app experience. The best way to understand Approval Voting, Ranked Choice Voting, and our current system of Plurality Voting is through experiencing and observing them in action.
Usability test participant – “It’s a really helpful app to visualize the different types of voting modalities.”
Peer feedback – “Great job! Keep up the good work!”
Accessibility Considerations
The assistive features of the app include providing text with the icons for easier understanding navigation & for screen reader access.
Another accessible aspect includes the text hierarchy that makes it easier to view key sections, or skim text, as well as using it with a screen reader.
Next Steps
Color: Make adjustments to the color theme; populate the screens with more pops color
UX Writing: Edit the text & contribute more information to the app based on real sources & references
User Flow: Create a secondary flow for the volunteer screen & voting resources
User Research: Conduct a third round of research; apply changes based on new research insights