Voting Informed: A Case Study
The Challenge
For the first time in this past election, Generation X and millennials outvoted baby boomers 69.6 million to 67.9 million. This gap is expected to continue widening in the upcoming elections. Our challenge was to figure out how to encourage more of the younger generation to vote.
I worked with UX Designers Katie Stakland and Brayden Iwasaki for research, creating the persona, site flow and early wireframing. Afterwards, we split apart and were responsible for creating our own hi-fidelity visuals, user testing and prototyping.
Challenging Ideas
To gain a better understanding of how voting works, we listed out the different pains and gains from registering to vote, all the way to actually showing up at the ballot and voting. We also wrote out assumptions about what we thought that voters would want and then wrote counter assumptions to challenge our ideas. This allowed for a broader consideration of the problems and processes present.
Assumptions:
- Media is no longer trustworthy
- Millennials don’t care about voting
- Millennials don’t have the time to vote
Counter-Assumptions:
- Some media are unbiased
- Millennials want to vote
- Mail-in ballots let them vote on their schedule
With some idea of potential problems we could fix, we wanted to make sure that the design was for the user and not us. We created survey questions and distributed them through mainstream social media platforms: Facebook and Instagram. The survey gave us data on their age, registration status, voting habits and motivations.
Responses
With 69 responses I was surprised to find that 95.7% were registered to vote but only 80% ended up voting in the recent midterms. I allowed for open-ended responses in the survey to get more insight on why my sample population was so interested in voting. Popular responses included:
- It was my duty/responsibility
- It was my right to vote
- I don’t like the current political figures
Millennials from the survey did care about voting. They largely felt a sense of duty or worried enough about the outcome that they wanted to vote for someone better in office.
The majority of those surveyed were millennials. We decided to define the ‘younger generation’ stated in our challenge and our target audience as millennials. To get some more specific information I interviewed people on my train ride home as well contacting those who left their emails on the survey. Katie and Brayden conducted their own interviews to find more data. We then compiled our findings into Realtime Board.
Follow-up interviews told us that a main reason stopping millennials from voting was that they didn’t feel informed enough. Taking the time to research every issue on their ballot is frustrating. Frustrating experiences cause them to not vote and be overwhelmed by the whole experience. With this information we could create our persona.
Jessica
Jessica is registered to vote and participated in both the last presidential and mid-term elections. She spends an average amount of time on social media, which led her to want to be more involved. She never cared about politics until the presidential election because she was unsure about the direction the country was moving in.
Jessica sees voting as a duty to her country and her future. She believes her vote matters and wants to be informed on important issues but finds it difficult to research everything on her ballot in a timely manner.
The User Story
Keeping our persona in mind I collaborated with my team and listed out goals that we wanted Jessica to be able to do on our site.
Once we had listed out what we thought we needed for Jessica we went back through and made a MVP line for effective time management.
Teamwork
During this process, one member of the group had a very different vision of how actions would accomplish our tasks. I spent a fair amount of time trying to explain how the actions that our team had identified accomplished the narrative and ultimate goal. Sometimes my teammates brought up great points that changed how we thought to accomplish a goal.
One example was when we were thinking about implementing a social aspect to our website. Jessica wants to encourage others to be more informed. But as our team member explained, they thought that allowing comments and some sort of like/dislike feature on the website would be detrimental. If a majority of a political alignment was signed up to the website, they could skew articles they didn’t agree with.
Our solution was to have the ability to share the article and send it to their friends, but not allow comments within the website. This kept the site as fact based and unbiased as possible and more likely to achieve the goals in the user story map above.
Having someone on our team that thought very differently was very helpful. By having to explain out loud what exactly we were referring to, unclear actions were identified and eliminated. This revision process ensured that our app would be more tight-knit from the beginning and we would have less back-tracking later.
With the goals, narratives and tasks laid out, I created a user journey to get an idea for what the product needed.
The product needed:
- A way to save ballot decisions
- Election related information
- Ballot issue related information
- Political candidate related information
- A way to save information and topics
Structure
We created a rough sitemap of the site before we started prototyping to help solidify what content should belong on what page. Seeing a birds-eye view also helps us simplify the user journey and make sure we had all the tasks necessary to accomplish our goals. Later in the development process we ended up looking back at this sitemap and removing conversation starters as a page view because it had beed decided not to implement social features in the website.
Prototyping
My team and I decided the home page, article and profile page were the best place to start. When deciding how the content and information architecture would be organized, we decided to do 10x10’s. We would each iterate our ideas and come back to collaborate and pick the elements we thought would benefit the user the most. Those elements would be combined into a collective view.
We then divided the remaining wireframes amongst ourselves and iterated on our own.
I was unsure with our current naming conventions. Before getting too far into wireframing I wanted to do some card sort tests to see if I was going in the right direction. We did open and closed card sort testing and found that people did not agree with our naming conventions.
Users got confused with how to interpret ambiguous words like ‘Results’ and wanted a more personal way to define actions that would pertain to them. I took this feedback and changed results to ‘My Results’. I ended up removing ‘discuss’ and placing issues and topics under ‘Be Informed’. After changing our naming conventions we made our wireframes in sketch and put them in InVision for usability testing.
Surface
I wanted to keep users oriented and give them more control. Articles often scroll on for pages at a time. This can make navigation confusing. I wanted to make sure the user always knew where they were when browsing content. I decided that a sticky navigation would make sure the user never got lost on where they were in the site. By placing it on the side it was immediately recognizable and intuitive.
Visuals
When deciding on colors I wanted to avoid unintentionally using a voting party color. I wanted to stay away from traditional reds and blues as those were often associated with political parties. I did research on many news sites and found that they most often relied on white space with black text and few color highlights to present their information. This led me to choose more neutral and darker colors for site navigation. The orange-red and blue would be used to indicate call to actions and serve as accents only.
Originally I had planned on using a serif based font. My research showed that people often thought of news when a heavy serif font was used. However I did some user testing and found out that millennials wanted a more modern sans-serif font. I landed on the font Raleway for providing a more modern feel.
I struggled initially with creating a name and subsequently, a logo for the website. While researching other popular news and voting sites I noticed that many of them were named after the main idea of their site. Things like Vote-now.com and Vote.org for example. I settled on the calling the site VOTE INFORMED. The name gave the user a little bit of onboarding, immediately letting them know the purpose of the website.
With the name and colors decided, I could move towards hi-fidelity wireframes. I filled in pages with content and did some local user testing. I got feedback that users wanted more content choices on the page. It felt like it was made for older generations who couldn’t see. After making more content visible in one page user feedback said that there wasn’t enough separation between elements on the page. I split the content onto cards for a more vertical information architecture than the previous version.
So What?
Vote Informed will help the younger generation learn about the facts instead of opinions so they can be informed. This website will help millennials get ready to vote by knowing what issues are on their ballot. Allowing them to see the impact of their decisions over time. This site will provide general and personalized information on issues that they are passionate about. Ultimately, reducing the frustration with researching these issues on their own.
We live in an ever increasingly divisive world. Younger generations, if equipped with the right tools, will be active in their communities. They need to be informed to walk forward with confidence in this current political climate.
Take a look at the full prototype
