I had an opportunity to work on the City’s “Plan Your Vote” tool for the 2018 municipal election. Plan Your Vote allows citizens to view candidate profile information, choose a list of candidates, answer capital plan questions, and choose a voting day and location all in one consolidated website.
Initially used in 2014, I worked on the 2018 update to the website. There was an opportunity to not only improve the interface, but focus on accessibility considerations.
I came on to the project, working on final improvements 4 months before the election. The election took place in October 2018.
This user journey I developed was part of my research - to help define the intended use of Plan Your Vote. Voting can involve many channels – from the researching candidates stage, to voting, and finding out results.
As "planning your vote" to "actual voting" can span multiple touchpoints, we had to define how we could have an integration between the microsite to voting day. This intervention aligns in the research and preparing, along with the voting stage of the journey – as this tool is a source that will provide users to create a plan to vote and export their plan.
Our team conducted user testing on 4 participants, with a focus on accessibility. By testing different aspects of accessibility, from those who were blind, low-vision, and mobility needs, this helped us to design the tool, so all citizens could use the tool effectively.
I helped to write the plan and conduct user testing, helping to generate over 60+ issues. At a high-level, we found unclear feedback, lack of context, and destructive actions on the previous version of the tool. This unique set of data helped to inform our findings on where to plan scope of the product improvements for the 2018 election year.
With the data, the process included wireframes and mid-fidelity mockups, in order to test the new designs to ensure they scaled across the web (redacted view of mockups).
One challenge for this election was a “random ballot order.” Typically on election ballots, candidates are sorted alphabetically. But the City decided on a pre-defined random order of candidates in 2018. This was a new change for citizens, and could potentially lead to longer times in the voting booth to find their candidates.
By allowing citizens to bring their printed plans, or have it on their mobile devices in the election booth, this helps to ease the process of voting. Typically, you could write down your candidates on paper, but because of the challenge of the random ballot order, it would take time to find your candidate as it would be sorted randomly.
With Plan Your Vote, the exported "election plan" would be in the same order as the election ballot. And by bringing your printed plan that matches the ballot order, this further reduces the amount of time it would take to find your candidates on a ballot, therefore helping to speed up the election vote process.
I had a chance to help define the new interface of Plan Your Vote. Accessibility with better ARIA support was a major consideration, along with the overall information architecture.
Featured below are some screens of the UI that I worked on. The comparison showcases the new UI first, with the previous UI second.
I helped to redesign the dropdown candidate menu, to easier showcase the information of the candidates chosen for the plan, along with easier removal of candidates from your plan. For accessibility, greater ARIA controls were built-in for more context.
I also helped redesign the top bar, moving away from iconography towards written copy that communicates better the candidate type.
I improved the information architecture clustering of voting location information, along with adding in necessary site accessibility information.
I helped to improve the final review candidate screen, to showcase more context and information about the candidates you have selected. This problem was similar to the candidate dropdown, with the lack of contextual candidate information.
The solution had to be scalable across the web, from tablet to mobile. I helped to ensure the solution scaled across all platforms, for ease of access regardless of device.
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. This tool was also mentioned at the City Council Meeting post-election.
Saved vote plans also increased by 48% compared to the 2014 election with Plan Your Vote.
To see how this microsite fits into the voting platform strategy, this video produced by the City showcases the integration of Plan Your Vote.
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!
Check out the Guides project, another project I also released at the City of Vancouver!
This was also my first UX internship, and was thankful for the opportunity to work at the City. Working for the City solidified my passion for creating meaningful products – and designing at a local level was rewarding to see the impacts it made.
I would like to thank Julien, Sam, and Tadgh for their mentorship throughout my internship.