Wabi
Wabi’s Design System: harmonizing digital delivery with precision.
Project overview
Navigating Wabi’s Design System: uniting expansion and efficiency
Enter the world of Wabi, an ecosystem under The Coca-Cola Company’s ownership, serving as a vital link connecting consumers with diverse establishments, from restaurants to small shops and warehouses. At its core lies Wabi’s dynamic Design System, a robust framework tailored to seize new expansion opportunities and harmonize Wabi’s multi-disciplinary teams.
CLIENT
The Coca-Cola Company
DATE
2022
01/ The challenge
As the Wabi design team expanded, challenges arose with Sketch as the primary design tool, particularly in collaboration. The growing file sizes and inconsistencies in design elements, despite sharing common components, necessitated a more efficient solution. Moreover, errors during library updates and syncing, prolonged update times, and slow synchronization with Zeplin for handoff compounded the issues. Component breakage upon library updates and limitations in color separation and typography alignment further hindered productivity.
02/ The solution
Benchmarking the shift to Figma: embracing collaborative creativity
Recognizing the limitations posed by Sketch, our team embarked on a quest for alternative solutions, meticulously benchmarking various design tools. After careful consideration, Figma emerged as the unanimous choice. Its web-based, collaborative platform not only offered enhanced performance but also seamlessly integrated design and handoff processes. Additionally, opting for Figma proved to be a more cost-effective solution compared to the combined expenses of Sketch and Zeplin for developer handoff. Furthermore, Figma was gaining traction as the predominant tool within the UX/UI industry. Despite Figma’s capability to import components from Sketch, the outcomes were suboptimal, prompting to embark on the task of redesigning each element from scratch.
Component audit: tackling inconsistencies head-on
The component audit was a meticulous examination that unveiled a multitude of inconsistencies and discrepancies. Going beyond surface-level observations, it delved into the intricacies of spacing, typography, and visual hierarchy. This depth of scrutiny ensured that the Minimal Viable Product (MVP) crafted from this audit was not just a cosmetic enhancement but a profound refinement that harmonized the visual language across the entire Wabi ecosystem.
Theory meets practice: backing decisions with research
Establishing a common design language and crafting a consistent nomenclature fostered clear communication and laid the foundation for seamless collaboration. Meticulous documentation and standardized handoff processes to the development team created a centralized repository, strengthening processes within the Wabi ecosystem. From adhering to color accessibility based on WCAG standards to crafting precise design grids and spacing systems, each element was meticulously backed by established principles.
Adopting the atomic design methodology
To construct the new design system, Wabi embraced the atomic design methodology as its foundation. This approach allowed for the creation of a modular system, with components organized into distinct levels of complexity. By breaking down design elements into smaller, reusable components, Wabi ensured scalability, consistency, and efficiency across its digital ecosystem.
Standardizing design language
Embarking on the journey of organizational efficiency, Wabi prioritized the establishment of a common design language. Crafting a consistent nomenclature for screens, components, and states fostered a shared understanding across the board. This unified language promoted clear communication and laid the foundation for seamless collaboration and increased efficiency.
Governance and documentation
Meticulous documentation of components, coupled with standardized handoff processes to the development team, added another layer of strength. This created a centralized repository that served as the backbone for streamlined processes within the Wabi ecosystem. With clarity and consistency in design, onboarding new team members became smoother, scalability for the design system was ensured, and maintenance, communication, and collaboration within Wabi’s multi-disciplinary teams were facilitated. Additionally, this standardization facilitated the implementation by the development team thanks to reusable code, further enhancing efficiency and productivity across the board.
03/ Wrap-up and results
Wabi’s venture into developing a Design System amplified efficiency, prioritized critical issues, set benchmarks for design excellence, and sparked a new wave of creativity. Beyond streamlining design processes, it fostered communication and collaboration, becoming an indispensable tool for maintaining a cohesive design language and evangelizing design standards across various departments.
This journey signifies not only a commitment to delivering impactful solutions but also a dedication to creating a culture where design is a shared language spoken by every facet of the organization.
Streamlined collaboration across teams
Improved communication and teamwork
Ongoing evolution of the DS to meet expanding business needs
x2
team productivity, optimizing workflows seamlessly