Advancing the Chameleon Design System:
My Key Contributions
Following LogMeIn’s acquisition of Jive, I played a key role in the creation and evolution of the Chameleon design system. This initiative aimed to harmonize user interfaces and improve the coherence of LogMeIn’s products. Below is a summary of my major contributions and the impacts of my work.
Note: Several DS named "Chameleon Design System" or “Chameleon” can be found online. The one used at Goto is an internal system and is not connected to those other products found on the web.
Initial state and diagnosis
Upon joining, I identified several inconsistencies between the interfaces of Jive and GoTo products. Each product had its own distinct look and feel (E.g.: use of different fonts like Proxima Nova for Jive, Lato for GoToMeeting) and different approaches to colors, proportions, and interface elements. This fragmentation was exacerbated by parallel initiatives, such as reusable elements for the older version of GoToWebinar, which were oversized and lacked refinement.
2. Platform harmonization
I advocated for interface adaptability across different operating systems (Windows, Mac, iOS, Android). This included recommendations for navigation patterns, native typography (SF for Mac, Segoe UI for Windows), and notifications aligned with platform conventions.
3. Managing technological conflicts
I navigated internal divisions, notably the conflict between teams using Web Components and those favoring ChakraUI. I advocated for universal adoption of Web Components, aligning with trends in modern design systems.
4. “Kickstarting” work
Faced with initial resistance, my colleague Lucas and I worked autonomously to develop a comprehensive package of foundational components. This effort accelerated Chameleon’s implementation by addressing bottlenecks related to the lack of available components.
Major initiatives
1. Defining design standards
I contributed to establishing the foundations of Chameleon by proposing:
Typography sizes organized into functional styles (headings, body text, captions) rather than simple dimensions.
A standardized color palette with sufficient contrast for interactive elements, avoiding neutral or pastel tones that lacked impact.
A hierarchy of component scales to avoid excessive proportions.
Although common practice today, using t-shirt sizes and type functions was a forward-thinking approach in 2019.
To some, it was unimaginable that an H2 title could be displayed smaller than an H3 if dictated by the DOM hierarchy logic and the visual hierarchy goals.
To initiate the development process, I worked on providing engineers with designs for various elements in multiple sizes and states, including buttons, avatars, chips and checkboxes, and around 20 other element types. Over time, the system evolved, supported by the formation of a dedicated and robust team.
Product impact
Interface unification
GoToConnect: I introduced video conferencing in a simplified interface, including concepts like TheaterMode and minimized calls, which served as precursors to the softphone.
Contact Center: I revised implementations to align the product with Chameleon, improving component usage.
Technical and aesthetic improvements
I introduced tokens to enable theming (e.g., Dark Mode) and enhance flexibility.
I standardized components to reduce technical debt and enable faster evolutions.
Lessons learned and recommendations
Challenges faced
Organizational and cultural resistance to adopting a unified design system.
Difficulties in enforcing Chameleon as a requirement, leading to inconsistencies.
Limitations from incomplete adoption of components in existing products.
Recommendations for the future
Strengthen the culture of contributing to the design system, valuing the addition of new variants and components.
Publish a public version of Chameleon to establish a reputation for dynamism and innovation.
Revise the design system’s look and feel to achieve a world-class aesthetic while balancing accessibility with visual refinement.
Conclusion
I made essential contributions to Chameleon by introducing functional standards, harmonizing platforms, and navigating a complex organizational environment. My work laid the foundation for a design system capable of supporting the future evolution of LogMeIn’s products.