Design System

Design system library structure

Our design system in Sketch has six sections:

• Intro for new employees.
• Work-in-progress files.
• Styles.
• Component libraries.
• Specifications for developers.
• Guidelines for designers.

Avito manages a colossal number of interfaces and screens — about 1500 in its desktop and mobile apps. To make the user interfaces consistent and reliable and to be able to create them faster and easier, we have a design system.

At its most basic level, a design system is a collection of components and styles. Ours also includes guidelines, flows, and patterns for designers and specifications for developers. Our Sketch library is maintained by the design system team. Its users are our product designers and developers. Here we are going to explain how the library works

Accessibility-first

At its most basic level, a design system is a collection of components and styles. Ours also includes guidelines, flows, and patterns for designers and specifications for developers. Our Sketch library is maintained by the design system team. Its users are our product designers and developers. Here we are going to explain how the library works

Accessibility was a core focus with the design system. Not a bolt-on. Our colour palette contained a combination of primary, neutral, status and background colours. All core combinations needed to pass AA colour contrast guidelines at a minimum.

I put in place an accessibility checklist. A list of items for design and engineering to check before releasing a feature or product. It covered fundamental things like colour contrast of elements, testing the tab order of pages, checking that dynamic type is supported and handled nicely.

Intro for new employees is a tutorial that helps one figure out the basics and settings. Here we briefly explain how to connect libraries, use components, prepare specifications, and present the design review process.

Styles

Avito has several platforms: web, mobile version of the website, and mobile apps. This is the most general division. There are separate styles for each platform.

Styles are the cornerstone of any product designer’s work. These consist of a pre-defined set of texts and colors that designers use in their work. When creating new layouts or modifying existing ones, and add fonts and colors from the ready-made palette to the components. We never make random choices in our layouts: all projects should use approved styles.

‍

Design system components

Avito has pre-defined patterns and solutions. We support and update these on the design system side. If necessary, we create new components: we can create a simple component or a complex one using a master component.

With simple new components, everything is more or less clear. We either have an order for a new component from the team or see the designers’ needs. We learn that a need exists from questions like “do we have this or that component? have you ever come across a solution like this?”.

But it also happens that an existing component has several implementations. We can see this in repetitions in layouts by different designers. Then we implement the component more sophisticated and start by working out the master component.

A master component is the main component that contains all the necessary elements. Designers use it to make instances — these are child components. If you need to make an edit, it is done in the master: all child components will then be automatically updated.

When development is completed, we write a guideline for designers. The guideline contains information on when to use the component. When this is done, we inform the designers that a new component has become available both in the code and in the design, and it can be used in layouts. For this, both the design system and the developers have their own slack channels and joint meetings.

Guidelines for designers

Guidelines are detailed illustrated instructions for designers. These describe when to use which component, how to use it in a layout, how to animate it, what padding should be, and many other technical details.

We have guidelines for using components on different platforms, illustrations, icons, and mobile website version guidelines. Let’s take a quick look at what these look like using the mobile component bottom sheet as an illustration — a panel that emerges from the screen’s bottom.

The long and detailed bottom sheet guideline has seven sections:

1. Which bottom sheet to choose depending on the situation.
2. Bottom sheet height.
3. Animation.
4. Footer selection.
5. Offsets from the screen edge and navigation elements.
6. How and when to use buttons in a component.
7. Don’ts.

‍

Fonts for interface texts have their respective names, for example, Heading or Body, and a note about the size and line spacing. Text styles for the web and mobile are slightly different, with some elements smaller in the former case and larger in the latter. We store the colors as a light to dark ramp.

A design system, like any product, requires constant development and flexibility. Building each component is a complete task; if done in haste, designers won’t use it. To avoid this, observe how designers use components and when they use them.

• User Engagement: Increased by 20% within the first six months through strategic product enhancements.
• User Satisfaction: Improved by 30% as a result of targeted user research and design improvements.
• Successful Transactions: Boosted by 15% due to enhanced product descriptions and browsing experience.
• Design Efficiency: Reduced design inconsistencies by 25% through the implementation of a new design system.
• Team Productivity: Enhanced by 20% through effective collaboration and streamlined design processes.