Info
Role
Product Designer
Timeline
3 weeks
Focus
Design Systems, Accessibility, Brand Alignment
Platforms
Web applications
Team
Product Owner
Project Manager
Tech Lead
Developers
(Back/Front - End, QAs)
Context
The Project
During my tenure at Deloitte Design System team, I was tasked with solving a critical design challenge that was impacting our entire product ecosystem.
Our diverse portfolio of applications suffered from inconsistent colour usage, accessibility issues, and a little disconnect from Deloitte's brand identity.
What started as a colour audit evolved into a comprehensive design system transformation that would redefine how our teams approach visual design across all platforms.
"How might we create a colour system that scales with our growing product portfolio while maintaining accessibility and brand integrity?"
Outcome
The redesigned colour system established a scalable, accessible foundation that reduced design decision fatigue by 70%, improved WCAG compliance across all platforms, and created a unified visual language that strengthened brand consistency while empowering teams to build faster and more cohesively.
UI Audit
This example illustrates how platforms were being shipped without proper design system foundations, resulting in interfaces that may function but fail to provide optimal user experience or brand consistency. The lack of systematic colour guidelines creates maintenance challenges and inconsistent user interactions across the platform.
(D)
Existing colour palette
The existing colour system shown here represented Deloitte's official brand palette, carefully developed by their branding team for traditional marketing and print applications. This comprehensive palette included over 40 colour variations organised into primary, secondary, and tertiary categories, each with specific hex values and naming conventions.
Part One:
Uncovering the chaos
1.1 The Challenge Revealed
I began this project by conducting a comprehensive audit of our existing applications. What I discovered was more complex than anticipated: our teams were struggling with an overwhelming palette of colours that lacked structure, purpose, or accessibility guidelines. The existing system, originally designed for print materials, simply wasn't meeting the needs of our digital-first product environment.
1.2 Understanding Current Behaviour
How are teams currently using our colour system?
Designers were making ad-hoc colour decisions due to unclear guidance
Developers were implementing inconsistent colour values across platforms
Brand colours were being misused or ignored entirely
Accessibility requirements were often overlooked during implementation
1.3 Identifying User Pain Points
Through interviews with 10 designers and 5 developers, several critical issues emerged:
Designer Frustrations:
Developers Frustrations:
These pain points highlighted a fundamental issue: our colour system was creating barriers rather than enabling efficient, accessible design and development.
The feedback demonstrated an urgent need for a more structured, semantic approach that would serve both design creativity and development efficiency while prioritising accessibility from the ground up.
1.4 The Decision Point
While the team initially leaned toward Option 3 (Focus solely on accessibility compliance) — it felt like the safer, more manageable route — most agreed that Option 2 (Complete system redesign with token-based architecture) would be a more comprehensive approach and would allow for saving on deployment time shortly.
Our research showed that surface-level fixes wouldn’t solve the underlying issues causing design inconsistencies and slowing us down. With the team's backing, we chose to invest in a more strategic solution that addressed the root causes.
It wasn’t just about accessibility compliance—it was about improving team velocity, reducing design debt, and building a scalable, future-proof system.
Part Three:
Designing the Solution
3.1 Key Feature 1 - Semantic Colour Roles
The biggest breakthrough was establishing a rule of 100 that redefined colours with clear semantic roles. Expanding the spectrum of existing colours provided flexibility when choosing and forming colour groups, and instead of arbitrary names, each colour now served a specific purpose:
Primary Colours: Core brand colours for key actions and brand moments
Secondary Colours: Alert colours. Success, warning, error, and information states
Neutral Colours: Typography, backgrounds, and structural elements
Data Visualisation Colours: Specially curated palette for charts and graphs
3.3 Key Feature 3 - Theme Flexibility
The new system supported multiple built-in themes, allowing for:
Light and dark mode compatibility
High contrast options for accessibility
Brand-specific themes for different product lines
(F)
The appropriate use of certain colours in the design system was critical in making data visualisation successful by ensuring adequate contrast from primary colour groups, limiting single-colour usage per chart to maintain brand consistency, and applying semantic colour meaning across different chart types for intuitive user comprehension.
Part Four:
Validation and Testing
4.1 Focus Group Insights
After developing the initial system, I conducted focus groups with both designers and developers to gather feedback on the proposed changes.
Testing Objectives:
Evaluate the intuitiveness of the new token naming system
Assess the effectiveness of accessibility improvements
Validate that the system met diverse workflow needs
Identify any remaining pain points or friction areas
4.2 What the Teams Said
4.3 Iterative Refinements
Based on feedback, I made several key adjustments:
Enhanced Documentation: Created comprehensive usage guidelines with real-world examples
Migration Support: Facilitate meetings and workload to help teams transition existing projects gradually
Training Materials: Built workshops to help teams understand and adopt the new system
Part Five
5.1 Rollout Strategy
The implementation was carefully orchestrated across three phases:
Phase 1: Documentation and training for design and development teams
Phase 2: Implementation in new projects and major updates
Phase 3: Gradual migration of existing applications
5.2 Measuring Success
In the first 2 months after rolling out the new colour system.
Quantitative Results:
70% reduction in colour-related design decisions during project work
100% WCAG AA compliance across all new implementations
60% faster developer implementation of colour changes
40% reduction in colour-related bug reports
Qualitative Improvements:
Increased confidence in design decisions
Stronger brand consistency across all touch-points
Improved collaboration between design and development teams
Better accessibility outcomes for end users
5.3 Long-term Impact
The new colour system became the foundation for broader design system improvements, enabling:
Faster onboarding of new team members
More efficient cross-team collaboration
Stronger brand presence in the market
Better user experiences across all applications
Key Learnings
This project reinforced several important principles about design systems work:
1. Systems thinking requires deep user empathy - Understanding the needs of internal users (designers and developers) was just as important as considering end-user needs.
2. Accessibility isn't optional - Building accessibility into the foundation of the system was far more effective than trying to retrofit it later.
3. Change management is design work - The success of a design system depends heavily on adoption, which requires careful attention to communication, training, and transition planning.
4. Collaboration amplifies impact - Working closely with brand, engineering, and product teams created better outcomes than working in isolation.
Through this project, I learned that effective design systems aren't just about creating beautiful, consistent interfaces—they're about empowering teams to work more efficiently while ensuring that every user interaction reflects both usability best practices and brand values.
The true measure of success wasn't just in the visual improvements, but in how the system enabled better collaboration and more inclusive user experiences across our entire product ecosystem.
