Transforming Experience
for 600+ Million Users

Bringing together four companies under a unified design system presents a unique challenge. They share the same product foundation and common functions, each tailored to match their distinct brand identities. By consolidating six separate design systems into one framework, we aimed to eliminate inconsistencies and provide users with a cohesive experience.

A key part of this process was refining the color palette for each company, ensuring that every color not only matched the brand identity but also adhered to accessibility standards. Additionally, standardizing font combinations was crucial, as each company required its own set of fonts to ensure consistency and readability. This effort was essential for enhancing usability for all users. This collaborative project ultimately improved consistency, user satisfaction, and trust while streamlining development processes and increasing efficiency across all companies involved.

To grasp the functionalities and future needs of each product, I analyzed them and consulted all stakeholders, including team members. This effort resulted in a comprehensive list of components essential for transitioning to the new design system, aligning with current and future product plans.

To manage the extensive component list, I categorized them into sections like Actions, Dialogues, Inputs, Loading, Navigation, and Widgets. This organization streamlined the design system, simplifying navigation and component implementation across various products.

During this process, I collaborated with the Brand Design team to refresh the outdated illustrations, giving each company a distinct and modern look. It was the perfect opportunity for an overhaul, enhancing the overall aesthetic and strengthening brand identity to make the product more visually engaging and cohesive.

I developed a highly manageable and scalable system in Figma using its latest feature, variables, similar to classes in development. Learning from best practices, I established naming conventions and a master plan for variable usage, ensuring flexibility and ease of maintenance. Additionally, I created themes for each company, reducing component sets from 50 to 10, streamlining system organization.

The main challenge was ensuring designer-friendly usage, which required proactive engagement with designers to address their pain points. By incorporating default options like frequently used icons, I saved time and eliminated the need to search for common elements. This optimized system significantly sped up the design process, allowing designers to quickly assemble screens with up-to-date, consistent components.

Creating thorough developer documentation was vital for integrating our design system seamlessly into the codebase. This detailed guide covered all implementation aspects and minimized uncertainty by addressing potential edge cases. To further enhance collaboration, we used Storybook as a tool for documenting UI components, making them easily accessible for both designers and developers. The use of Figma's variables aligned with developers' coding structure, simplifying the transition from design to development.

Regular meetings with the development team ensured prompt resolution of any questions or concerns, fostering clarity and collaboration. By leveraging these tools and communication methods, we ensured the system’s successful implementation across all teams.