top of page
Product Designer
CASE STUDY
Strategic Approaches to Launching & Scaling a Design System
VERO is implementing a scalable design system to accelerate product development. The lack of a centralized design system has led to inconsistent designs, inefficiencies, and increased maintenance efforts.
*Building a design system should be an ongoing, evolving process that is never fully complete.
A lack of cohesive design
THE PROBLEM
The design at VERO was executed to facilitate one-off fast development instead of being a cornerstone of ensuring quality user experience.
Not having a centralized design system has impacted both product quality and the speed of development.
Launching a Design System
While working on design projects, we realized starting from scratch each time was inefficient. New engineers struggled to onboard with the wide range of components, and a basic library couldn't handle the product's complexity. It was time to implement a more comprehensive Design System.
Building a Design System
-
Acquisition
-
Activation
-
Adoption
Laying the groundwork and discovering needs
1.0 ACQUISITION
A quick collaborative search
1.1 INVENTORY FILE
I began by gathering all the existing UI components and organizing them into an inventory file, which, in this case, was a Google Drive folder.
This collaborative effort involved product, engineering, and marketing team members to collect buttons, forms, icons, color palettes, typography, and layout grids. I then organized the collected components into a detailed list, including their variations and usage locations.
ACQUISITION
Analyze and review what already exists
1.2 DESIGN AUDIT
During the design audit, I review existing design elements and UI components across products for consistency, usability, and adherence to brand guidelines. This process helps me identify inconsistencies and design gaps, laying the foundation for creating a cohesive design system.
ACQUISITION
Lay the foundations for the future of design
1.3 DESIGN PRINCIPLES
The design principles step involves defining the core guidelines shaping the overall design system. These foundational beliefs inform every design decision. This collaborative effort focuses on the goals and general feel of the platform.
ACQUISITION
Building and implementing the Design System
2.0 ACTIVATION
Defining the key elements
2.1 VISUAL LANGUAGE
In the visual language step, I establish a consistent visual identity for all products within the design system. This involves defining key elements like color palettes, typography, iconography, spacing, and imagery styles to create a cohesive visual language.
This ensures that design elements work harmoniously, reflect the brand's personality, and provide clear guidelines for maintaining visual consistency across platforms.
ACTIVATION
Atomic design makes the design system scalable
2.2 DESIGN TOKENS
The design tokens step involves creating standardized variables representing fundamental design decisions such as colors, typography, spacing, and shadows. These tokens ensure consistency and scalability across different platforms and devices, allowing seamless implementation of design elements in code.
ACTIVATION
Libraries make the Design System usable
2.3 COMPONENT LIBRARY
DESIGN / DEV
The component libraries step involves creating a comprehensive collection of reusable UI components.
In Figma, these components ensure they are visually aligned with the design system's principles and visual language. In Storybook, these components are developed, tested, and documented in code, where designers and developers can explore and implement them.
ACTIVATION
Feedback guides all adjustments and strategies
3.0 ADOPTION
Teach and promote the new Design System
3.1 DOCUMENTATION
The documentation step is essential for teaching and promoting the design system, using ZeroHeight as a comprehensive guide that explains how to use the system effectively. This involves creating clear, detailed instructions, best practices, and examples for each component, pattern, and design token.
ADOPTION
Quality and optimization
LEARNINGS & NEXT STEPS
The next steps for our design system involve continually improving component libraries, updating design tokens and visual elements, enhancing documentation, streamlining processes, implementing testing methods, and promoting continuous improvement through feedback and monitoring metrics.
Consistent Designs
Design time decreased by almost 50% on standard project tickets.
Faster Development
Front-end dev time decreased by 30%, due to reusable and standardized code
Improved UX
Increased consistency resulted in a smoother, more cohesive UX.
Stakeholder Expectations
Improved stakeholder alignment, project predictability and expectations.
Measure and analyze the Design Sytem's use
3.2 METRICS
The metrics step involves defining and tracking key performance indicators (KPIs) to measure the effectiveness and impact of the design system, including monitoring factors such as speed of design and development, UI consistency, and user satisfaction.
ADOPTION
Engineers and designers are the users
3.3 FEEDBACK LOOPS
The feedback loop step is essential for maintaining and evolving a design system. It involves setting up continuous channels for gathering input from users, designers, and developers. This process promotes collaboration and openness, and regular feedback ensures the design system stays relevant, effective, and aligned with user needs and organizational goals.
ADOPTION
bottom of page