Gabrielle Gibson
UX designer



Voting for political candidates is such an important role in society. The importance stands from the presidential race every four years to the local elections that occur multiple times a year. However, it seems like voting, in some communities, is only prominent when the presidential election is afoot and many individuals do not know that change and improvements in their community stem from local elections. 

With that said, there are a vast majority that knows that local elections are the sole source of keeping a community happy with its politician's policies but the bounds of research in understanding the policies and issues they support is overwhelming. With this cases study, I have dedicated my time researching and designing, Votcal, a website that allows people to find the right candidate for them.

My Role

Exclusive UX Researcher, UX Designer, UI Designer

Project Duration

12 weeks


Miro, Figma, InVision, Google Collaboration Tools



  • Research

  • Interviews

  • Synthesis Methods


  • User Stories

  • Site Mapping

  • User Flows

  • Sketching

  • Wireframing

  • Mood Board & Style Guide


  • Wireframing

  • Prototyping

  • User Testing

  • Redesign

Project Summary

Finding The Right Candidate For You is in relation to voting during political campaigns. November 2020, was the year of elections for a new president as the previous president served his first term of four years. The standing president had the opportunity to prove that he should be elected for a second term while the other candidate had to prove they should be elected instead. Political party followers have shown years of servitude despite the lack of moral obligation. As a voter, it should be imperative to understand what a candidate’s views, morals, and beliefs are before making a decision on their candidacy. Finding what these candidates are actually trying to improve and focus on during their term is hard to find and that is what Votcal is here to achieve.

The Challenge

Politics are a crucial branch of American infrastructure and it may be confusing for many people. The individuals that run for office have an obligation to help us pass laws we want, have a safe community, and make life a positive benefit for all. Currently, it is difficult and overwhelming to find information about political candidates before elections.

The problem is not only affecting young adults but it is also affecting older generations as they may not have time to sift through the many medias to find the source of information they are searching for.

The Solution

The various sources of information to find concrete data for a political candidate’s policy improvements can come warranted with incomplete or simply garbage data because they are someone's opinion. Votcal understands that when voting for a candidate, that choice should be made with complete certainty. The website’s goal is to uncomplicate voting choices and improve political knowledge with understandable language.

The method for the solution used was human-centered design (HCD) where the 3 i’s, inspiration, ideation, and implementation, were utilized to process and gather the best solution.


Secondary Research

The research and proof of the issue was something I thought would have been hard to find but it was relatively easy. I searched what I thought was an issue because finding a political candidate to vote for is a pain point of mine as well.

Some of the key insights from my secondary research included:

  • Sample ballots show you the election dates and laws but they won’t provide information about the candidates like voter guides do. 

  • When voters cannot rely on party labels, they give greater weight to candidate experience also known as media or online presence. 

  • Voter choice is one of the most important problems in political science.

  • Attractive candidates averaged more votes than unattractive ones

  • Television Leads Less Informed Citizens to Vote for Candidates who are more attractive 

  • Older adults accessed less information but took longer to examine the information and make choices. 

  • Older adults were more likely to organize their information searches by candidates and to engage in satisficing.

  • Young adults were more likely to organize their information searches by issues and to eliminate candidates based on issue stances. 

Primary Research

Primary research was used in three different ways which included screener surveys, interviews, and synthesis methods such as affinity maps, empathy maps, personas and how might we statements. 

The primary research allowed me to get closer to those who were actually having the issues and allowed me to take notes of the true issues. 


For the screener survey, the goal was for me to understand how people are deciding who to vote for, and ensuring those decisions are purely on the impact the candidate plans to make. Because I would like for this website to launch to a small audience, I decided to have restricting criteria that I knew would benefit Votcal. The criteria included:

  • Ages 18 to 60

  • Expressed interest in learning more about politics

  • Lives in the city of Philadelphia, PA

Image alt tag

Image alt tag


After having the survey answered by about 40 people, I conducted interviews with the individuals who were willing to answer more questions in addition to aligned with my survey requirements. I did not want to have repeated responses to questions so I chose individuals who have different backgrounds and are at different stages in life.

Key Insights

  • They wanted to learn more in one location

  • They were frustrated and clueless at times

  • They did not know anything about the candidate as a person, everything was a show

  • “Candidates talk a big game” - implying they are all bark, no bite aka they take no action

Synthesis Methods

Affinity Mapping

To help better understand all that was discussed with the interviews, I created an affinity map. The affinity map allowed me to group trending categories no matter the interviewee.


Empathy Mapping

The next technique used was empathy mapping which grouped user actions with what they think, say, feel and do. These descriptions were my opinions and empathy towards these user's feelings and how a solution could be formulated. The three empathies created were the Visionary, the Disrespected and the First Time Voter. It also prepared the next step in actually visualizing a real-life end-user of the product.



The three personas created had empathies mapped to them but they were visualized as an actual person who has a duty to exist in the world but also would love to use the solution provided.

Image alt tag

Image alt tag

HMW Statements

The last essential part of the primary research was to determine How Might We (HMW) statements to clearly state the top issues users want to be solved. These included:

  • How might we omit the feeling of being overwhelmed when trying to find information about political candidates? 

  • How might we make people feel like they have chosen the right candidate to vote for?

  • How might we help people be better informed about politics?

  • How might we get answers to the many political questions that voters have?

  • How might we share the importance of presidential elections without forgetting the significance of non-presidential elections?


User Stories

The first step of the ideation process was to create user stories that exemplify functional needs in the form of acting as a user to do a certain task to achieve an outcome. User stories also have a rating of high, medium, and lows to help the product team understand what the most valuable product is also known as MVP. The MVP helps launch the base of the product without all the wanted bells and whistles so it can be implemented into production as soon as possible.  

Below are some of the stories that I felt should be included in the MVP:

  • As a voter, I want to see clear and understandable information about a candidate so that I can make the correct candidate choice.

  • As a voter, I want to see quick information about a candidate so that I can easily read it on a device or while on the go.

  • As a voter, I want to see political information so that I am interested and not bored.

  • As a voter, I want to be able to search political terms so that I can quickly get the definition of a word.

  • As a non-voter, I want to see why voting is important so that I can vote in the future.

  • As a voter, I want to see relevant community issues so that I can vote for the candidate that aligns with my views


Site Mapping 

In the next step, I created site mapping which allowed me to hierarchically show the initial structure of Votcal’s website. Each page or subpage gave me a visual extension of what functional requirements were stated in the user stories.


User Flows

My user flows were created with three main red routes or critical design paths to ensure Votcal’s main purpose is highlighted. The routes were finding details about candidates, finding the political dictionary, and finding voting dates.



Sketching got me really excited as it got my brain juiced up to be creative and think of the best ways for placement of containers, content, and more. While designing the sketches it allowed me to realize the mobile screens really have limited space on what is shown above the fold. This is when I started to think that I wanted to go in the direction of a website with mobile responsiveness versus a mobile application only.

Low Fidelity Wireframes

After completing my sketches I then started my low fidelity wireframes in Figma. I tried to use as little color as possible but I knew for a fact that I wanted to keep the candidate containers red and blue for party-aligned affiliation. This task really gave me an idea on how I wanted rounded corners instead of right angles and other consistent design elements. 


Mood Board & Style Guide

Another fun task for this project was creating the mood board and then finally the style guide. I want Votcal to be a fun and visual experience for all ages so the colors and iconography alone are flamboyant and engaging. And for the color palette, I chose colors that give a sense of unity regardless of political affiliation which is why I added red as the tertiary. 


High Fidelity Wireframes

As you can see there has been a change of pace from the initial sketches to the high fidelities shown here. As mentioned in the sketching phase I was on the fence about having a mobile-only app versus a mobile responsive website and in the end, I chose the website. I wanted the experience for the user to be a quick reference if needed whenever and wherever and I did not want them to feel obligated to add yet another application to their already mobile app cluttered device.

Usability Test

The first iteration of Votcal was prototyped and was user tested on desktops in a web browser using Invision. The usability test was completed virtually and conducted by me using google hangouts.

I interviewed five individuals from word of mouth who have the following characteristics: generally cares about improvements and changes in their community, had concerns about who to vote for in local elections in Philadelphia in 2021, are moderately tech-savvy, and can manage a website on mobile and desktop.  Some of the users were also individuals that completed the survey and they were eager to learn about the progress I made and I was ecstatic to see how users responded.


  • Does the navigation convey easability?

  • Are issues of a candidate clearly visible?

  • Is one able to find when a voting date for a certain year is or was?

  • Can someone find a political term without difficulty?


  • You are an individual who wants to know more about a person running for office. Determine the best way to know more about them.

  • You are of voting age who hasn’t voted yet, start at the home page and determine how you can do so.

  • You are intelligent but are curious about the word appease. Start at the home page to grasp what it is.

  • You volunteered for the polls but cannot remember when it was, start at the home page to determine your time off.

User Testing

At the end of the test every single person was truly honored to have tested the prototype, gave honest constructive criticism, and even gave ideas on what the next phases could be. I was not discouraged by all of the feedback given, I was actually relieved. It felt great to have fresh eyes, see what mistakes I made and also praise the work. I ranked all of the issues from critical, major, to minor, and low to see what was essential and remediate and held the highest importance for an immediate fix. With the recommended fixes, I also provided more than one solution that could be implemented during MVP+ or MVPP++ as the timeline for the project was hitting the deadline.

Critical - State Button

  • Users tried to click it, this was the first thing users did

  • Some were confused on if it was supposed to sort or not

  • Some were confused on if local and state were the same thing

Critical - Order of Candidate Cards

  • Some wanted to order the name alphabetically

  • Some wanted ordering to the based on party

Critical - Be Elite

  • Be Elite was generally confusing

  • Users didn't know what it was for

Minor - About Statement

  • Everyone had an idea of what the site was about

  • Certainty from everyone, users and not should know why Votcal exists


And here is my final design after receiving feedback from users.


Designing Votcal was not only the first app that I designed using the full human-centered design process but the most promising for my community. I see how much of an impact this brand could be and force positive change with how policies and candidates share information on their causes. It is truly exciting to see an idea form into a product that is engaging yet purpose-driven.