Yapily. Design System
Intro
Building a design system from the ground up to connect teams on a common design language foundation within Yapily design system.
My responsibilities:
Research
Inventory
Audit and Sorting out
Handoff to developers and Maintaining the design system.
Who will be using this?
4 Core Products and 2 commercial;
2 design teams (5 designers);
All frontend engeniers;
PM managers
Define the problem
Research
Initially, I already understood the scope of work and before I start to create anything, I wanted to have a trustful example of design systems before my eyes. I laid on Material DS, HUD, Airbnb, and Gov.co.uk.
My first step was to collect everything that might make my job easier, especially Figma files. Most of the products were already built with code, there were only a couple of Figma files.
Problems
No Figma file for the library;
Visual inconsistency;
Missing states for the big group of components;
Some of the components did not meet accessibility requirements (to small fonts, contrast rate );
Design Process
Audit and Sorting out.
Each and every design project started from scratch; new files, new artboards, new shapes, and new symbols. My process involved taking a screenshot of the page I was working on and then designing on top of it. It was a time-consuming but useful exercise for understanding the patterns which were also one more issue to deal with.
Set up Figma library
I started from layouts because there were no changes, then fonts+ brand colours, and components + spacing on a dessert.
Each application had a different style. Besides, Yapily was waiting for the redesign from the agency. Defining the name and purpose for each colour was the key for building a base that could easily replace the old style with the new one without too much effort.
What was challenging?
The colour palette. Each color has been using in different places. For example, the variable for a white color had the name "Neutral 0" and was using as a general background, card background, and text colour, so it wasn't possible to replace it everywhere in one click.
So I decided to break it into three steps to make it easier for developers to reassign properties:
Get together all styles and write a description;
Sort it out according to the purpose of each colour and give a proper name. Some of the colours were splitted in two, and some of them were merged together.
Replace it with a new colour style after the redesign.
Working on Components
During this step I had a lot of meetings with developers to synchronise components behaviour , how it was build and why.
Some of the existing components was good enough and didn't need an improvements, all they need was to be put in proper section. The next step was to sort out with other group:
replace the gaps with missing variants;
improve broken components;
create new one's;
check accessibility ( AA required );
create micro-interactions between variants.
What was challenging?
When the Design System was almost completed, I got access to mockups for a commercial website. Only the color palette and fonts were common, all other components were significantly different. Things that worked great for an application, unfortunately, didn't work for a commercial site and vice versa. As a result, it was decided not to merge the UI kit with an existing Design System. The option of adding a UI kit as part of the design system was also considered, but so far there are not enough resources for the process.
Example from work project
Recreating screens with components
It's all about spacing and layout. The last ones weren't changed, but the spacing was a mess. Each application had many complex components which were built in their own way, there was no proper visual hierarchy. Also, I needed to keep in mind that new logic should be flexible and works for all the applications.
What was challenging?
Unfortunately, I did not have enough time and resources to create everything perfectly, so I started from most reusable like cards or tabs. I took the most and less loaded screens and created rules.
Example from work project
Implementation
To make the Handoff process as smooth as possible, I was communicating with the development team daily. With limited resources, it was important for me to understand that developers would not spend extra effort on creating or fixing a design.
Outcome
It could be difficult to constantly maintain a design system. It's not a quite creative process to fit new requirements in already working components with certain color and font styles, especially if your product is broken into several sub-products that are a bit visually different from each other.
The basis for Yapily's Design System was built partly through reverse engineering over several months, then successfully went through a partial redesign followed by a full redesign. Some patterns and components are still waiting for their turn to be implemented.