Chameleon Design System
Role
Product Designer
Company
GoTo
Team composition
Product Designers
Software Engineers
Community Manager
Design System Manager
Director, Software Engineering
About Chameleon
The Chameleon Design System comprises foundations, components, blueprints, and guidelines designed to provide a consistent look and feel across GoTo's products. Chameleon consolidates the work of over 60 designers and 100 engineers, and supports 3 themes within the GoTo product portfolio, allowing teams to bring improvements, fast.
Project highlight - Button revamp
Complete overhaul of all button components in the design system
Problems with the existing components
Aesthetics - too much contrast, no reinforced brand identities
Discoverability - some buttons looked too similar to plain text
Importance - unclear hierarchy, as the variant naming did not match the visual weight
Inconsistency - variants of the same name, of different components, looked different
The mobile component library effort
We had an ongoing priority to bring our component library to mobile. We quickly realized that we did not want to carry over the aforementioned issues to mobile, so we needed a solution that would serve us moving forward.
Project scope
Create new visuals for our button components
Bring consistency to all component variants
Streamline the variant naming
Communicate all major milestones, and align with leadership teams
Release the new buttons in Figma, with the least amount of disruption to designers
Coordinate the release of the buttons in code, with the least amount of disruption to product engineering teams
Design critiques
Once we had the first version, we wanted to collect buy-in, make sure all design use-cases are covered - all members of the design organization were invited
Key insights
The general direction of the new visuals, and the variant naming structure, was liked by designers
Designers praised the consistency of different components, both in appearance and the added and deprecated variants
Concerns around some of the more neutral-looking buttons appearing as disabled
Colors seemed disconnected from each other, almost like they were not part of the same palette. This also resulted in unclear hierarchy in some cases
Technical improvements specific to how the component was built in Figma, were welcomed
Expanded scope - color palettes
Based on feedback from the design critiques, we added color palette adjustments to the initial scope
The new buttons
Old buttons
New buttons
Key to the project's success - communication structure
We set up a recurring meeting with key team members to discuss updates
Every milestone was communicated in advance, multiple times
The project's high-level timeline was laid out for all stakeholders to see