🚧 This project case study is currently being written, please request more information directly about this project.
Chameleon Design System
A white-label driven, scalable, native design system that serves the SmartHome+ app’s product teams.
Role
Design System Designer and Design System Lead
Team
2 Designers, 4+ Developers
Initial audits
+ interviews 🗣️
We interviewed designers, developers, product owners, previous design systems leads, and stakeholders to understand how the current system was integrated into product processes, assess pain points and gain an understanding in what they wanted from a design system.
Audits were also conducted to assess design files, components and code libraries.
Lack of clarity and confusion across teams
We noted confusion around the source of truth for components due to multiple libraries connections, siloed design decisions, undocumented variations, and components in final designs spread across multiple Figma files.
Lack of mutual understand around what the system was meant to be
During interviews we discovered the design system was built rapidly without direction, purpose and alignment with existing design systems at TELUS.
Static design decisions and hardcoded solutions
Designs were implemented as hardcoded components without the design token structure needed to establish strong foundations for theming.
Considerable drift between design intent and implementation
We uncovered noticeable inconsistencies in what is in final source of truth designed screens vs had been added to code libraries.
Next steps
After we conducted interviews and workshops, we collectively agreed establishing new design system made the most sense for the product teams. SH+ product teams needed a system that could support multiple brands and scale across platforms
Opportunities:
Design token structure established with alignment in utilization for design and development
Consolidation of pre-existing libraries (foundations and components)
Implementation of primitive, theme, and semantic design tokens
Clear design system architecture mapping
Migration of new design system across existing designed source of truth screens
Documentation best practices established to enable adoption, governance and contribution
Design tokens
Design tokens enable brand expression that scales.
In this example, we take TELUS’s primary brand color then apply it seamlessly across the app.
Foundations
The core of our design system not only includes color, typography, icons, border radii, elevation, and space within our Figma libraries as design tokens, but also our code libraries and the systems that support them.
Future: Motion
Components
Named reusable elements in a design that can be used in multiple contexts.
🏗️ We’re currently still working to implement our backlog of components.
Documentation, governance + adoption
Work dedicated to documenting components, technical details, processes, design tokens, governance and contribution.
Theme “white label”
Brand expression was a very critical ask, requiring original system (MDS) to be redesigned.
On the surface, “white label” just means reskinning the app’s colors and typography to match a brand’s look and feel, however, we plan to expand on this to include content and patterns in the future.
