BUILDING
DESIGN
SYSTEMS
CBC STUDY

I've built my career on 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 the a product will be delivered to market. Take a look at my example from my work at CBC below.

1.Project

Building the CBC Design System. My role was lead designer.

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)

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.

THE CHALLENGES

Working 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. 

AUDIENCE

Primary users

“Royal” 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.

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 sharable 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 build a pages for each content team.

 

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: