Versace Design System

Creating awareness of the value of design systems in a well-established company which does not allow for spending time on a project that, to their eyes, will be only useful for the designer. My mission is to change their mind and create a component library that demonstrates the power of such a system.

ROLE

Digital Brand & UX Designer

DESIGN AREA

Design System

GO LIVE

Jun 13th, 2025

I. target audience

This project aims at satisfying the needs of several target groups:

Designer

I get new design requests every week. Due to the constant tight deadline and no time allocation for creating a component library, I'm creating every component from scratch.

Designer

I get new design requests every week. Due to the constant tight deadline and no time allocation for creating a component library, I'm creating every component from scratch.

Designer

I get new design requests every week. Due to the constant tight deadline and no time allocation for creating a component library, I'm creating every component from scratch.

Developers

They miss a single source of truth. This results in inconsistencies and time loss for both me and them in asking clarification questions for inconsistent components or styles.

Developers

The dev team is missing a single source of truth. This results in inconsistencies and time loss for both me and them in asking clarification questions for inconsistent components or styles.

Developers

No single source of truth. This results in inconsistency and time loss for both me and them in asking questions for inconsistent components or styles.

Merchandising Team

Responsible for creating mockups of page refreshes, they use Figma at a very base-level. The use of a consistent layout is missing, sometimes they add screenshots to make things quicker.

Merchandising Team

Responsible for creating mockups of page refreshes, they use Figma at a very base-level. The use of a consistent layout is missing, sometimes they add screenshots to make things quicker.

Merchandising Team

They use Figma at a very base-level for page refreshes. The use of a consistent layout is missing, sometimes they add screenshots to make things quicker.

New Joiners

When new people will join the company, this project will save a bunch of time in the onboarding process, other than making their work easier, quicker, and more clear.

New Joiners

When new people will join the company, this project will save a bunch of time in the onboarding process, other than making their work easier, quicker, and more clear.

New Joiners

When new people will join the company, this project will save a bunch of time in the onboarding process, other than making their work easier, quicker, and more clear.

External Vendors

Collaborators ask for a style guide to refer to when they need to adjust or create pages or components handled via third parties. Currently, the workflow is quite unconvenient.

External Vendors

Collaborators ask for a style guide to refer to when they need to adjust or create pages or components handled via third parties. Currently, the workflow is quite unconvenient.

External Vendors

Collaborators ask for a style guide to refer to when they need to adjust or create pages or components handled via third parties. Currently, the workflow is quite unconvenient.

II. approach

Due to a lack of time allocation for this project, I had to use the smartest approach I could find. I started by laying down basic styles (tokens) in my "free" time at work. When a new request came, I started building basic and nested components to build what was needed. After delivery I took the new components and moved them into a tidy new file. I reached out to developers to understand how they structured their codebase from a tokens perspective, to make sure design and code are aligned.

Form Field Case

Request received to add a new checkbox to several touchpoints which were not yet existing in Figma. I exploited this request to map all the form fields variants and create the entire component set.

Form Field Case

Request received to add a new checkbox to several touchpoints which were not yet existing in Figma. I exploited this request to map all the form fields variants and create the entire component set.

III. design tokens

After having to change a single color on each form variation, I realized it was time to use design tokens: starting by a raw value (such as a HEX colour), this gets associated to a primitive token, which is the foundation for other tokens to build from. We also have semantic tokens, which give an indication of the general use of the token, and finally component-specific tokens.

IV. variables set

Components can now be easily tweaked based on the context needed, via toggles, dropdowns, and text fields for specific components. This makes error-proof also the work of non-designers inside the company.

V. accessibility check

Making each component accessible is a must. The reference when designing is the Web Content Accessibility Guidelines (WCAG2) and A11y. This way we make sure that we embrace inclusivity. We (and third parties services, too) perform constant accessiblity checks on color contrast, screen reader and keyboard accessibilty.

Colour Contrast

Keyboard Functionalities

Focus Element

Screen Reader

VI. delivery

After business and technical user story signoff, devs work begin. I delivered a Figma project file, with artboards divided for each story. This was a request from devs to facilitate the QA work. Once the developed component is ready we start testing it - Jira tickets are used for both bug reporting and user stories.

VII. metrics

KPIs are constantly monitored, even after releases. Here's the most interesting ones:

+75%

design speed

I can now complete design requests from any team at least 10x faster. This results in a huge business pace improvement, considering I'm the only designer.

-50%

development error rate

By developers. They do save a bunch of time since they do not spend time anymore in spotting inconsistencies and fixing them after something has deployed already.

+99%

satisfaction

Especially by Merchandisers, who stated to be impressed by how much time they can now save and by how easy it is to create pages now.

Next Project