All my favourite colors
All my favourite colors
All my favourite colors
All my favourite colors
All my favourite colors
DESIGN SYSTEM - TOOL for CHANGE
DESIGN SYSTEM - TOOL for CHANGE
DESIGN SYSTEM - TOOL for CHANGE
DESIGN SYSTEM - TOOL for CHANGE
DESIGN SYSTEM - TOOL for CHANGE
We all perceive colors differently, and we often forget about it when working together. We communicate using standardised language. But what if our collaborative process include a question of how the colors feel rather than what they look like? I became to shift my approach when working on translating brand language into product space.
We all perceive colors differently, and we often forget about it when working together. We communicate using standardised language. But what if our collaborative process include a question of how the colors feel rather than what they look like? I became to shift my approach when working on translating brand language to product space.
We all perceive colors differently, and we often forget about it when working together. We communicate using standardised language. But what if our collaborative process include a question of how the colors feel rather than what they look like? I became to shift my approach when working and translating brand language to product space.
We all perceive colors differently, and we often forget about it when working together. We communicate using standardised language. But what if our collaborative process include a question of how the colors feel rather than what they look like? I became to shift my approach when working and translating brand language to product space.
We all perceive colors differently, and we often forget about it when working together. We communicate using standardised language. But what if our collaborative process include a question of how the colors feel rather than what they look like? I became to shift my approach when working on translating brand language to product space.
01.
01.
Context first.
Reviewing Design System - After joining PowerUs in 2024 I took a lead on Schaltschrank Design System, with purpose to maintain it, evolve it, and enable to become a powerful tool used for product transformations. In order to map the next journey I quickly jumped to identify its current state, mapped weaknesses and potential opportunities. To direct the work I documented all into structured backlog prioritised based on the impact.
Between Brand and Product - Before I joined, PowerUs worked on brand refresh focusing on clarifying brand personality and positioning, introduction of the new font and illustrations, and giving colors suggestions. Marketing designers implemented landing pages and doc slides that offered brand experience for B2B and B2C. However in the product space new brand expression hasn't been adopted. Sadly proposed colors didn't scale and were insufficent in order to inherit them in product as well as didn't pass accessibility requirements.
02. Problem space.
02. Problem space.
First step to understanding - curiosity.
Noticing the gaps and future potential (for the business and the team), together with the head of design we prioritized focusing on the most alarming area within the visual language → colors system.
Identifying needs, discovering the landscape
Through interviews and team activities I gathered and categorized feedback around current pain points, evaluated and audited system in relation to established design tokens, reviewed existing brand guidelines and marked missing parts. I checked competitive lanscape in relation to the business and brand expression, and led a design discovery by creating moodboard in the jam board. All of this to draw a clear picture of the current problem, and identify needs to focus on when moving forward.
Realistic expectations, vision alignment
I aligned expectations, defined the scope, highlighted objectives, so everyone could be on the same page. Within this design system initiative it was important to:
→ create a continues visual journey when navigating from marketing space to product
→ offer more flexibility to our designers for visual expression while keeping brand feel on point
→ improve color contrast in order to follow AA accessibility standard
→ strengthen architecture of our tokens to obtain scalable design system experience
03. Strategy.
03. Strategy.
03. Strategy.
Full potential of the system.
Design System as a tool
Design System as a tool
Design System as a tool
To efficiently and effectively organise my work I decided to use our system in order to explore and test potential directions. As we were debating a color change for our buttons, I decided to use a copy of our Foundations and Components Libraries in Figma as a working base to easily monitor the changes at scale and in context. I used colors variables system by addeding extra "themes" which helped to explore directions.
Work streams
Work streams
Work streams
I organised my work into different topics and kept evolving them in pararell. All were related to each other, and provided me with the answers to move forward.
01. Auditing components in relation to colors. → 02. Reviewing and finializing colors sets. → 03. Reviewing and rebuilding tokens structure. → 04. Exploring and testing visual direction.
Plugins to empower process
Plugins to empower process
Palettes - When exploring color palettes I used a plugin to generate tones and hues based on the values suggested in the brand guidelines. This allowed me to check, how we can group colors especially when it came to the blue tones, and if any colors require adjustment. Via plugin I also explored various ranges of tinted greys to offer more attractive and cohesive visual direction.
Accessibility as a priority - Using Contrast plugin came in hand to continuesly track if the values we use and set in tokens comply with WCAG guidelines. Additionally I used a plugin to check visual perception depending on different type of vision impairment.
A-ha moment.
Colorblind secret power.
During my explorations I started to use Color Blind Simulator, so I could better understand how the colors are being perceived depending on different type of vision impairment, to see how brand direction will present. My intention was to empathize with one of my key stakeholders. He openly talked with me about his color-blindness and while collaborating with him I wanted to communicate effectively, reflecting on how the colors feel. By approaching this different way of working suddenly color-blindness become a secret power that helped us discover a new decorative tone of teal that instantly became an impactful addition. While the vibrant teal didn't completely fit the business, toned version (silver), that came out of the simulator, fitted perfectly.
04. Explorations.
04. Explorations.
04. Explorations.
Indigo is the new Orange.
1, 2, 3 ... direction
1, 2, 3 ... direction
PowerUs platform relys on numerous primary and secondary actions in order to navigate and interact with the product. Orange used on actions didn't pass AA contrast ratio. Therefore focusing on buttons direction became the main topic around which I set explorations of 3 different directions. The goal was to lead us to various results in brand expression, offering different type of flexiblity. I focused on accessible orange (1), indigo-blue (2) and more neutral set up with tinted grey (3). While exploring these three directions I looked into complementary colors that would provide the decorative functionality requested by designers. Setting variables in 3 different themes allowed me to quickly render and test the look directly in designer's frames. This also allowed me to test in terms of any weaknesses in design system.
Feedback rounds
Feedback rounds
Jam crits & testing
To start narrowing my explorations I would organise different ways of gathering feedback and testing. During our weekly Crit design team would provide me with feedback on all 3 directions, from which we narrowed to 2 explorations (indigo & orange). I would work closely with marketing designers to test complementary colors for backgrounds to create hierarchy and contrast. It was important that the colors we pick work both for brand and product. In addition when narrowing to 1 direction (indigo), I also tested new direction together with product designers working on the new navigation IA (information architecture).
Fresh eyes
In the exercise called Fresh eyes - I asked designers to take a fresh look at 2 established directions before we made the call with the head of design which one we sign off. In this feedback session I asked them to apart from curated feedback, assign brand personality and brand positioning post it notes to designs which expressed it. Indigo-buttons become the new orange.
Results
Results
Results
Proportion of how we use orange and indigo changed, orange became more of an accent colour that brings power, indigo - a stable business runner. Complementary colors such as blue, beige, silver, violet became decorative to allow designers flexibility for hierarchy, contrast, and playfulness. Blue-tined grey aligned with the temperature and tonality of the brand. Translation to product and improvement of color palettes brought fresh air and modern look into the product, inspiration and hope for marketing and product designers.
→Improved accessibility. →Elevated information hierarchy. →Raised design satisfaction and improved workflow. →Connected and elevated brand experience from marketing to product.
05. System.
Improving beyond.
Design tokens structure
Design tokens structure
Design tokens structure
After I joined the company, I quickly noticed that current tokens structure wasn't scalacle in how it was architected and named. During colors audit I marked places for improvement, during testing of new direction the gaps in the colors tokens showed up. I came up with better organised structure grouped into primitives, semantic and component specific tokens. I suggested standardised framework for naming to adopt. In order to expand flexibility of the system and future thinking in relation to themes (e.g. dark/light; B2C/B2B) I suggested expanding to component specific tokens for a few component groups that would directly pull from primitives.
Components architecture
Components architecture
Border radius - translation into the new visual language didn't only limit to colors, I also proposed suggestion to apply few changes to the use of broder radius. In the current proposal most of the components pulled the same radius token. Smoothening corners on buttons and tags diversified and modernised overall visual experience, aligning it with brand positioning (friendly, energetic, slightly informal).
Buttons architecture - beyond colors switch and accessibility boost, I also looked into the current architecture, marking opportunities to narrow the amount of variants created, refactor current usage and guidelines, and overall simplifying consumption and maintenance of the button component.
Tags grouping - while investigating colors, tags were playing crucial role in understanding the use of decorative backgrounds. Noticing misuse of available tags, I began to investigate their role in the interface, user needs, resulting in finding accurate categorisation. All with the goal in mind to create clarity and information hierarchy.
Next steps.
Towards release.
Within 4 weeks I was able to go from discovery to design exploration, through testing in design space and getting the sign off for the final direction.
In B2C part of the product we had 90% of design system adoption, in B2B we were going through refactoring, therefore next to focus on when going with the new visual language release was:
As the company went through major restructuing due to economic difficulty, budget for Design System role has been cut off, and so the initiative I was taking care of stopped at this stage. To make sure my efforts were not wasted, Head of Design did his best to push some of the work into production couple months later.
Interested to read more? Find out about my journey to create a design system → On the road to Flora
Or learnings when leading → Nudging a Culture
© 2025 mauthewild.com | All rights reserved.
© 2025 mauthewild.com | All rights reserved.
© 2025 mauthewild.com | All rights reserved.
© 2025 mauthewild.com | All rights reserved.
© 2025 mauthewild.com | All rights reserved.