2018-2021
Bell Media
Redesign
Lead UI Designer / UX Collaboration
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
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.
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.
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.
By improving signalling and implementing clear contrast both with color and size, we help users to quickly choose what to engage with.
To promote different products and shows of CTV News we introduced horizontal scroll components that are scalable and flexible
A single responsive article for both mobile and desktop on the web, and a lean version to render stories in our native apps
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.
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.
