Mural

Scaling classic color tokens into logical color roles

2023
Product Design (Design Systems) - Color Tokens
Problem
The absence of clear guidance on color application and logical naming structure resulted in confusion and inconsistency across the product, particularly within the canvas area, specifically hindering scalability with components.
Outcome
Narrowing down the number of color palettes into fewer, more defined color roles improved consistency, ensuring components maintained specific styles based on usage.

Overview

Mural

is a leading digital whiteboard platform, underwent a redesign to lay the foundations for updating its design system. This initiative aimed to align with the company's evolving vision and better serve its expanding user base.

Key Deliverables
Component Building, Scalability Strategy, Documentation, Education, Adoption, Customer Support, Engineering Across the Product Ecosystem
Roles
Product Designer (Me), Dan Rigby (DS Product Design Manager), Andrea Mendis (DS Lead Product Designer), Liz Byrne (Staff/Architect-Engineer)

Understanding the Problem

Constraints

Constraints surfaced during interviews with members of the Canvas Core team, and subsequent research corroborated these findings.

Inconsistent Nomenclature

The lack of logical naming conventions for colors, led to inconsistency and confusion, hindering a deep understanding of how to effectively use colors in alignment with their intended usage.

Excessive Number of Colors

The excessive quantity of colors caused confusion in visual hierarchy, especially with states. Not to mention the unnecessary time spent on maintenance, thus impacting workflow efficiency.

Absence of Clear Guidelines

The lack of clear guidelines regarding proper color application caused confusion and misuse, resulting in inconsistency and negatively impacting design decisions.

Problems with Scalability

The inability to seamlessly integrate colors beyond the canvas area and incorporate them into the broader design system ecosystem resulted in scalability and coherence challenges across different components and interfaces, impeding the overall design.

Hypothesis

Inconsistency could result in diminished brand recognition and usability, potentially impacting user satisfaction and engagement metrics.

Process Overview

Although there was a standard component creation process in place, it was crucial to maintain a high-level perspective on the overall impact of how colors would scale throughout the entire product.

Mural

Design Efforts

Iterations

Guidelines clean-up, token naming restructuring, and accessibility reassess were pertinent as part of when scaling color tokens from the classic rebrand colors to the new color roles.

No items found.

Impact

Solution

Build clear guidelines based on sound logical naming conventions that align with usage and functionality. Make collaborative efforts to gain further insight on uses cases across teams to reduce color quantity, enhancing scalability, mitigate confusion in color application, ensuring colors and their varied shades adhere to accessibility standards.

Retrospective

Key Learnings

• A critical aspect of this project was fostering a strong collaborative relationship between designers and engineers, which played a pivotal role in establishing consistent design standards across the board. Building a healthy relationship with engineers pushed the vision of the rebrand forward.

• Leveraging service and customer support channels to build rapport and establish strong adoption through educational efforts solidified best practices.

• Although there was some potential overlap with color roles, colors should never be mistaken for the comprehensive brand color palettes.

Mural
Reflections

The timely launch of the component library and the design system team's educational efforts highlighted the value of collaboration and efficient communication. Through cross-collaboration, teams addressed common pain points and achieved consistency, resulting in accelerated outcomes and enhanced productivity.