Project Overview
Goal: Create a digital platform as an alternative option for voters at the polling station.
Tools Used: Miro, Figma, Otter.AI, whiteboard
Duration: 1 month
Team: Nancy Yang, Fable Scott, Soph Paris, Sofia Vieira
My Role: UX Design & Research
Skills Used:
-
User Interview Design & Moderation: Crafting and conducting structured interviews to gather qualitative insights.
-
Inclusive Design Principles: Designing products that cater to a diverse range of users, ensuring broad usability.
-
Accessibility Standards Compliance: Implementing designs that meet accessibility guidelines (ex, WCAG) to support users with disabilities.​
-
User Experience (UX) Design: Creating user-centered designs that enhance user satisfaction and interaction.
-
Visual Design & Typography: Applying visual hierarchy and typographic principles to improve readability and user engagement.
User Interview Script
We want to understand users' experience with voting and their preferences in a potential voting application.
User Persona Matrix
We interviewed 5 people from different backgrounds and demographics who are eligible to vote in the US. We analyzed their responses using 2 persona matrices.
User Personas
After compiling and analyzing to find the similarities and differences among all interviewees, and came up with 2 user personas.
Interview Analysis
We analyzed the needs expressed by our respondents to inform our feature and design development.
Pain Points of Interviewees:
Accessibility
-
Long waits at physically inaccessible locations
-
Challenges for the elderly, disabled, and working class to vote in person
-
Lack of convenient hours for in-person voting
Information Gaps
-
Some participants struggled to identify candidates and understand ballot content
-
Lack of clear and concise election information
-
Lack of concise and digestible election information
-
Local elections often receive little media coverage, leaving voters uninformed
Security & Trust Concerns
-
Strong concerns about privacy and voting integrity
-
Reluctance to use dedicated apps for sensitive tasks
-
Misinformation about candidates in political apps
App Usability
-
Both young and older users are open to using technology, but need to become comfortable with digital tools, and emphasize the need for a simple and reliable interface
-
Repeated questions, glitches, or overly complex designs were noted as frustrating and confusing
Design Implications:
Simplicity & Clarity​
-
Use clean, intuitive layouts with uncluttered interfaces
-
Provide short biographies and endorsing organizations for each candidate (opt-in for deeper information)
-
Design should closely follow the design of a physical ballot to reduce the learning curve.
Accessibility Features
-
Include human-readable fonts and colors
-
Allow saved preferences
-
Consider on-screen keyboards
-
A settings feature that allows one to adjust the language, brightness, and text size throughout the voting process
-
The first page should be languages for voters to choose, then flow into the accessibility settings page.
Transparency & Trust
-
Clearly communicate how user data is protected and stored with the voter throughout the voting process
-
Show application credibility (partnerships with trusted orgs, for example)
Understanding the Voting Process
As a non-U.S. citizen, I had to make an extra effort to understand the voting process in order to understand my users' experience and make more informed decisions when designing the application.
Whiteboard
We initially used a whiteboard to write down our brainstorming ideas and then transferred them into Miro.
User Task Flow
Wireframing
Miro
Next, we used Miro to finalize the user task flow and take notes on design features such as accessibility, security, and ease of use.
Task Flow Overview
Task Flow Draft
Task Flow
Design Accomodations
Based on our analysis of the interviews, a thorough understanding of the U.S. in-person voting experience, and design principles for inclusivity, we compiled a list of design accommodations to enhance the voting experience.
General Accessibility
Buttons at every page​​
-
Accessibility Button​
-
Back & Forward Button
Language & Literacy
Allow voters to select a language in the beginning and switch languages at any point in the process.​
Visual
-
Adjustable text sizes, high contrast, and brigthness.
-
Use of clear, simple icons and consistent layouts.
-
Audio instructions functionality for all content.
Hearing
Visual equivalents for all audio cues (captions for instructions, alert symbols for system sounds).
Motor & Dexterity
-
Large tap buttons & simplified layouts in UX.
-
Physical keyboard compatibility.
-
Voice-command navigation for hands-free control.
Cognitive
-
“Guided Voting Mode” with step-by-step instructions and explanations.
-
Minimize text overload with one task per screen (option for a progress bar).
Error Prevention
-
Easy navigation to go back and make changes at any point.
-
Real-time warnings if a required field is skipped or a mistake has occured.
-
Pop-Up confirmations to avoid accidental votes with warning "Cancel/Confirm" at the end of every section.
-
Summarized review screen before submission to double-check everything (“Are you sure you want to submit?”).
Security Reassurance
-
Security inputs about vote privacy and protection.
-
Use lock or shield icons to symbolize a secure experience.
Candidate Positions
While casting the ballot, the voter should be able to see the candidate's:
-
Name
-
Position
-
What organizations endorse them
Low-fidelity Prototype/Wireframe
We hand-drew the low-fidelity wireframes to set the stage for mid-fidelity and high-fidelity designs
Mid-fidelity Prototype
We prototyped the mid-fidelity frames in Miro
High-fidelity Prototype
We prototyped the high-fidelity frames in Figma by assigning pages to each team member.
Colors and Typography
We thoroughly discussed color choices and typography to make our design and application as accessible as possible for every voter.
Blue and Red are the two colors that represent America. Blue largely represents the Democratic Party, and Red represents the Republican Party. We want our design to reflect the election theme while still being accessible. White is a universal neutral color to balance the design.
We chose Public Sans because the U.S. government uses it in many of its designs and public notices. Choosing this font can help voters reduce the learning curve by looking at something familiar.
After Thoughts
Knowing the limitations of our design, focusing only on the product, I thought of other things related to the voting process and experience.
Outside of Figma:
-
A physical keyboard to accommodate those who are unable to type with the touchscreen
-
Machines have adaptors to plug in the screen readers
-
The machine can print out the physical confirmation for the voters
-
Voters will confirm and slide it into a collection box
-
Minimize the risks of hackers on the digital system
-
Our design doesn’t directly tackle some of the pain points of our interviewees:
-
Long wait line
-
Possible persuasions to vote for certain candidates
-
Assaults from others while waiting in line
How does this digital voting design contribute to changes in the U.S. voting system?
