Votr
A responsive web app dedicated to boosting voter confidence at the polls
I worked alongside a team of User Experience Designers and Software Engineers to build Votr for General Assembly’s 2020 Social Impact Hackathon.
The 2020 Election was one of the most important in modern U.S. history. My team was offered a unique opportunity to engage voters in this historic election.
We were tasked with designing and developing a responsive web app that informed voters of their current elected officials, their responsibilities, and the candidates they’ll see on the ballot come election day.
A bird’s-eye view 👀
Duration
Three-day design sprint
Tools
Figma
Adobe Illustrator & Photoshop
Zoom Video Conferencing
Google Docs, Sheets & Slides
Typeform
Team
Jay Kendrick (UX)
Alexi Wright (UX)
Ricky Barbosa (UX)
Jinah Choi (UX)
Tamara Flosse (SE)
Will Tidwell (SE)
Alisha Lawani (SE)
Methods
Competitive + Comparative Analyses
User Surveys (Quantitative & Qualitative)
Mind Mapping & Feature Prioritization
Problem Statement, and “How Might We”
Design Studio (Iterative Sketching Sessions)
Wireframing, Prototyping
*The entirety of this project (including all of my team’s research, testing and development) took place remotely.
Ever have that moment when you’re faced with a ballot and only the headliners look familiar?
Smaller offices, judicial positions, and other initiatives might feel completely alien unless you’ve done some prior independent research.
You are not alone.
We kick-started our research with a survey to see just how confident and informed American voters felt, and the results were telling. On a scale from 1-5, when asked how confident they felt at the polls, the average answer was 3.7. When American voters were asked about their understanding of the duties of the offices they elect for, the average dropped to 2.9, with over 18% feeling highly uninformed.
Here’s the problem and how we intended to solve it.
Voters need a way to learn about candidates and their responsibilities before elections because they often don’t feel confident or informed at the ballot box.
We identified a set of features and priorities that could answer this problem:
A gamified quiz
Listed current officials
A visual diagram to show quiz results
Opportunities to share resources/quiz results with friends
Non-partisan atmosphere
No “pledge” or data collection
Surveying the competitive and comparative landscape.
To lay the groundwork, we took a close look at websites that were already engaging voters. We found many non-profits with some robust attempts, like Ballot Ready, Ballotpedia, iSideWith, Rock the Vote, and even a site called iCivics that builds flash games for younger audiences. Most were really simple, providing quick voter registration and polling locations, and some were maybe too much, providing users with an overwhelming amount of information that was difficult to digest.
We also drummed up a few examples in other industries that solve different problems with a similar approach–ones like Duolingo and Codecademy that gamify the education experience and consumer and personality websites like Care Of kept the quiz experience light and engaging to drive consumer confidence.
Votr has entered the chat.
Hackathons are unique because they require you to discover and define a problem, ideate, and fully realize a solution in a short period of time. And this doesn’t include the added feat of passing the work on to engineers to develop it.
We kickstarted our ideation phase with a design studio (rapid-fire sketching sessions) to build the foundation of our cleverly named web application, Votr. From the sketches, we moved to greyscale wireframes then mid-fidelity prototyping, and onward. With each iteration, features were defined and concentrated, while some got the boot. And our engineers were in on the entire process and gave invaluable insight into logistics as we designed.
Writing the visual language for Votr and diving deeper into interface design.
We designed an interface that would speak to a majority of Americans Voters. Our approach needed to be clean, unique, and foster a non-partisan atmosphere. We accomplished this by keeping true to the national color scheme of red, white, and blue but with a modern take. We kept buttons and copy simple and opted to incorporate whimsicalness via illustrations and other design elements.
Finalizing the results.
Adopting a scrum-based agile methodology increased our workflow and allowed us to tackle the project in mini-sprints. We’d design, and pass it off to the engineers so they could develop. And we worked like this until we had our MVP (minimum viable product).
Our final design was a unique amalgamation of UX, quick turnarounds, and engineering limitations. And many of our ideas were “back-burner-ed” because of time constraints. It was also my first time designing with an API, in this instance, our Software Engineers stumbled upon Google’s vast Civic Information database which gave us images for every current elected official and content for our quiz.
Check out a selection from our final design below.
