Wave Design System
Industries
Social Media
Travel
Tools
Figma
FigJam
Google Docs
Work
Strategy
Typography
Color Palette
Iconography
Tokens
Components
Documentation
Governance
Maintenance
Collaborator(s)
Head of Product
Chief Technology Officer
A Visual Language in Figma
The design system evolved into a visual narrative in Figma, characterized by a set of rules and guidelines that emphasized consistency and clarity.
Unveiling the Need for Consistency
The need for a design system became evident after initial product workflows were designed for Wave. A lack of consistency across the product experience prompted the exploration of a solution that could bridge gaps in workflow implementation.
The Discovery of Workflow Dissonance
A deep dive into UX research, stakeholder interviews, and contextual inquiries revealed a disconnect in workflow implementation, particularly between design and engineering teams.
Harmonizing Aesthetics with Function
The primary objective was to develop a design system that not only upheld aesthetic standards and product experience expectations, but also streamlined the interaction between engineering and design teams.
A 20% Leap in Productivity and Collaborative Cohesion
The project aimed for a 20% increase in productivity and improved designer-developer collaboration.
A Strategic Exploration of Cross-Functional Workflows
The approach involved a detective-like investigation into cross-functional workflows, identifying patterns for optimization and aligning them with stakeholder aspirations.
From Exploration to Implementation
Design Exploration: Balancing problem prioritization with stakeholder aspirations, leading to a series of deliberate and purposeful design decisions
Component Development: Collaborated with the CTO on a few components and independently designed many others in Figma, while the CTO handled the coding
Token Implementation: Personal management of tokens, ensuring their performance met the expectations of system consumers across various teams
The Blueprint Realized
The design system evolved into a visual narrative in Figma, characterized by a set of rules and guidelines that emphasized consistency and clarity.
Productivity Gains, Consistency and Evolving Collaboration
Post-launch evaluations indicated a significant increase in productivity, closely aligning with the 20% target. System consumers reported enhanced communication and collaboration. However, additional iterations were necessary to achieve consistent usage across all teams. Moreover, users noted the improved consistency throughout Wave workflows.
Key Insights: Necessity, Collaboration, and Foresight
The project underscored the importance of timing in recognizing the transition of a design system from a luxury to a necessity. It highlighted the value of collaboration, experimentation, and strategic foresight, framing the design system as a critical product component.