Redesigning for democracy
Client
Timeline
Service
Project Overview
Challenge
The League of Women Voter’s Vote411 website offers a non-partisan tool to help keep US citizens informed about upcoming races, measures, and candidates. The ballot experience was unbranded, inaccessible, and missing functionality, such as the ability to support ranked choice voting.
Solution
I designed and developed a new voting simulation experience built with custom React components. My design process began with identifying pain points through stakeholder interviews and user research. I expanded out the design library of our Vote411’s Webby Award winning styles, with a mobile and accessible-first approach to reach a more inclusive audience.
In working closely with the development team, we built a fully interactive proof of concept to run our user testing surveys and interviews on. Ultimately our solution supported all 3 different types of voting systems used in the United States today, and we saw a 150% user increase post-launch.
Process
Accessibility & Design
My target audience was anyone eligible to vote, which is a wider range than most clients I work with, and it was essential to emphasize accessibility. I created an accessibility wireframe process that delineated page hierarchy and layouts akin to a screen reader. This approach prioritized html tags, aria roles, and auditory presentation of designs over a visual layout, which helped to easily identify features that would need extra attention. The accessible wireframe served as a blueprint for final designs and development hand-off.
When it came time to focus on the visual design, I enhanced our existing Vote411 design system. My focus was on following brand guidelines for the base styling, but also creating a system that was easily theme-able so that when 3rd parties embedded this platform onto their site, they could overhaul the branding. This meant I had to be prepared for unpredictable embed container sizes and had to create a highly responsive design.
Usability Testing
I had a few key design questions remaining that the client, myself, and my team could talk in circles around forever, never deciding which is the best. That's when I knew it was time for some more user input!
Testing Methods:
- Mobile only proof of concept
- Survey testing
- Follow-up interviews
Key Questions:
- Did a user understand the difference between critical actions, such as view answers and select for vote?
- Did a user recognize critical functionality, such as comparing multiple candidates' answers at once?
- Did a user ever feel trapped or unsure where to go next?
- Did a user know how to finish or restart the experience?
Development
As a frontend developer on the team, I specialize in building test-driven TSX React components, crafting both static and dynamic elements, components, and page layouts. We focused on creating a robust component library for documentation and maintenance in StorybookJS, building global hooks and models, and using stores for states.
I also defined edge cases for QC and pressure test situations, including how we'd handle browser and device testing. I was also in charge of managing accessibility, performance testing, and prioritizing any bugs that came from that. I was heavily involved in all agile development ceremonies, including story pointing, backlog refinement, design-tech talks, and conversations with the client.
GAllery
