Project type: Art direction; Large-scale responsive web design
Agency: Blue State
As the art director and lead designer for this project, I worked with UX designers and a development team across different timezones to build New York City Campaign Finance Board’s new voter-facing site: NYC Votes.
12 weeks ahead of New York City’s largest city-wide election in 20 years, I reimagined the NYC Votes website and designed a robust, accessible, and award-winning new website with several interactive tools designed to help introduce ranked-choice voting to all New Yorkers ahead of the June 2021 NYC primary. Voting.nyc ensures that every New Yorker can find answers to all their questions about current and future elections. Just four weeks after the site’s launch, the client was already 100,000 over their goal of new users exploring their site. They had more visitors for a local primary than the presidential general election.
With only an in-progress new logo and a color palette, I designed a flexible visual system of components that prove both functional and distinctive, while celebrating the vibrancy and diversity of New York City. I took cues from the client’s positive reactions to big, bold typography and made that a key player across the site. To make first-time voters feel empowered, informed, and excited to vote, the use of color and grid-like organizational devices make for an approachable and inviting user experience.
Before
“An incredible community-driven site that grows intuitively with the end-user. Design and clarity of UX make it a site that will be used as a benchmark in their sector.”
After
Navigation Design Interaction
Making Ranked-Choice Voting Understandable and Accessible
To help familiarize voters with the new ranked-choice voting method, I designed an interactive practice ballot through which users can fill in a pretend ranked-choice ballot, and the website will tell you if you filled it in correctly or not. We talked through this feature with a visually impaired NYC Votes employee to figure out what the experience should be like for someone who cannot see the ballot that they are filling out. Simply ensuring that a screen reader could read the text aloud was not enough, since there’s an entire table that the user needs to have in their head. The user is able to implement the tab key to progress through each bubble in the ballot. When pausing on each one, they hear the name of the candidate and the choice number associated with that bubble.
Once site visitors have practiced filling out their ballot, they can click through a demo of how the votes will be counted once voting is closed on Election Day.
To illustrate how ballots are counted, I designed a bar chart that updates with each round of counting. Users can see how their second or third choices affect the outcome if their first choice doesn’t prevail. To the right of the bar chart is a written explanation of what’s going on. To make this accessible, we asked NYC’s content editors to pretend that the chart didn’t exist when writing the explanations. People who can’t see the page won’t even know the chart exists but can generate a vivid picture in their head from the very descriptive explanation read aloud to them.
Users are able to select from dropdown lists that afford them to choose which ranked-choice voting election they’re voting in and for what political party. With the populated results, they can then practice ranking actual candidates using an interactive tool with drag-and-drop features.
Mobile design considerations are also important for accessibility. The NYC team was particularly invested in ensuring voters who were unaccustomed to accessing the website on their own personal laptop or desktop computers could view an experience that presented the full breadth of materials effectively on mobile.
Last but certainly not least, we needed to ensure the site was accessible to all New Yorkers with content available in five languages: English, Spanish, Chinese, Korean, and Bengali.
