Case Study 01.

CBC Olympics app

A native mobile app experience designed to notify, inform and entertain Canadians by connecting them to all of the Tokyo 2020 Olympics action.

Project Overview

The Problem

With the biggest sporting event in the world, CBC has been the official broadcaster of past Olympic Games such as Rio 2016 and Pyeongchang 2018. CBC has resorted to a white label digital solution partnering up with a third party vendor with a templated solution for the design and implementation for a standalone native app. This proved to be costly with barely any room for customization outside of the white label template provided. Using the existing CBC Sports app to retain our current audience in addition to acquiring new audiences was also a challenge. How do we get professional sport league fans their content in addition to olympics content. Another challenge to boot: in 2020, the cancellation of the Tokyo 2020 Olympic Games due to the COVID pandemic and every week leading up to July 2021 the uncertainty if it will actually happen.

The Solution

For the Tokyo 2020 Olympic Games, CBC went with a different direction. They decided to use internal resources for both the native apps and website for a cost-savings solution and for their expertise in-house. The Digital Strategy & Products department stood up to the challenge with many unknowns, working in tandem with Radio-Canada. Leveraging the existing CBC Sports app (and CBC News app), we identified existing frameworks and codebase to achieve a CBC Olympics app where existing users can update the app through the App Store or Play Store or have new users download a fresh CBC Olympics app.

The Tools

Pencil and paper, Sketch, InVision, Figma, Photoshop, Illustrator and Miro.

My Role

Lead Product Designer, Usability, Accessibility + QA Testing

The Team

The Core Team: CBC’s Native Apps + Voice Platforms team (1 Product Manager, 1 Product Owner, 1 Content Designer, 1 UX Researcher, 4 iOS Developers, 4 Android Developers).
Partners and Stakeholders: Sports content department, Accessibility team, Communications/Marketing/Branding/Research department, Ad Revenue team, Digital Strategy & Product department (web product designer, front and back end developers, video streaming), our counterparts at Radio-Canada.
Stats provider (Third-party vendor): Gracenote (A Nielsen Company).

Discover & Define: UX Research

Comparative Analysis

Collaborating with a UX Researcher, a Content Designer and an Information Architect, we used past CBC Olympics apps that were created by third party vendors. We also compared other sporting and news apps such as NBC’s Olympics app, IOC, Team Canada, BBC Sport, Sportsnet, TSN, theScore and Eurosport to see how others approached the olympics in the app space through the lens of a user.

Key Findings

Similar UX/UI patterns among all the organizations became apparent. Some also used the same third-party vendor for they stats solutions. Similar approaches on how they presented Live streaming events and VOD streams of highlights and replays. It was also apparent that push alerts strategy were very similar being a time difference.

Requirements Gathering

Meeting with stakeholders we started white boarding ideas and prioritize what we assume our audience would want from an Olympics app. We wrote down features on sticky notes and did a dot-voting exercise to determine what we want on the homepage of the app. We then placed them in priority sequence according to the stakeholder however judging from past olympics we felt as a team certain features of content should be higher up.

As we neared the opening ceremonies of the Tokyo olympics, our requirements became clearer and we had to pivot to focus purely on current functionality. We revised the mocks and prototypes and worked closely with the developers to understand what UX improvements we could make with the time left until launch.

Develop & Deliver: Ideate, Design and Test

User Flows, Sketching + Wireframing

I created user flows to illustrate entry points to certain specific types of content such as top stories, video (Live and On Demand), Schedule, Results, Medals and Individual Sporting Events. Creating a user flow diagram provided comprehension of what the information architecture could be and allowed everyone to be on the same page whether it was a stakeholder or a developer.

After having buy-in with what the potential user flow may be from the stakeholders I started sketching what the layout would be like but immediately moved to wireframing where display ads would be placed in the layout as this was a required business need from sponsorships. These had to be shown first to the revenue stakeholders to get feedback on what we can sell. From here the Apps team proceeded to meet with the Sports department stakeholders for requirements in terms of content. We met with them on a regular basis until the opening ceremonies so that we could continuously refined our ideas while getting input from the developers on what is technically feasible.

As we neared the opening ceremonies of the Tokyo olympics, our requirements became clearer and we had to pivot to focus purely on current functionality. We revised the mocks and prototypes and worked closely with the developers to understand what UX improvements we could make with the time left until launch.

Key Findings

We’ve had many uncertainties and unknowns with the possibility of the cancellation of the Tokyo 2020 Olympic Games after a postponement in 2020 due to COVID-19 concerns. One thing for sure is that even though there is a pandemic happening the love of sport, community and national pride for Team Canada is always been there. Canadians want to follow the Olympics and see how our athletes are doing while they strive for the best by streaming live events, checking out schedules when they are competing as it was quite difficult with the Olympic Games being in Tokyo.

We found that our audience was truly engaged from user feedback through Zendesk, the App Store, Play Store and through our continuous user interviews.

For the upcoming Beijing 2022 Olympics in February 2022, we are currently working on addressing some of these users’ pain points such as improving the schedule, send alert reminders when an event is coming up, medal standings at a glance up higher, following a particular athlete, sport or country, potentially hide game and match outcome spoilers and integrate more Paralympic Games content.

The numbers…

CBC MARKS RECORD-BREAKING DIGITAL AUDIENCES FOR TOKYO 2020, WITH CBC ALSO RANKING AS THE MOST-WATCHED TV NETWORK IN CANADA THROUGHOUT THE GAMES

Canadians stream 37 million video views on CBC digital platforms during Tokyo 2020, up 62 percent over PyeongChang 2018

“CBC’s digital and streaming platforms including CBC.ca, the CBC Olympics App and CBC Gem grew historic, record high audiences over the course of the Games, with Canadians streaming more than 37 million video views since the beginning of Tokyo 2020, up 62 percent over PyeongChang 2018, which had a similar time difference of 11 to 16 hours for viewers in time zones across Canada. Additionally, live views made up 61 percent of all video views, highlighting the increasing popularity of live streaming on CBC digital platforms, and Connected TVs accounted for about 68 percent of the total time spent streaming Tokyo 2020 content on CBC Gem. In total, Canadians consumed nearly 17 million hours of digital Olympic content on CBC digital platforms, with time spent reaching the highest one-day total on record for CBC on Friday, August 6, the day of the women’s soccer gold medal game.”

Digital Data Source: Adobe Analytics, 2021

News article: https://www.cbc.ca/sports/olympics/cbc-tokyo-olympics-ratings-1.6135953
Press Release: OlympicGamesTokyo2020_CBC-Audience-Release.pdf

The CBC Olympics app consistently remained the #1 app in the Sports category for the duration of the Tokyo 2020 Olympic Games.
(App Store and Play Store)