Scaling classic color tokens into logical color roles
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.
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.
Inconsistency could result in diminished brand recognition and usability, potentially impacting user satisfaction and engagement metrics.
.png)
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.
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.
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.
.png)
• 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.
.png)
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.
