Engagement Cards

Engagement Cards

Client

My Role

Platform

A visual link designed to increase user engagement across various departments at CBC

Enhancing User Interaction Across CBC

Goal: To build an interactive element to improve user engagement and click-throughs while keeping things simple for producers to create, edit and share. As the lead developer and designer for this project, I turned a casual idea into a realized final product that is currently being used throughout cbc.ca and will be implemented as a permanent feature in the CBC ecosystem.

At CBC, I have the unique opportunity to work across several departments, collaborating with producers to solve creative and technical challenges. One of the most memorable and impactful projects I led was the development of the Engagement Card, a visual component designed to increase user interaction and click-through rates.

The Challenge: From Hyperlinks to Visual Storytelling

Links across our articles were primarily text-based—simple hyperlinks embedded within long bodies of text. These standard links could easily be overlooked by readers, missing opportunities to highlight related content or key stories. Our rich media and visuals were underutilized, often showing small thumbnails or simply text based links or short lists. And now, understanding how users are interacting with media elements, and competing with giants like Netflix with our CBC Gem streaming service, we wanted to create something that users were used to seeing and would want to interact with, especially when driving users to media. But first we had to think about what our current state of links were and what was possible.

When an Executive Producer approached me with the challenge of making our links more engaging, the idea for the Engagement Card was born. We wanted to find a way to transform how links were presented—moving from static text to interactive, visual experiences that resonated with users. Fortunately, my role as a web developer allows me to exclusively work within Expression Engine, a CMS that allows me to custom build any site and cater it to the needs of the producer. With this super power, I began working.

An example of a simple link block


A concept of an engagement card with all required information

The Solution: Prototyping and Iteration

I took the lead in conceptualizing and designing the first prototypes. Working closely with producers from multiple departments, I iterated on the design, focusing on user experience and visual impact. I constantly worked with them for feedback, asking for suggestions not only on the design, but also on how the backend worked. The goal was to create a flexible design that producers could easily customize to suit their department’s content, all while maintaining visual consistency across the platform. When we began, I worked only with one group of producers in one department, and as word spread around and people saw the engagement card in use, we expanded.

After multiple iterations, the Engagement Card evolved into a widely used tool within CBC. It’s now an embedded feature within articles, allowing producers to display visually striking images and call-to-action buttons like Listen or Watch directly within the story.

Reflection

The transformation—from simple, underutilized links to dynamic, engaging visual cards—was a collaborative effort, but I’m proud to say I led this project from the initial concept to its current, widespread use. Today, you'll find these links embedded in pages throughout cbc.ca, from radio, to news, to music and beyond. The next stage of this card is going to be a special implementation into in-house software which will allow all producers, even those who are new or not technically savvy, to create these cards for any article and implement with greater ease.