(It's nothing fancy, but shows that I know how to read and write code.)
Figma
Google Suite
Adobe CC
Trello
3 weeks
User Research
Prototyping
UI Design
Front-End Developer
Vote Betch is a theoretical product designed by our group of 5 (3 members who identified as queer and 2 who were vocal allies) to provide a concise guide to your ballot. We included casual language, a diverse and inclusive design, which centered on LGBTQ values, and the use of the ever-popular dark-mode to create a product to help users understand their personal ballots. Our group had a lot of fun with this design!
It's 2020, and voting in the federal and state elections has never been more important for the future of our country. Users receive their ballots in the mail and use them to make their decisions. However, users don't feel confident in their understanding of their ballots due to misleading language, legal jargon, and mistrust in media.
We created a gamified ballot with casual language and in-depth information to assist our users in their understanding of the issues through an interactive experience.
Here's a snippet of our prototype. I'll show you more later.
We started our research with a simple survey. We needed to find out who our audience was, how they made their voting decisions, and what kind, if any, research they did ahead of time.
"I have voted in every election. Because it's our right and it's possibly the only thing we can do for change, and I mean, why not is the real question?"
"There's enough information on how to register to vote and how to get a ballot, but I don't think there's enough information about the smaller things underneath."
"As a Queer Woman I'm always on edge about my community's rights, as well as women's rights."
I created the journey of the user of our site. Confidence is key!
We knew that we wanted to give our voters as much information regarding the issues as we could so we started looking at other sites that helped us to understand our votes.
One of the biggest pain points of our users was the confusing legal jargon in the propositions. We used the League of Pissed off Voters for our UX copy inspiration.
Prop 22 is a perfect example of the purposefully misleading language in the ballots. The SF League broke down the issues, the previous history, how it affects the voters, and what exactly its passing would mean to the people it affects.
I almost voted yes on this prop before doing my own research.
It was hard doing our own research and trusting the media was one of our biggest pain points, so we looked at how both sides presented their information. The League of Pissed off Voters was heavily democratic, so we wanted to make sure that we were sticking to facts and quotes directly from each candidate.
Voter's Edge is a pretty heavily Republican site. However, we liked the way that they broke down where the contributions for each candidate was coming from. For example, Trump's money was mainly coming from military employees and the GOP donation site, Winred.
BallotReady is a comprehensive site, backed by USA.gov and sticks to facts and quotes, which we later used in our designs. By providing quotes on issues that candidates gave a definite responses to, we felt sure of each candidate's opinions on each matter that mattered to us, the voters.
CalMatters is a California-specific site, which breaks down the measures and candidates. We really liked the comprehensive way it broke down the measures because it uses casual language to break down the basics of each measure. Using this model voters know exactly what the measure does, who it affects, what politicians back it, where the money comes from, and a short video to help voters connect the measure to real world consequences.
I come from a gaming background and others in our group suggested designing a gamified ballot, so I was all over that idea. In our first iterations, we created the pages for the main menu and ballot pages.
We created a point system, where a user would earn points from researching their ballot, which they could later spend on rewards such as image filters that could be used on social media or even awards similar to Reddit's award system.
Based on feedback, users thought the design was a bit childish. Between the pastel on white, soft corners, and star shaped point system, we understood those sentiments and made changes in our high fidelity prototypes.
Because we wanted to create a gamified version of a product that is not normally interactive, we decided to create an onboarding experience that would take our users through our designs. Here's an example of our candidates page onboarding.
After testing, we received feedback that it was too much hand-holding. While users thought the language was funny, the excess steps were unnecessary.
Our cohort wanted to have some fun with this project. The majority of us were LGBTQ, while the remaining were strong allies, so we were all about making the theme gay. This project wasn't going to be published, so we really just wanted to have fun, explore gamification, dark mode, and interactive design for this project. I think our moodboard reflects that spirit of fun ...
Based on our feedback, users thought our designs were childish. While we were designing for fun, we overlooked the fact that all of our users were adults. While it would be fun to make this a learning tool for kids, that wasn't our intention, so we toned down the stars and soft edges for our hi-fi mockup.
We designed for both light and dark mode when brainstorming, ultimately deciding on dark mode for our final iteration. We wanted to try our hand with dark mode because of its popularity today and because it simply fit better with our color palette.
As our theme for the project was LGBTQ we decided to use patriotic imagery from popular drag queens on our front page.
Since our users thought our original onboarding was too much, we simplified the onboarding process by creating a 3 step modal that told users what to do. Easy peasy!
Our remaining pages followed our lo-fi prototypes, but we updated our menu and point system to be a little less childish. We ended up simplifying our color palette even further than our original moodboard and used purple and yellow as our main colors.
