BUILDING
DESIGN
SYSTEMS
CBC STUDY

I've built my career in design systems, working for some big companies like CBC, where all the things that go into that system like a style guide, pattern library and more is a single and vital source of truth that provides consistency and efficiency in experience and brand. It groups together the elements and structures and instructs how a product will be delivered to the market. Take a look at my example from my work at CBC below.

1.Project

Building “The Feed” 

Create a new CBC website by combining all CBC sites into one platform product.

2.Stakeholders

Digital executive director; All digital directors (brand, sales, marketing, advertisement, content), executive producers from CBC.ca, News, Sports, Radio, Arts, Comedy, Books, TV, Docs; executive producers from Regional News

3.Team

Product owners, UX lead, scrum master, QAs (3), researcher, front-end and full-stack developers (8)

4.My Role

Lead UX Designer

5.Objectives

Increase the number of visitors and time spent on CBC websites.

6.Users

Primary users:  “Loyal” long-time audiences who seek news content and visit the desktop version of the site a few times a day.

Secondary users: Millennials who browse news and non-news content casually on mobile and may come across CBC.ca from different channels such as social media.

QUICK
BACKGROUND

As an iconic national media organization CBC operates across the country, serving over 22 millions Canadians. Historically, the digital experience has been fragmented as every content department has their own process and design approach. As a result, Canadians were getting different brand and user experiences. With a new 2020 digital strategy mandate to deliver a better cohesive digital experience for all Canadians, I led the UX in one of the biggest projects in CBC history. The roadmap ran for 5 years starting from 2015.

MAIN
CHALLENGES

Work in silos

The project was complex as it spanned across almost every department including ad operations, sales & marketing and various content producers like news, arts, radio, broadcast and more. Getting everyone to get onboard and on the same page with was challenging and required a lot of time. With the aim to unify the brand experience, we needed to build a new digital experience, while maintaining various elements of the current website so that services weren’t interrupted for Canadians who came to CBC everyday, multiple times a day and at various times. The biggest challenge wasn’t only building a new cohesive product experience for Canadians, it was getting all the internal stakeholders and employees onboard to make the new website experience happen in the first place.

No design consistency

As I mentioned earlier, one large design struggle lied in the fact that historically, each content department designed their own pages with their own interpretation of brand and user experience design. Many UI elements were designed for single use or custom built. As a result, CBC online had various design patterns that did not align to brand. For example, you would see multiple button styles across CBC websites. Not only was design inconsistent, coding throughout the platform varied, leading to inflexibility from the technology. Design change could  take months and created a risk that CBC could fall behind competitively and lose our audience to other media competitors.

Too long to market

Due to legacy systems, technological impediments and complex stakeholder relationships, website pillar redesigns lasted 6-12 months, depending on the complexity and requirements of the project. By the time a project was completed audience behaviour had already changed. This ultimately would impact the content team who delivered great content but the delay in launching a site led to news, entertainment and other areas of business failing to meet the audiences’ changed expectations as the company fell behind other competitors. 

DESIGN
INVENTORY
AUDIT

Here’s a quick look at our past digital properties and there’s no surprise that all the pages have different page structures, button styles and fonts.

 

BUILDING
THE DESIGN
SYSTEM

Breaking down the components

The plan of attack was to build by a series of shareable components instead page designs. I began an excel sheet to build a components list and asked each content team to prioritize with stakeholders by the order of importance.  I followed up by conducting stakeholder interviews with each content team to identify their individual goals and learn about how their audiences were changing. This exercise helped me establish page information architecture and deliver global based components that could be used to build a page for each content team.

THE
OUTCOME

After an initial heavy investment in time and consensus building with stakeholder groups at the beginning of the project, we came to an agreement on elements. We followed up with the swift delivery of the design system which ended up  tremendously improving the speed of future builds on the newly architectured website where processes that took months now only required days. This allowed CBC’s content producers to focus on their craft not the platform. Here what it looks like today: