CGC 2019 TORCH RELAY MAP — CASE STUDY

It’s UX crunch time and there are seconds left on the clock!

Overview

Canada Games Council (CGC) is a not-for-profit sports organization that holds winter and summer games for Canadian youth. Every two years the games are hosted in a new Canadian city and garner thousands of people to their events. CGC is a launchpad for future olympic athletes and they exist to inspire inclusivity and diversity.

Please note, CGC has recently gone through a digital rebrand. Unfortunately the work done on this particular early 2019 feature can no longer be accessed.

Challenge

The CGC 2019 team tasked the OPIN team to develop an interactive map that allowed users to access Torch Relay Events and Celebrations hosted during the 2019 games in Alberta. As a part of the interactive map there was a filter feature to display current and past events. Once a user clicks or taps on an event, more information about the event such as time, location, are displayed. 

Users and Audience

For the games, the main audience groups were athletes, spectators, CGC administration, and the general public. Anyone who participated in the games could share the map on their social medias and had the option to add the event to their calendars. Spectators who follow the games could stay up-to-date and CGC administrators ensured that they provided the accurate information. 

Roles and Responsibilities

For this particular piece, I was the lead designer and had the help of my in-house design team, management and development team. In total, there were 8 key players responsible for the launch for the interactive map.

Scope and Constraints

The first challenge we had with this project was time. With only a few weeks to ideate, prototype, test, and build we had to be extremely rigid and efficient. Secondly, knowing that our budget was limited we did not have the opportunity to conduct external user testing.

High Level Project Roadmap

Working in an agency environment can sometimes be tumultuous. No matter how much we try to organize and set deadlines, we always have to account for the unexpected. Even with all our challenges we did manage to launch on time with minor bugs.

Process and What We Did

To kick-off the project, the OPIN team had a 3 hour virtual discovery session to gather requirements from both creative and technical standpoints. Once requirements were communicated from management to the operations team we had discussions around what was technically feasible as development time was pretty tight. And to top it off, the map had to be launched the first week of January 2019. The inherent pressure was on and who feels like working during the winter holidays (we do!). Before we jumped into ideation, I ensured the designers were cognizant of the limitations of the software upfront. 

Ideation

This is my favourite part of the process because it is where I can put pencil to paper and produce as many solutions I can in a relatively short amount of time. 

Solutions

Right from the get go, showing the entire map of Canada with interactive bits and bobs would be a challenge to get right. We knew creating a unique mobile experience was key. Having to zoom in and out, being able to access a location by tapping on a pin without potentially overlapping with other pins, the list of potential pain points went on and on. 

Initially, CGC wanted to show the entire map of Canada for the desktop experience but considering our timeline we recommended to concentrate the map solely on the province of Alberta. Alberta also made the most sense since the games’ main events were all happening in Red Deer. Why should we make it more complicated than it had to be. The structure and the content was pretty straightforward and it was truly a matter of utilizing some information visualization tactics.

Page Content and Functionality

Below is a snippet of the low-fidelity prototype I sketched out for the map experience on mobile. I used a Q-card vertically, as I thought it was a good fit to represent a mobile device. The Q-card fit nicely in the hand and I could go around the office to test it out on my management team and other developers who were not a part of the production. 

For the mobile experience, listing out the content is much more accessibility friendly. Essentially the user would be presented with two main categories (1 section for Torch Relays and 1 for Celebrations). 

Under each section you had a listing of the location events in order of the most current date. In ascending order from the most current event to the last scheduled event. 

A user would then tap on the location to view the event details. The event details would be a modal that does not take up the full screen, width or height of the device. We did not make it transparent for accessibility reasons and we made sure to incorporate the branding colours.

In addition to the interactive province map a similar experience was replicated on desktop. On desktop, the user is shown the map of Alberta and a basic set of filtering. Once a user clicks on an event, the event information appears on the right of the map. By default, the current event is open on display.

Outcomes and Results

Here are the final mocks for the CGC 2019 Torch Relay Schedule and Map. 

Overall, the map was launched on time with all the required features and a few minor bugs. The biggest challenge for me was to create an interactive piece with limited resources and less opportunities to do more wholesome testing. The most valuable lesson I learned in the agency life is that you don’t always have the luxury to perform proper usability testing. However, regardless of the situation, as a designer you have to do your best with what you have and get creative. 

Even with all the constraints and tight deadlines, the client was really happy and informed us afterwards that the map was extremely useful to its audiences.