work
case study

Plan Your Vote

plan your vote screens
tldr, what's this project about?

Helping citizens plan for voting in the municipal election, by choosing their candidates, their voting day, and location all in one consolidated website.

🎯 Business Goal:

Update the Plan Your Vote platform for the 2018 election, with a focus on accessibility and information architecture

Role:

Accessible user testing and research to inform the updated UI and strategy

Team:

2 UX designers, design lead, 4 developers, and a PM

Timeline + Scope

5 months (the election cannot be delayed!)

Success Metrics:

⬆️

Increasing vote plans by 48%

Usage resulted in 12,084 vote plans saved compared to 5,973 vote plans in 2014

🗳️

Positioning a stronger digital election strategy

Overall City election webpages saw an increase of 89% during the election campaign compared to 2014

💻

Improved web accessibility

The accessibility updates were recognized by local accessibility groups

Ahh yes...voting!

Ahh yes...voting, that political duty we do as citizens. Something that we do every 4 years, no matter who old we become, and no matter what accessibility needs we may have. Voting is such a unique challenge to design for, as this truly needs to account for everyone.

Plan Your Vote is a website offered by the City of Vancouver for every municipal election. This tool helps citizens view and choose candidates, choose their voting day and location, and answer capital plan questions in one consolidated website.

It was first offered for the 2014 election, and was being updated for 2018. The goal for 2018 was to help improve accessibility, along with the overall experience of the microsite. As a UX intern, I worked on these updates with the team.

Accessibility First:

Feedback from the 2014 version of this website uncovered that basic web accessibility needs were not being met. Citizens who needed assitive technology found the microsite difficult to navigate.

🧑‍🦯

blind/low sighted citizens...

were not provided enough ARIA feedback

🔎

citizens who used screen magnification technology...

found it difficult to find specific buttons and inputs

⌨️

overall user feedback indicated...

difficulties in understanding information

Problem area:

To provide an optimal vote planning experience for all...we need to optimize accessibility needs for the 2018 scope

To prioritize accessibility for the 2018 scope and make the right changes, we conducted user testing for individuals with individuals who were blind, low-vision, and had mobility needs. I helped to write the test plan and conduct user testing.

Snapshot of the findings documentation

From these tests, we identified 60+ issues, with key findings included unclear feedback for candidate selection and lack of contextual information. This set of data helped to inform our findings on where to plan scope of the product improvements for the 2018 election year.

Random Ballot Order:

Sample of the ballot (left), alongside the printed Plan Your Vote plan (right)

Typically on election ballots, candidates are sorted alphabetically. But the City decided on a pre-defined random order of candidates in 2018.

With 158 candidates to choose from, this was a new change for citizens, and could potentially lead to longer times in the voting booth to find their candidates.

🤔
Problem area:

If citizens are used to a ballot in alphabetical order, random order may be confusing...

To mitigate confusion, we updated Plan Your Vote to align with the ballot order. When creating a vote plan, it would export in the same order as the ballot, with the goal to reduce cognitive overload of trying to find the candidate on the actual ballot, and help with the familiarity of the candidate order on election day.

Outcome:

To manage scope, core UI areas were revamped, focused on emphasizing candidate selection and voting location with improved information architecture and accessibility features.

My direct contributions included:

🗣️

Improved ARIA support

More ARIA labels were added for those using assistive technology

ℹ️

Clearer information architecture to improve scanbility

Helped to revamp candidate selection pages, candidate overview and review screens, to improve readability of information

🧑‍🦼‍➡️

Added accessibility information to voting location pages

Added accessibility accomodation information of every voting location

Candidate selection:

Before and After: Candidate select page

The updated home page provided clearer numerical context about the candidates chosen (text vs. unclear icons), updated copy to explain the page function, a more clear search functionality, and better contrast of images. Better ARIA support was updated as well.

Candidate overview and review:

Before and After: Candidate overview page (top), Canadidate review page (bottom)

Updated candidate selection and review candidate screens, with more clear actions to remove candidates and see their information.

Location selection:

Select a voting location

Choosing a voting location was revamped, to include accessibility information about voting locations.

The Impact

This microsite was featured on the Disability Alliance of BC website that notes the upgrade to accessibility, along with local news sources, such as VanCourier. 

To see how this microsite fits into the voting platform strategy, this video produced by the City showcases the integration of Plan Your Vote.

Reflection

This project was quite special to me, as this is the first project professionally that got released. Being able to contribute to the overall voting landscape designing for citizens to help them vote, and consider our accessibility community, was one of the biggest takeaways from the project!

want to see another project?