Building the CBC Design System. My role was lead designer.
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
Product owners, UX lead, scrum master, QAs (3), researcher, front-end and full-stack developers (8)
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 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.
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.
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.
“Royal” long-time audiences who seek news content and visit the desktop version of the site a few times a day.
Millennials who browse news and non-news content casually on mobile and may come across CBC.ca from different channels such as social media.
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.
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: