Municipal Elections
Simplifying live election results for everyone (including me!) to understand.
Web, Mobile
Research, UX/UI, Prototyping

History of confusion

The online support for municipal elections had been fairly lackluster compared to the provincial and federal election nights. Everyone is entitled to find out whats going on in their town during an election, so we set out to simplify the results on election nights.

I myself hardly knew a lick about elections, and didnt realize they differed province to province before starting this project. Lots of research ensued with users, but also lots of information gathering from the wealth of political experts at the CBC. This gave us a good balance of the political junkies and the average joe who just wanted to know who was winning the race.

Simplicity was the goal, but without missing the main stats that the junkies were after. After many iterations, it was clear that both ends of the spectrum could benefit from the same statistics.

Visual Indicators

Parties were less important than the actual people running in municipal elections, so we featured their mugs along with clean, simple visual indicator bars to show their vote share. The accompanying vote numbers and percentage to satisfy the more advanced user.

Positions in the mayor race moved up and down until the results were fully in, and a simple checkmark icon was displayed next to the winner.

Modular for each locale

Some elections had multiple wards with a few candidates running, and others had long lists of councillors for each town in the province.

Being able to swap out the components depending on the election was a huge help to developers, while still maintaining a consistent and recognizable interface across all versions.

Plenty of outliers

Many provinces worked their elections differently and being able to support each one was a big ask.

British Columbia was quite different, as they had a list of towns with many councillors, and all had to be shown in the results table. The province was further divided into lower mainland, Vancouver Island, and the rest of rural BC since the population was super dense in certain pockets.

A left menu component was added to our system to list out all the different towns, and could be turned on and off easily without messing with the core components much.

The rest of BC’s interface used the same components from other provinces, still had the main mayor race up top, and listed all the councillors below.

Special elections from the north

Northwest territories were technically provincial but ended up using the municipal design system components.

No one mayor is elected, and instead a group of representatives from all over the region are elected. Again with our modular approach we were able to easily remove the mayoral race components, and quickly reconfigure the layout to work well with the territories system.

With feedback from our other elections, we were able to even add some newer bits of information to the results like number of polls reporting to show races were still going on.

Hootsuite Labs