Cindy Phan
︎

VoterVOX

A civic tech tool to ensure every individual feels empowered to vote

Context

Voter turnout among limited English proficiency groups is remarkably low. How can we use technology to remove language barriers and empower these folks to get engaged and vote?

I worked with the 18 Million Rising team to design and develop VoterVOX, an application that makes it possible to match potential voters with translation volunteers, making it easy for limited English speaking individuals to better understand how to vote and what the issues are. Individuals could also upload translated voting documents, ensuring voting is accessible to everyone.

Date2016

Client18 Million Rising

My RoleUX Lead & Front-end Developer

Visit VoterVOX

Project Overview

  1. Needs and Functionality:Pulling from the initial user research conducted by Research Action Design, I worked with the 18MR team to scope out the different application needs and functionality.
  2. Wireframing:I created interactive wireframes - with a strong emphasis on mobile-first.
  3. User Testing:I conducted user testing using the interactive wireframes with VoterVOX's target audiences: limited English proficiency voters, translation volunteers, and partner organizations.
  4. Visual Design:After incorporating user testing feedback, I then created the logo, visual design, and overall branding tone for VoterVOX. I then designed out the wireframes into flat design files
  5. Development:Once feedback and updates were completed on the flat files, I then led my development team to build the application using HTML, CSS, JavaScript, Ruby on Rails, and integrating the necessary systems. I contributed to the front-end development.

Determining VoterVOX Application Needs

18MR hired Research Action Design to run community workshops to better understand their needs and and what would be useful for them. I took this information and worked with the 18MR team to determine the application's goals and functionality.

We decided to create 3 unique but linked portals.

Examples of application needs:

  1. Voter and Volunteer matching system based on geography and language requested
  2. Full website translations
  3. Admin dashboard that pulls in key stats/data such as number of registered voters and volunteers, number of unmatched volunteers, volunteer requests by language.
  4. System for volunteers to upload translated documents and voters to be able to search through them.
  5. It needs to be device-friendly - it has to work on phones, tablets, and desktops.
Homepage Wireframe

Wireframing

Thinking through how each of the 3 different users would use the application, I created wireframes laying out all the needed pieces.

Since at least half of the audience will have limited English and technology proficiency, the goal was to make the application as easy-to-use as possible. I opted to use as much white space as possible, giving elements space to breadth and easy for the eyes to navigate.

After thinking through the various interactions and application states, there were over 30 screens that needed to be accounted for.

Volunteer Dashboard Wireframe
Admin Dashboard Wireframe

User Testing

Once wireframes were approved, I conducted user testing with 2-3 people in each of the 3 target audiences. The goal was to understand if the application was intuitive, if someone would use it, and what we had missed.

Some User Feedback:

  1. For Volunteers: Include stats on # of match requests, # of matches made and # of translated documents to see current progress.
  2. For Voters: Provide suggestions & information on what makes a 'good' volunteer.
  3. For Administrators: Provide better explanation of various metrics and see metrics over a custom time period.
Part of User Testing Form

Technical Flow

Considering the complexity of the aplication, I created a technical flow document to get the development team started before designs were completed. This included thinking through each of the 3 user experiences, laying out all technical elements, how the different dashboards would be linked, and what back-end system would need to be created to handle and store all this information.

Part of Technical Flow
Homepage Design

Visual Design

Once I handed off the technical flow to the developers, I then took the branding of VoterVOX to create the design compositions of the wireframes (and luckily, I had create the VoterVOX logo for 18MR the year before as a freelance project, so I knew their brand well).

The goal was the make the elements pop with personality while still keeping it easy to use. For the color palette I chose to use the pink and green of the VoterVOX brand as the main color elements - they are both easy to read and complement each other well.

Voter Dashboard Design
Admin Dashboard Design
Volunteer Dashboard Design

Development

My colleague, Justine, and I worked together on the front-end development of VoterVOX while my other colleague, Jim, built the back-end using Ruby on Rails. I worked with Jim and Justine to ensure all functionality and interactive elements were in place, going through the user flows multiple times to take note of any things that may have been overlooked or not initially considered.

Visit VoterVOX

Bird's Eye View of All Screens Created

Browse Other Projects

Medicare.gov

Healthcare.gov

Landed.com

Peers.org