Advocating for the design system
Context
In the three months after establishing the foundational elements, we expanded the design system with new components, primarily for mobile features. As a result, the system gained early adoption among the mobile development team but adoption on the web platform was still limited.
My approach
When web tasks resumed, I saw an opportunity to advocate for adopting the design system for web. I prepared a concise 10-slide presentation highlighting the system’s philosophy, foundations, and proven benefits on mobile. To ensure alignment, I invited web developers, mobile developers, and product managers to join the discussion.
Outcome
The response was largely positive, especially from developers, who saw the immediate benefits. While product management initially expressed concern about the time investment considering the technical debt on web, they understood the long-term advantages and agreed to continue the effort.
Key points from the presentation
This quick presentation focused on what we could achieve and how to make it happen.
Ensuring consistency of text styles
I used typography as an easy-to-understand example to introduce the concept of thinking in terms of "roles" rather than static variables. Developers immediately appreciated the practical benefits of this approach, as it streamlined text styles management and improved consistency.
Text styles applied to a mobile page layout
Fixing contrast issues for better readability
Scores, one of our most widely used user interface elements, were displayed using a color scale that caused contrast issues. Most of them failed to meet WCAG minimum contrast ratio for regular text (4.5:1), making them difficult to read.
I showed how leveraging color roles could not only resolve such contrast problems but also allow flexibility for a dark mode by differentiating text from containers colors.
Example of updated color roles on the score component to improve readability and accessibility
Unlocking flexibility with color tokens
Dark mode, though not a priority, served as an inspiring example to highlight the flexibility of design tokens. I demonstrated how tokens could simplify the implementation of light and dark themes, showcasing the possibilities beyond constraints. This resonated with the team, demonstrating how the design system could support features that previously seemed unattainable.
Interestingly, mentioning dark mode sparked significant enthusiasm across the team, further motivating everyone to support the initiative. This unintended outcome worked to the design system’s advantage and reinforced the team’s commitment to the project.
Design tokens example with light and dark mode usage on player cards
Saving time and ensuring consistency with reusable components
Buttons were the perfect example to introduce the principles of atomic design. The web app lacked button consistency, making them an obvious candidate for improvement. I explained how thinking of components as building blocks could save time, ensure consistency, and reduce technical debt. A link to Brad Frost’s article on atomic design was included for anyone curious to explore further.
Button component styles and states