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.

improvements tracker

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.

the before 2

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.

needs feedback
define_scope
discovery orange

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.

tactic for changes

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.

workstreams_4

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.

plugins

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.

colorlind power2
colorlind power-deco

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.

3 directions proposal_2

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.

feedback_2

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.

directions results 3

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.

design tokens

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.

buttons and tags3

Next steps.

Towards release.

timeline

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:

  • testing product space in isolated testing environment to gather the insights on visual impact and roadblocks
  • re-set tokens structure and roll it out into our system
  • program adoption strategy and create adoption guidelines
  • prioritise systen improvements which were discovered during explorations (beyond the scope opportunities).

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.