BallotBud

Your vote, made simple.

Team

Kristen Huang, Kate Andonian, Anastasia Papageriou, Lynn Sabieddine, Dylan Siewert, Jessica Yang

Tools

Figma

Role

UI/UX Designer

Duration

September - December 2024

💡 EMPATHIZE + DEFINE

Challenge

Your voice matters!

Currently, the Secretary of State (SOS) sites are difficult to navigate and overwhelming with information scattered and presented in a confusing manner. My team and I want to address the design challenge related to obtaining clear, unbiased information about local, state, and federal elections and policies that impact all US constituents.

Hypothesis

To address this issue, our team aims to develop an app where constituents can create personalized accounts to consolidate their access to all their relevant legal information. This application seeks to present critical information in an organized, user-friendly format, improving overall accessibility and clarity, with the goal of increasing constituent engagement in the democratic process.

Competitive analysis

Ballotpedia (direct)

This website is designed to help people learn more about political candidates, issues, and elections, offering unbiased information across all levels of the United States.

Pros:

Includes individual profile pages where users can find information related to a specific representative or bill
Sample ballot generator that allows voters to input their address and email, which then shows the user key election dates in their area and what is on their local ballot

Cons:

Layout of the site appears cluttered with information, offering many different directions for the user
Hard to navigate since many are lost among the numerous dropdown menus and pages

Vote.org (direct)

This is an online platform that has a goal of reducing obstacles that limit people from voting in elections by including personalized information regarding voting registration, election dates, and local ballot proposals.

Pros:

Intuitive home page that lists out key election dates to effectively display the time voters have to familiarize themselves with the ballot and vote
Users can register to vote, check voter registration, and request absentee ballots

Cons:

Lack of information regarding bills, representatives, or legislation
Does not facilitate community engagement

Reddit (indirect)

This is a widely-used online platform where users engage in discussions and share information across countless topics, including politics and local elections, but also more general topics like fandoms.

Pros:

Has a wide variety of communities and discussion channels where users can post their own discussion threads, reply to others, and upvote or downvote comments to signal agreement of disagreement
Incorporates gamification elements, such as achievements and karma, which rewards users for their participation

Cons:

The website is not entirely safe and can lead to a lot of hate, with disagreements and arguments, since you can be anonymous

In conclusion, our solution must support five essential features to address the challenges identified in our competitive analysis…

Must provide clear and easy access to voting locations, ensuring users can find where they need to vote without being directed to external websites
Should have key election dates clearly listed on the homepage so users are aware of upcoming elections
Profile pages for specific bills, representatives, and legislation are crucial
The ability to register to vote and check voter status directly on the platform is essential for convenience

The interviews and audience

We conducted 15 interviews asking first-time and experienced voters about their experience during election seasons and how they prepare for them. We also interviewed Larry Kestenbaum, the County Clerk and Register of Deeds for Washtenaw County. Some insights we gathered from those interviews are…

Interviewee #1

“It’s hard not to hear biased information. It’s hard to distinguish misinformation from what's true.”

Interviewee #2

“Everything regarding the voting process is too complicated which makes me stray away from participating in political things.”

Interviewee #3

“I was stressed since I didn't feel very informed about what decisions I was going to make.”

Interviewee #4

“Voting in-person is a hassle sometimes because of the long lines and wait times.”

Interviewee #5

“It feels nice to have the ability to vote and express my voice. Voting is a privilege.”

Interviewee #6

“Local elections are not advocated as much and I don’t feel the need to seek that information.”

Overall, there were a lot of concerns and obstacles during the election process. To help understand our users’ needs, experiences, and goals, we created 2 primary personas and 1 secondary persona.

Primary and secondary personas

Overall, there were a lot of concerns and obstacles during the election process. To help understand our users’ needs, experiences, and goals, we created 2 primary personas and 1 secondary persona.

💡 IDEATE

Storyboards

To visualize and see how our users would interact with our product, we sketched 2 storyboards following Wen and Eric. This helps us understand the users’ motivations step by step to complete their goal.

User Journey Map

Potential user's journey map

User Flows

Individually, we sketched user flows to visually represent how users would navigate through our product to achieve their goal. Afterwards, we came together as a team and discussed our ideas. With this approach, we can brainstorm independently and share different perspectives.

User flow for Ballot Bud

Lo-fi designs and prototypes

In our lo-fi prototype, there are 5 tasks the user can perform.

View upcoming events, polling locations, and wait times for each location

Search candidates or bills and view their detailed information

Study a ballot on the guide page and advance through a reward system when completed

Check their profile for more voter information and view saved candidates or bills

Usability testing feedback and initial iterations

We conducted 6 usability tests on our lo-fi prototypes to gather feedback on potential users and how they would complete their goal. There are 3 common themes that we recognized.

Home Menu

Problems:

❌ Cluttered and confusing information hierarchy

❌ Map on home page was confusing because there were two different locations where users could press on

Solutions:

💡 Create a style guide to establish a text hierarchy so that important information, titles, and features are highlighted

💡 Create one map on the home page where users can press on to expand and browse for locations with a list of polling locations hovering on top

Search Tool

Problems:

❌ Search icon is a hard to decipher

❌ Confused by the “search button” at the bottom of the screen

Solutions:

💡 Add the keyboard pop-up on hi-fi design to have the “enter” button to replace the “search” button

💡 Change the search icon to a magnifying glass as users are more familiar with the meaning

Ballot Guide

Problems:

❌ Confused the homepage with the ballot guide

❌ Confused by the “search button” at the bottom of the screen

Solutions:

💡 Link our ballot guide on the homepage so users can access the guide quickly when accessing our app

💡 Change the ballot guide icon in navigation bar

💡 PROTOTYPE

Style Guide

To achieve a consistent and cohesive style of BallotBud, we created a style guide to make our design process easier. This helped us maintain uniformity in elements like colors, typography, and iconography and ensured the core visual elements stayed aligned throughout the product.

Ballot Bud style guide

First Digital Prototype

Building off of our lo-fi prototypes, we wanted to create a straightforward and user-friendly platform that offers users essential information on all things (elections, bills, candidates, ballots) in an engaging and accessible way.

Our first digital prototype is linked here for a visual walkthrough!

More usability testing feedback and more iterations!

To ensure that our product is accessible to all users, we decided to conduct more user testing. We asked participants to complete the same 5 major tasks.

Sign up and answer voting registration question
View upcoming events, polling location, and wait times of each location
Search candidates or bills and view their detailed information
Study a ballot on the guide page and advance through a reward system when completed
Check their profile for more voter information and view saved candidates or bills

After analyzing how participants interacted with our product, here is what we discovered and how we addressed the issues…

Onboarding Page

Problems:

❌ Many of the buttons on the onboarding page were inconsistent and confused users (i.e. some pages included “continue” and others didn’t to navigate to the next page)

❌ The size of the “skip” button is too small, affecting accessibility and making it difficult for users to navigate smoothly through the onboarding process

Solutions:

💡We decided to remove the political ideology question and to keep our buttons consistent throughout each page

Home/Map Page

Problems:

❌ The polling mapping icon was unclear for users

❌ The locations on the map were missing labels

❌ Some texts were small and easy to ready over

❌ Content and design of the page was confusing and not consistent compared to other pages

Solutions:

💡 Include more personalization on the homepage by allowing users to change the background color of the interface

💡 Include labels on the navigation bar to help users understand what the purpose of each icon is

💡 Increase the sizes of the text so users can quickly identify and read polling wait times

Search Page

Problems:

❌ ”News” content is overwhelming and confusing as the search button doesn’t correlate with it

❌ Hierarchy of the content and headers could be further enhanced to showcase relevancy

Solutions:

💡 Replace “news” content with recommended or past searches

Candidates/Bills Page

Problems:

❌ Similar buttons leading to confusion: “following” and “save”

Solutions:

💡 Be more specific with what each button represents. Users can follow candidates but can only save bills

Guide Page

Problems:

❌ Confusion as to what actions users needed to perform and what their next steps were

Solutions:

💡 Add descriptions regarding what part of the ballot they are on in the guide

More usability testing feedback and more iterations!

To ensure that our product is accessible to all users, we decided to conduct more user testing. We asked participants to complete the same 5 major tasks.

Sign up and answer voting registration question
View upcoming events, polling location, and wait times of each location
Search candidates or bills and view their detailed information
Study a ballot on the guide page and advance through a reward system when completed
Check their profile for more voter information and view saved candidates or bills

After analyzing how participants interacted with our product, here is what we discovered and how we addressed the issues…

Onboarding Page

Problems:

❌ Many of the buttons on the onboarding page were inconsistent and confused users (i.e. some pages included “continue” and others didn’t to navigate to the next page)

❌ The size of the “skip” button is too small, affecting accessibility and making it difficult for users to navigate smoothly through the onboarding process

Solutions:

💡We decided to remove the political ideology question and to keep our buttons consistent throughout each page

Home/Map Page

Problems:

❌ The polling mapping icon was unclear for users

❌ The locations on the map were missing labels

❌ Some texts were small and easy to ready over

❌ Content and design of the page was confusing and not consistent compared to other pages

Solutions:

💡 Include more personalization on the homepage by allowing users to change the background color of the interface

💡 Include labels on the navigation bar to help users understand what the purpose of each icon is

💡 Increase the sizes of the text so users can quickly identify and read polling wait times

Search Page

Problems:

❌ ”News” content is overwhelming and confusing as the search button doesn’t correlate with it

❌ Hierarchy of the content and headers could be further enhanced to showcase relevancy

Solutions:

💡 Replace “news” content with recommended or past searches

Candidates/Bills Page

Problems:

❌ Similar buttons leading to confusion: “following” and “save”

Solutions:

💡 Be more specific with what each button represents. Users can follow candidates but can only save bills

Guide Page

Problems:

❌ Confusion as to what actions users needed to perform and what their next steps were

Solutions:

💡 Add descriptions regarding what part of the ballot they are on in the guide

After many rounds of ideation, iteration, and more testing, we present BallotBud!

First, an overview of some basic functionalities our app supports:

An interactive map that shows polling locations and wait times
A screen showing current and upcoming election dates and deadlines
A feed providing relevant bills and representatives in the user’s local area
An affiliated section of each profile page to show who/which politicians are associated with each bill
A link redirecting users online to register to vote
Candidate profiles (including their relevant bills and policies) and the ability to follow and save these pages
Gamification aspect - a guide through the ballo that explains each section on the ballot, each round allows users to collect redeemable points to customize their Ballot Buddy
A walkthrough guide of the upcoming ballot proposals and candidates relevant to the user based on their location

Onboarding

The onboarding process introduces users to the app, allowing them to create or log into an account, personalize their experience with a username, and grant location permissions for tailored voting information. It also includes a voter registration inquiry, offering unregistered users an opportunity to register.

Home

The home section highlights upcoming voting dates and representatives across county, state, and national levels, with a dedicated page offering details on current officeholders. It also features a voting locations page listing local polling sites and a specific location page showing wait times and operating hours.

Search Process

The search functionality includes a main page with keyword suggestions and search history, alongside a results page that allows filtering by candidates and bills. Users can access detailed proposal explanations and candidate profiles highlighting their policies and related bills.

Guide Flow

This guide feature serves as the central hub for a step-by-step ballot walkthrough, starting with an introduction and concluding each level with a summary. Users earn points for completing levels, which can be used to customize their BallotBuddy, and can revisit previous levels or pick up where they left off.

Account Process

This account section serves as a central hub for managing user profiles, saved information, and settings such as language and privacy preferences. It also allows users to customize their Ballot Buddy with earned points, view followed candidates or groups, and access saved candidates, bills, and polling locations.

Want to browse more of BallotBud?

View the Figma file and feel free to look around! 🗳️

💡 REFLECTION

Impact

BallotBud fills the existing gap of having a personalizable mobile app that focuses on not only federal elections but also local ones. This app can significantly increase voter engagement. Users will feel more connected and familiar with the electoral process when they receive content that is relevant and meaningful to them. Furthermore, since all the electoral information is consolidated into a single app, users can conveniently access election news and feel well-prepared before casting their votes, reducing confusion or stress on Election Day.

With our “Ballot Buddy” points system, this gamifies the electoral process, making it more engaging and fun for its users. By rewarding actions like reviewing ballot measures or learning about candidates, the app encourages sustained participation and builds a sense of accomplishment. Over time, this interactive and rewarding approach will promote a habit of civic engagement, fostering a more informed and active electorate.

By combining accessibility, personalization, and gamification, our app has the potential to transform how people interact with elections, bridging the gap between voters and the democratic process while driving higher levels of participation and trust in the system.

View more of my work!

Contact

Resume