After TeleClinic gained diverse partners with their own colors that needed to be integrated into the system, and facing the resulting contract requirements to strengthen accessibility and therefore include a Dark Mode version of the app, there was tremendous pressure for an expanded and stable color system. The color system at that time was pretty basic and not designed for such complex requirements. So the color system update was an intuitive decision for the brand. Adding three new partners with their own colors, implementing Dark Mode, and reducing the vibrancy of the current look turned out to be more complex than expected.

To maintain clarity among numerous requirements, we divided the process into several milestones—synthesizing, defining, creation, adaptation, and implementation—and worked with deadlines, particularly in the first two steps.

Synthesising: Observation of the Status Quo

After the initial implementation of the first color system and the shipping of new features, I identified what was working well or poorly and had the chance to collect the major problems of the color system: (1) Most components were not linked with the color variables. (2) In some cases the switch to the partner brand colors did not lead to a good result. Because most component where basically linked to the primary color of the brand – which did not work out in terms of accessibility. (3) Additionally, some colors linked to an even older color system that no longer existed, which led to an error. Afterwards, I gained an overview of the upcoming tasks by categorizing the changes into UI modifications with low implementation effort and UI modifications with high implementation effort.

Defining: Setting a Goal Amid the Chaos

Because I worked solely on the update, setting milestones was the best way to keep the team aligned and have clear goals. Even more importantly, whenever I got stuck or had doubts during the creation, these objectives helped me get back on track.
→ The end result should not feel like a rebrand. We had to address problems by finding solutions within the look-and-feel of the existing brand colors.
→ Creating a flexible color system that provides other mission teams the freedom to assign their preferred colors to components.
→ Creating an extended color palette with a broad selection of colors that allows flexibility in assigning colors to components. Each brand comes with its own color palette, where the primary color may not meet all requirements, such as accessibility, requiring the use of a darker shade.
→ Additionally, besides the light mode for TeleClinic and partner modes, we want to extend the color system to a dark mode for every brand.
→ Providing a documentation with rules and explanations for the colors and their usage, as well as a before-and-after representations of all screens where we made UI changes. This is essential to ensure a smooth implementation process on the development side.

Creation: From Theory to Tailored Multibrand System

Having categorised every screen in low-effort UI changes and hight-effort UI changes I got a clear idea what needed to be done; (1) expanding the color offering and (2) defining the structure of the color system.
→ Expanding the color offering: I fully immersed myself in color theories, HSL color universe, numerous online color tools and plugins, and exhaustively tested all the possible palettes.
→ Defining the structure of the color system: Besides that, I had to delve into the topic of building the best-fitting multibrand color system. This meant I had to go from knowing just enough about color systems to get by to becoming a color guru in just two weeks. A significant part of the process was iterating on the structure of the color system to determine what would be the best solution for TeleClinic.
The result is a color system based on a semantic color system that is consistent in its structure while still giving other teams the flexibility in assigning colors to components.

Adaption: Celebrating the Fabulous new Color System

The color palette was born of a dynamic partnership between the product manager and me, the product designer. Getting the thumbs up from the whole growth team was an important milestone in this project. Now the focus was on effectively communicating the value of the new color system through documentation that includes rules and explanations for color usage, as well as preparing a design file with all screens where we made UI changes, showcasing both the old and new designs.

Implementation: Riding Towards the Finish Line

Implementing new color throughout various screens can feel daunting. For the implementation in the web app experience, I collaborated with the frontend devs on a roll-out plan with tickets that involves, depending on the complexity of a screen, either a component-by-component redesign or a screen-by-screen redesign.
Our new palette improves visual accessibility and supports switching between color modes, from TeleClinic to various partner brands and dark mode. Additionally, it provides other mission teams and designers the flexibility they need for exploration. Looking back on the extensive amount of time and effort I invested, I brought a maturity to our brand and product.

Each color in light mode has a corresponding color in dark mode, and the standard brand colors can also be replaced with partner colors. For the TeleClinic web app, we’ve defined a unique approach: in multiple surfaces, we use variations of our primary brand color to strengthen TeleClinic’s identity. In contrast, for partner brands, we mainly use shades of grey on surfaces and backgrounds.