Ralli: A Mobile Voter Guide
UI/UX, Brand Identity | Spring 2020
As a young voter, witnessing the frustrations and grievances of my peers as they stare blankly at their mail-in ballots, I set out to create a fresh, modern voter guide. A new companion for voters to discover, compare, support and share their chosen candidates.
This project began in the Spring of 2020 and is ongoing
My Role
Full-stack UI/UX, Branding & Identity
Tools
Miro, Figma, Illustrator, Overflow, TryMyUI
Introduction & Methodologies
“How might we prepare young voters for the ballot box and promote candidate discovery and comparison in an efficient, fair and comprehensive way?”
Current voting guide tools fail to address needs for younger voters, and create an uninspiring experience. Young voters are feel that their investment to select the right candidates is too costly in terms of time and effort—let’s change that.
Research
Secondary
Competitor research
User Surveys
User Interviews
Ideation
Sketching
User Story Mapping
Deliverables
Site Map
User Flows
Style Guide
Wireframes
Prototypes
Testing
Guerilla Testing
Moderated Tests
Unmoderated Tests
Defining Goals
Connect voters with candidates in a personable and direct way; no fuss, no click-bait.
Encourage the discretion of the voter by promoting discovery of direct information.
Create a non-partisan platform that is inclusive and discriminatory to voters or candidates.
Make it flexible, efficient and easy to use, even in the context of a physical polling station.
Mobile Features
With a healthy understanding of who we are designing for, and their needs, it’s time for ideation.
Filtered Ballot
Information overload is the nemesis of an already challenging topic. For that reason, Ralli filters by address and political party to launch the user’s Mock Ballot.
Why it Matters
Voter’s report that voter guides are dense, complicated, and often have 3 to 4 times more information needed to cast their ballot. This approach to publishing the official voter guide leads to blank ballots.
Profile Snapshot Carousel
Swiping through profiles is now second nature. Using this same format, voters can easily scroll through a deck of candidates to get the full picture of who’s running.
Why it Matters
In the initial design, profile snapshots were full-screen, featuring one candidate at a time. In testing, users wanted to see the full deck of candidates, then begin narrowing down the field. This design favors the perspective of the voter.
Policy Platform
Voter’s can easily learn about the issues that they care about like Education, Reproductive Rights, Firearms or Health Care.
Why it Matters
Candidates are more than their party, and voters know it. Fellow partisan candidates will vary on policies, and discovering where they differ is vital to making a fully informed choice.
Candidate Profiles
Getting to know the candidate starts with a blog-like feature direct from the campaign, offering an easy read about the candidate’s goals and aspirations.
Why it Matters
Voter’s are looking for reliable information that will promote direct campaign information, not filtered by the lens of a media outlet. The best source to date is a candidate’s website.
Ralli is designed to feature campaigns in a simple, comprehensive template that favors the perspective of the voter over the candidate.
Mock Ballot
The mock ballot organizes the users candidates. The ballot is ordered to reflect the user's official paper ballot to easily translate the app to real-life applications.
Why it Matters
Fellow voters often rely on their close friends and family’s choices to vote, ballots can be shared in full, or partially, by office. The ballot is also designed to reference as a voter is bubbling in a paper ballot.
DESIGN PROCESS | BRANDINGLogo & Style Guide
One of the main goals for branding was to hit a proper balance between trustworthy and professional, while still looking fresh, modern and friendly. It was critical that the brand appeal to a younger user, and the colors and elements could streamline across a platform without appearing symbolically partisan or biased.
Icons via Feather Icons | Graphics via @Pixel-Perfect on FlatIcons
DESIGN PROCESS | RESEARCHSynthesizing Research
I set out to conduct secondary research followed by user research to create personas and map out the structure of the interface before creating solutions.
Mapping Personas
Interview participants fell into two groups, and were mapped accordingly:
Group 1 is emotionally taxed by political involvement. Group 2 prefers their own research and discretion.
Empathy Mapping for Group 1, “The Social Learner”
Empathy Mapping for Group 2, “The Observer”
DESIGN PROCESS | INFORMATION ARCHITECTURE
Navigation & Flows
Before creating screens, I mapped the navigation; considering how the two personas would move through their own routes.
The Social Learner User Flow
The Observer User Flow
Personas
Meet Amber
THE SOCIAL LEARNER
“I want to learn from candidates directly, and get to know them, so I can cast an informed vote to benefit my community.”
Emotionally Influenced | People Person | Impressionable
Amber values her peers and often finds herself asking her friends about their views on current events. She forms her opinions through social interaction; with people she considers more in-touch with the political landscape, or groups, businesses and influencers she admires.
Meet Emily
THE OBSERVER
“I want to seek objective information and arguments from candidates in order to refine my knowledge and cast an informed vote.”
Pragmatic | Politically Opinionated | Investigative
Emily is an independent thinker, who finds herself sifting through information to form her own opinions. She enjoys the theatre of politics and is often skeptical about the information she receive. She trusts her instincts, and prefers to observe a candidate directly before making a choice.
DESIGN PROCESS | REFINE
Wireframes & Wireflows
DESIGN PROCESS | VALIDATE
Mock-Ups Sent to Testing
Insights from Testing & Hi-Fi Prototype
Sort from voter perspective
Sort Races by Decided and Undecided, aligning the sorting method with the perspective of the voter, not the jurisdiction of the election.
Scan all candidates, then dial-in
Downsize the candidate summary cards and create a carousel to review the deck of candidates first.
Deconstruct dense phraseology
Implement an informational icon system discussing concepts like Open Contest and Incumbent.
EXPERIMENTATIONPolitical Ideology Feature
Early on in ideation, I considered a quiz feature that could measure a user’s position on a social and economic scale, and plot opinions on key political issues. Post-testing, I decided to implement the Political Ideology Quiz to help users get started.
“I expected an app like this to be able to match me to candidates instead of looking through profiles.”
- Usability Test Participant, September 2020
“I really love how everything is in one place, but I wouldn’t know where to start when choosing from so many people.”
- Usability Test Participant, September 2020
Ralli displays a “Political ID Match” on each candidate, measured by the compatibility of the candidate and the user’s answers.
In practice, each candidate would need to be pre-screened by the same metrics as users to enable accurate results.
What’s Next
After 4 months of continuous work to create Ralli, I plan to continue developing the project, testing new features and improving the prototype.
There is so much work to be done to help voters vote. Here are a few features I hope to develop in a future release.
Candidate Comparison
Just like a shopping cart comparison option, I have started a concept to do the same with candidate policy platforms to take a side-by-side look at the issues.
Adding Propositions
Integrate the users entire ballot by creating a platform to decode the dense language of Propositions and Measures.
More Projects
WineSavour Virtual Shop
A full-stack UX/UI study built alongside wine lovers, for avid wine shoppers.
Post Up Design Sprint
A 5-day sprint to help remote workers find a public space to work.