CTV News

CTV News is Canada's one of the most-watched news organization both locally and nationally, and has a network of 16 local news operations. At the end of 2020, we launched initial phase of homepage and all local sites on AEM, resulting in a record 5.8M unique visitors post-launch;+29% increase over the 2020 average.




Bell Media

Project Type



Lead UI Designer / UX Collaboration

Project Overview

Centralizing the news products digital presence

Bell Media embarked on the goal of centralizing its digital presence moving its products to a single codebase and shared design system where online experiences can be more efficiently designed, built and launched.


Bell Media news products were operated by the same content management system but most of the user-facing functionality was custom-built for each brand. This approach made it hard to iterate and scale according to the needs of users and newsroom.


A product that enables effortless discovery for our users and improve engagement

A design approach that provides a wide range of tools to support different scenarios and give producers complete control to manage curated and dynamic content

Creating the beginnings of a scalable digital system flexible enough to adapt in time to the more custom needs

Discovery - Early Prototyping

A solution that respond to the volume of the news coverage

A large cross-functional teamwork and an iterative approach led us to prioritize our MVP experience to create a solution that offers flexibility for producers while surfacing the content and an enhanced reading experience for our users to discover what is happening and what matters to them during the day effortlessly.

Evolution of a single teaser

We designed the foundation of a modular system that supports a variety of scenarios to support producers manage content with different visual hierarchies and content densities. Below wireframes represents the evolution of a single teaser becoming a story cluster. The variations are created to accommodate the density of the page. We didn't only follow a responsive grid, but we also developed the teaser clusters responsive to offer greater flexibility for producers to resize the components manually and instantly.

Scanning vs Reading

This modular approach offers a clear hierarchy to help readers scan the content effortlessly and guide them to discover what is happening, what is the most important story of the day and what matters to them throughout the page. Horizontal scroll components with improved signalling are breaking the story clusters and help users to quickly choose what to engage with.

Instant vs slow discovery

Consumption time of news affects the visual representation. Our new chronological feed which gives a quick overview of what is happening is presented in a simple format using colour to signal each teaser
and a background to differentiate from other content packages.

A dedicated spot for 'Happening Now' helps to create a habit loop and for returning visitors to keep up with the news quicklySpecial series which enables a deeper discovery of the topic with mixed visual tools and detailed reports requires a representation that reflects the time and effort that went into producing that particular series.

Video Content

By improving signalling and implementing clear contrast both with color and size, we help users to quickly choose what to engage with.

Branded Content

To promote different products and shows of CTV News we introduced horizontal scroll components that are scalable and flexible


An article system
that promotes

A single responsive article for both mobile and desktop on the web, and a lean version to render stories in our native apps

UI Elements

We kept the UI library components lean
for the beta version to facilitate the adaptation and usability across the teams and customize in time to the more intensive  needs across the larger digital ecosystem.

Key Considerations
  • 4 px grid applied for space and type hierarchy
  • CTV Sans introduced for headlines
  • An updated and slightly expanded colour palette that can accommodate the density of the content.
  • 5 breakpoints to accommodate the advertisements

Launched initial phase of homepage and 16 local sites on AEM, resulting in a record 5.8M unique visitors post-launch;+29% increase vs. PY.

Our design solution helped us to launch efficiently 16 local homepages covering the unique needs of each local newsroom and quickly expand with new section pages.

More Case Studies