While at Sun&Snow, I consistently engaged in new projects focused on enhancing the user experience of the company's website.
These projects encompassed diverse aspects, such as: • Service packages • Newsletter pages • Loyalty program • Check-out flow To keep things consistent, I decided to create a design system.
Creating Design System
Creating a design system from scratch is a huge effort. In my case, I didn’t have that kind of resources and time.
That’s why I decided to base our design system on an already reputable one. However, I didn’t want it to be too complex and that’s why my preference leaned towards the Vibe Design System by monday.com.
Categorization
I have grouped related components, making it convenient to search for them in the assets panel. As an example you can see in “Dropdowns” group associated components:
• Dropdown • Expanded Dropdown
Component Variants
Component has properties variants which allows a designer to select specific properties of the component they need to have. Here the “Button” component has the following variants:
Type • Primary Blue • Primary Yellow • Secondary • Tetriary • Link
I have added the Vibe Design System icons library to my design by connecting it to components. This allows me to swap icons within components of my choice directly from the Vibe icons catalog.
That’s why I decided to base our design system on already reputable one. However I didn’t wanted it to be too complex and that’s why my preference leaned towards Vibe Design System by monday.com.
Interactive Components
Additionally I have created interaction within some of the components. This way you can see some of the component's states such as hover, pressed, selected, turned on and off, etc.
That’s why I decided to base our design system on already reputable one. However I didn’t wanted it to be too complex and that’s why my preference leaned towards Vibe Design System by monday.com.
Accessibility & Size Requirements
I made sure that all elements met accessibility contrast requirements. By using Contrast plugin in Figma you can see which elements are highlighted as green (meeting requirements).
Only components with a ration 3.36 are not meeting requirements, but it is OK since those elements are in a “disabled” state.
I made sure that on mobile devices, some components are larger. The mobile-friendly approach ensures that our site is accessible to a broader audience.
Input field • Large (hight 48px) • Small (hight 40px)
CTA • Large (hight 48px) • Small (hight 40px)
Forms & Swap Box
Since designing forms for check-out or new landing pages was a repetitive task, I have designed swap boxes with the two most used swap layouts (1x4 and 2x4).
Below, you can see a swap box component with swappable components, and on the right, there are two swap layouts with swapped components as examples underneath them
This way I increased my efficiency and reduced time work when designing new forms.
Learning & Takeaway
There is no right design system, each system should be tailored to a specific project. That's why every design system is unique, aligning with the specific needs of a company.
The same applies to the layout of the actual design system file; it should be structured in a way that is easy for the project team to use and understand. It is very helpful, and I might say even crucial, to ask for constant feedback from team members who are in one way or another involved in working with the design system.
Sticking to the design system revealed to me this important insight: • It leads to quality work at efficient speeds; • Ensures familiarity and accessibility at every touchpoint; • Decreases duplication of efforts when designing;
