CBC Gem: Tokyo Olympics

Designing a Record-Breaking, Award-Winning Olympic Experience

The Ask: Lead the multi-platform UI design for the Tokyo 2020 Olympics on CBC Gem. The challenge was to translate the vision into a polished, consistent, and intuitive user interface that worked seamlessly across a complex ecosystem of devices.

The Solution: A cohesive and scalable design that  handled the transition from live to on-demand events. We designed intuitive navigation for Olympic categories and a clear event scheduling UI, resulting in a best-in-class digital service that drove record-breaking viewership.

My Role: Product Designer

OUR GOAL
Deliver an Olympic viewing experience for millions of Canadians, unified across mobile, tablet, and TV.
STRENGTHENING USER EXPERIENCE

Pain Points Addressed

Powerful, self-serve product and growth analytics to help you convert, engage, and retain more users. Trusted by over 4,000 startups.
  • Broken user flows in the booking and retrieving process
  • Inconsistent UI leading to task failure and confusion
  • Limited feature functionality like trip management, adding luggage, and reviewing itineraries post-booking
  • Too many custom components causing app to slow down and users to abandon to app
strategic approach

A unified experience, everywhere

My focus was on execution and craft. The core strategy was set; my job was to bring it to life in a way that felt cohesive and high-quality, no matter what screen the user was on.

Design System Audit

It was necessary to conduct a deep-dive audit into CBC's existing design system and identify which existing components could be adapted, versus where we would need to design net-new components to handle the unique demands of a live, multi-sport event. Scalability, platform speed, and build time were all crucial factors we examined.

Multi-Platform Component Design

The crux of our work was building a flexible component system for event handling. It needed to communicate event status—upcoming, live, or on-demand—while also solving for complex edge cases like time-zone parity and seamless transitioning from live to on-demand content across all platforms.

Close Collaboration for a Tight Deadline

With the immovable launch date of the Olympics, close partnership with engineering was non-negotiable. I conducted daily design check-ins with the front-end teams for each platform, ensuring my UI designs were technically feasible and could be implemented efficiently to hit our deadline.

Record-Breaking Viewership & Industry Acclaim

62%

increase in viewers from 2018 Olympics Streaming

28 M

Canadians tuned in across all platforms

37 M

video views were streamed on CBC's digital platforms.

#1

platform in Canada for Olympics streaming

Tokyo 2020 Olympic Bronze Rings Recipient:
Best Olympic Digital Service