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. 

DS.png

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.

Frame 2499.png

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

  1. Acquisition

  2. Activation

  3. Adoption

u8524151241_Create_an_illustration_with_floating_shapes_in_dr_858bd4f3-df70-463f-abcb-177e
u8524151241_httpss.mj.runjEDAPH8wlaY_Using_this_image_create__013d5601-fe0d-4777-8a9c-3c7a
u8524151241_httpss.mj.runjEDAPH8wlaY_Using_this_image_create__1c85c19e-f670-4f89-ba1f-002c

Laying the groundwork and discovering needs

1.0 ACQUISITION

u8524151241_Create_an_illustration_with_floating_shapes_in_dr_858bd4f3-df70-463f-abcb-177e

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

Xnip2024-09-02_16-01-33.jpg

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

Group 56.png

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

Xnip2024-09-02_16-18-10.jpg

Building and implementing the Design System

2.0 ACTIVATION

u8524151241_httpss.mj_edited.jpg

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

Colors.jpg

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

Xnip2024-09-02_19-27-57.jpg

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

Xnip2024-09-02_19-33-35.jpg
Xnip2024-09-02_19-32-36.jpg

Feedback guides all adjustments and strategies

3.0 ADOPTION

u8524151241_httpss.mj.runjEDAPH8wlaY_Using_this_image_create__1c85c19e-f670-4f89-ba1f-002c

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

Xnip2024-09-02_19-47-11.jpg

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

Analytics tab for a specific library.png

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

Group 57.png
bottom of page