Design System

Product Designer & UI Developer

About the project

At Valtech, I had the opportunity to lead the creation of a Design System from scratch for a pharmaceutical client...

Objective

Improve the designer experience by creating a more user-friendly and modern system...

Users 14 designers and more than 30 developers
Technology platforms Figma, Angular, React
Components and patterns 50+ components and patterns
Design token system We utilize a comprehensive design token system that includes over 70 styles: color, typography, spacing, radius.
Documentation In Figma for designers and Storybook for developers.

Design process

01. Discovery Phase

The first phase of creating the design system was the Discovery Phase...

02. Workflow planification

The digital product we were working on already had a component library in Figma...

  • Colors
  • Typography
  • Grids
  • Spacing
  • Icons
  • Elevations

During this phase we also decided how to work with Tokens...

03. Components creation

The third phase of the design system creation focused on the actual development of components...

  • Button
  • Toggles
  • Chips
  • Card
Button components
The Button components were one of the components release in the first MVP

04. Socialization

During our weekly meetings, the design team officially introduced new components...

Additionally, I led bi-weekly meetings with engineers to discuss updates...

Outcomes

The design system, has played a crucial role in ensuring the pharmaceutical meets regulatory...

Also, we improved visual consistency across different project products...

Future of the Design System

The design system is continuously evolving. Future efforts will concentrate on supporting additional product areas and integrating more themes.