Bell Design System
Canada's largest telecommunications company.
From late 2022 to early 2023, I led the Bell App team's migration from Sketch to Figma and the creation of a multi-brand design system. This included collaborating with design and development teams to implement a robust token system using Token Studio for token management.
We approached the design system as a product, following the double diamond design/product process model: discovery, definition, development, delivery, and a continuous cycle of feedback and improvement.
Significant impact in 13 weeks
Delivered a multi-brand design system supporting all mobile app teams.
Robust component & token library
Built a functional library supporting light/dark mode and two initial brands, with scalability for future expansion
Ongoing value at scale
Paved the way for a second engagement in late 2024 to extend the Design System across the entire Bell organization.
Timeline
3 months
Role
Design lead
Services
Design strategy
Design system
Research
Interface design
Accessibility
Operation Strategy
Buy-in from executives
An unexpected discovery during our user interview process with the Bell team while trying to get a better understanding of the product & team processes was the lack of buy-in, funding, and understanding of the Design System from the executive team.
To address this, we created a visual presentation highlighting the importance of proper funding to build a centralized team capable of maintaining and improving the Design System.
“We should have built this 3 years ago!”
- Director, Design and Digital Delivery
Robust component library
Transitioning from Sketch to Figma unlocked greater control and customization for components. This enabled us to create high-quality, versatile components that met the needs of multiple products while maintaining consistency.
Our goal was to ship components quickly for testing by product teams. We achieved 90-95% coverage of the Bell App team's atomic and molecular components, allowing us to build granular components like organisms to meet any product requirements in future.
Tokens support for multi-branding & theming
A key outcome of this project was implementing a token system to support multiple brands and light/dark theming. As early adopters of Token Studio, we faced challenges in navigating this emerging and undefined space.
Despite these hurdles, we developed a strategy that enabled the Bell team to meet their branding and theming needs while ensuring the system remained scalable and easy to maintain with minimal effort.
Setting up teams for success
Empowering individuals to 'fish for themselves' is key to success, built on three pillars: understanding tools, mastering processes and workflows, and tailoring systems.
Tools: Teams must be trained on their everyday tools, like Figma for design. A deep understanding of a tool's capabilities and limitations enables teams to maximize its potential.
Processes and Workflows: Teams should grasp internal and cross-functional processes to optimize collaboration, identify gaps, and establish guardrails, saving time and effort.
Tailoring Systems: With a clear understanding of tools and workflows, we can design tailored systems and create cohesive plans that align and guide teams effectively.
In late 2024, we were re-engaged by Bell to strategize the expansion of their existing Bell App Design System across the organization.
The objective is to develop a unified Design System for Bell's web and app platforms, incorporating multi-branding and theming capabilities.
Workflow and process strategy
Improved workflow efficiency by 30% through recommended tools and process optimizations.
Governance and adoption strategy
Developed and aligned on a governance plan outlining the roles and responsibilities of each team and how they collaborate effectively.
Scaling Design System
Developed a strategy for how the design system will operate across more than six teams.
Timeline
1 months
Role
Design lead
Services
Design strategy
Design system
User Research
Governance
Operation Strategy
Information Architect
Optimizing to modern tools
We identified a key issue: reliance on outdated tools that no longer support modern workflows, leading to redundant processes. Specifically, design tokens were duplicated kept in Token Studio for developers and Figma Variables for designers, complicating the maintenance of tokens.
To streamline this, we proposed removing Token Studio and consolidating everything into Figma Variables, using the Token Tango plugin to bridge design and code effectively.
Architecture of team libraries
The main complexity lay in determining where design decisions should fall when working across multiple teams, platforms, brands, and themes.
We needed to identify the deltas in design decisions to structure team libraries effectively, especially given their interconnectedness within a waterfall process. Eventually we were able to create a detailed structure that will work across design & development.
Adapting workflows
Managing branding, marketing, web, applications, and various products makes understanding each team’s responsibilities a complex process, especially in relation to the design system team.
For a design system to succeed, it must be at the center of all design efforts, acting as the glue that ties everything together. In larger organizations, design system responsibilities can be divided among individuals or teams to manage complexity effectively.
Governance and contribution
To ensure the design system team operates smoothly, it's essential to have a detailed plan outlining all touchpoints and execution strategies. This enables the team to act effectively throughout their lifecycle, creating a continuous feedback loop as they support product teams.
