Basis
Basis
Design system
Product Design Lead
Design system
Product Design Lead
Strategy
Product thinking
Сustomer experience
Interactions design
Creative Direction
Leadership
My team designed express delivery applications for X5 Group that were responsible for order creation, picking, delivery, stock management, etc. Over time, it became difficult to develop and support quality services. We decided to develop a design system that would ensure consistency of products and simplify the development process.
My team designed express delivery applications for X5 Group that were responsible for order creation, picking, delivery, stock management, etc. Over time, it became difficult to develop and support quality services. We decided to develop a design system that would ensure consistency of products and simplify the development process.
Mission
Our mission is to create a service that makes customers' lives better. We have developed a unified system of B2B products, and our employees are the users of these products. Our goals: to demonstrate high-quality services, ease of use, seamless interaction and help to achieve high results.
Mission
Our mission is to create a service that makes customers' lives better. We have developed a unified system of B2B products, and our employees are the users of these products. Our goals: to demonstrate high-quality services, ease of use, seamless interaction and help to achieve high results.
Principle
Technology
Technology
Use of modern technology, optimisation of processes and commitment to stability.
Use of modern technology, optimisation of processes and commitment to stability.
Principle
Flexibility
Flexibility
We provide flexible solutions that are easy to develop and scale.
We provide flexible solutions that are easy to develop and scale.
Principle
Humanity
Humanity
At the heart of our products is the user. We put the customer's requirements first.
At the heart of our products is the user. We put the customer's requirements first.
Principle
Conciseness
Conciseness
We try to keep only the important things, removing everything superfluous.
We try to keep only the important things, removing everything superfluous.
Visual identity
Definitely part of the system design is the development of the visual language. We tried to keep the feeling of a digital product through colours, monospaced fonts and icons. During brainstorming sessions with the team and the copywriter, we brought the naming of all B2B products to the same style.
Visual identity
Definitely part of the system design is the development of the visual language. We tried to keep the feeling of a digital product through colours, monospaced fonts and icons. During brainstorming sessions with the team and the copywriter, we brought the naming of all B2B products to the same style.
Design tokens
Design tokens are the simplest variables that are necessary to build our design system. They consist of basic colours, fonts, padding, styles and animations. Tokens can be used directly and inherited by all other component types. The basic idea behind token naming is the ease of readability. Ideally, any designer or developer could quickly understand the token used in the system simply by its name.
Design tokens
Design tokens are the simplest variables that are necessary to build our design system. They consist of basic colours, fonts, padding, styles and animations. Tokens can be used directly and inherited by all other component types. The basic idea behind token naming is the ease of readability. Ideally, any designer or developer could quickly understand the token used in the system simply by its name.
$bs
$bs
This indication means that this token belongs to our design system. This will help to read it quickly in the code.
This indication means that this token belongs to our design system. This will help to read it quickly in the code.
$type
$type
Defines the type of token. There are two types: $sys and $comp. $sys indicates that the token refers to system tokens. This includes colours, typography, indentation, element roundings, element sizes, effects. For example, a token $bs.sys.color.main-black - is the system token of the "Basis" design system from the colour category, the colour is black. The $comp type refers to component-specific attribute tokens. For example, the token $bs.comp.buttonLarge.padding-top is responsible for the top padding inside buttonLarge.
Defines the type of token. There are two types: $sys and $comp. $sys indicates that the token refers to system tokens. This includes colours, typography, indentation, element roundings, element sizes, effects. For example, a token $bs.sys.color.main-black - is the system token of the "Basis" design system from the colour category, the colour is black. The $comp type refers to component-specific attribute tokens. For example, the token $bs.comp.buttonLarge.padding-top is responsible for the top padding inside buttonLarge.
$category
$category
Defines which category the token belongs to (e.g. $color). All token categories are signed in the header. The category in components is the name of the component itself.
Defines which category the token belongs to (e.g. $color). All token categories are signed in the header. The category in components is the name of the component itself.
$param
$param
Defines the specific parameter of the token.
Defines the specific parameter of the token.
Libraries
Designers use Figma libraries with tokens, components and patterns. Developers use the Storybook service. Assets are synchronised using Figma plugin.
Libraries
Definitely part of the system design is the development of the visual language. We tried to keep the feeling of a digital product through colours and monospaced fonts in the logos. During brainstorming sessions with the team and the copywriter, we brought the naming of all B2B products to the same style.
Libraries
Designers use Figma libraries with tokens, components and patterns. Developers use the Storybook service. Assets are synchronised using Figma plugin.
Ton of Voice
The Basis is supportive, modern but radical, loyal but punctual. It loves to learn, is willing to change for the better, is resourceful, and is ready to take responsibility when a user fails. It characterizes by humanity and honesty, and the primary qualities are openness and sincerity. The goal is to unite our interfaces into a single ecosystem at the text. These rules are the only ones to guide us when we write the text for the interface. The opinion of an authoritative person inside or outside the company does not matter if the rules say otherwise.
Ton of Voice
Definitely part of the system design is the development of the visual language. We tried to keep the feeling of a digital product through colours and monospaced fonts in the logos. During brainstorming sessions with the team and the copywriter, we brought the naming of all B2B products to the same style.
Ton of Voice
The Basis is supportive, modern but radical, loyal but punctual. It loves to learn, is willing to change for the better, is resourceful, and is ready to take responsibility when a user fails. It characterizes by humanity and honesty, and the primary qualities are openness and sincerity. The goal is to unite our interfaces into a single ecosystem at the text. These rules are the only ones to guide us when we write the text for the interface. The opinion of an authoritative person inside or outside the company does not matter if the rules say otherwise.
Syntax
We developed syntax rules for our teams. The rules apply to all texts that appear in different places in the interface: in menus, buttons, errors, tooltips, promotional blocks, and modal windows. It does not apply - to texts in social networks, promotional letters, or marketing materials that we use outside the interfaces. Here are a couple of examples.
Syntax
We developed syntax rules for our teams. The rules apply to all texts that appear in different places in the interface: in menus, buttons, errors, tooltips, promotional blocks, and modal windows. It does not apply - to texts in social networks, promotional letters, or marketing materials that we use outside the interfaces. Here are a couple of examples.
Clear to a beginner
Clear to a beginner
Every screen should pass the beginner's test. If you look at it out of context, is it clear what is happening here and what to do? If not, you need to rework it.
Every screen should pass the beginner's test. If you look at it out of context, is it clear what is happening here and what to do? If not, you need to rework it.
Write for the user
Write for the user
Think more about what the user needs to know than what the company wants to say. Try to keep humanity in the copy.
Think more about what the user needs to know than what the company wants to say. Try to keep humanity in the copy.
Keep it short
Keep it short
Copy should be concise and yet communicate the meaning effectively. Use as few words as possible without losing the sense.
Copy should be concise and yet communicate the meaning effectively. Use as few words as possible without losing the sense.
Concrete, not abstract
Concrete, not abstract
The more concrete the wording, the easier it is for a person to understand what we want to say. There is not enough space for interface text and we have to get the most out of every letter.
The more concrete the wording, the easier it is for a person to understand what we want to say. There is not enough space for interface text and we have to get the most out of every letter.
Implementation
A design system is more than just drawing and even coding the components. All product teams must adopt the new tool. That is the most challenging part of the job. To explain the need to implement a design system, I confirmed the support of critical managers (CTO, frontend leads) and prepared a presentation. After that, we made permanent product sessions. In this session, we discussed a more comprehensive range of tech specialists who set expectations for new functionalities or components and created an implementation plan.
Implementation
Definitely part of the system design is the development of the visual language. We tried to keep the feeling of a digital product through colours and monospaced fonts in the logos. During brainstorming sessions with the team and the copywriter, we brought the naming of all B2B products to the same style.
Implementation
A design system is more than just drawing and even coding the components. All product teams must adopt the new tool. That is the most challenging part of the job. To explain the need to implement a design system, I confirmed the support of critical managers (CTO, frontend leads) and prepared a presentation. After that, we made permanent product sessions. In this session, we discussed a more comprehensive range of tech specialists who set expectations for new functionalities or components and created an implementation plan.
We've developed and implemented a system in which we've formed new principles, a unified visual style, and guidelines for use.
We've developed and implemented a system in which we've formed new principles, a unified visual style, and guidelines for use.
What we've done
What we've done
Research and problem analysis
Created new visual style
Developed tokens system
Developed library for engineers
Implementation of the design system
Saves about 20% of the development time.
Scaled the system to 6 B2B products
Research and problem analysis
Created new visual style
Developed tokens system
Developed library for engineers
Implementation of the design system
Saves about 20% of the development time.
Scaled the system to 6 B2B products