soniq Design System

Érica Menin

Product Designer
Design Systems
UI Designer
Figma
Storybook
SoniQ

Project Goal

Create a comprehensive design system.

Enhance Soniq's internal processes.

My Role & Team

Design System Lead.

I collaborated with the Product Design Lead, 4 UX Designers, and 3 Developer teams.

Deliverables

Comprehensive Figma library file for design work, including visual language, components, and design patterns.

Detailed documentation referring to usage, anatomy of components, and best practices for the design system.

Results

Bridging the gap between design and development: Communication and collaboration reached new heights! Now, design and dev teams are on the same page, working together like never before. 🚀

Empowered designers: With our super easy-to-use library of pre-built components, designers are saving valuable time on their tasks and can focus on other crucial design aspects, such as creating exceptional user experiences.

Consistency and time saving: Our system ensures consistent design work, saving time and maintaining a strong visual language.

Smooth onboarding: New team members can contribute smoothly, faster, and more easily using the Design System.

Scalability: As the product continues to evolve rapidly, the design system plays a critical role in maintaining consistency and cohesion across all features, facilitating growth.

Some of the files that guided us to create Design consistency and excellence
Some of the files that guided us to create Design consistency and excellence

Anatomy and Size & Spacing Guidelines in Action
Anatomy and Size & Spacing Guidelines in Action

Button Variants and their configuration options, tailormade for easy use
Button Variants and their configuration options, tailormade for easy use

Text Field Variants and their configuration options, tailormade for easy use
Text Field Variants and their configuration options, tailormade for easy use

A glimpse of our Design System in action and the "behind-the-scenes" processes
A glimpse of our Design System in action and the "behind-the-scenes" processes

Note: If you're interested in exploring the complete case study with visuals and more in-depth details, you can access the full version using the following link:

Disclaimer: The images in this article are limited due to contractual agreements. Therefore, they have been modified from their original form to still accurately represent the project and provide crucial insights into my work execution and methodology.

Partner With Érica
View Services

More Projects by Érica