What’s a Design System and Why Do We Need it — HSE Case
Tags: Figma, Design Process, Hse, Design Systems

How are we bringing the diverse digital products of Russia’s most digitalized educational institution to a common denominator

Nowadays the HSE University has several separate digital products and a variety of services, from faculty websites and individual areas to exclusive digital projects. All of them should visually belong to the same family, while maintaining their exclusivity. That’s why we’ve created this design system, which like a set of LEGO bricks, allows you to easily and quickly collect high-quality and recognizable products. Here we explain how we created a design system for one of the most innovative universities in the country.

Where Did We Start?

This directly depends not only on the start-up capital, but also on your main goals. In this case, we needed to cover as many HSE services as possible in a short time. That’s why we started working with a comprehensive analysis of all available products-websites, services, divisions, etc.

The next step was prioritization. All the design components found on the HSE services were distributed according to their frequency of use. We needed to understand which parts to take on first, and which to leave for later or even throw out. So we started developing different blocks according to the set priority. We released each element separately as product features, filling the library of design blocks.

What Does a Design System Consist Of?

Scrupulously developing each element of the system, we have already collected a sufficient database for work, which includes:

Visual language — logo, icons, patterns, slogan, etc. — a set of visual constants, LEGO blocks that provide external recognition and similarity of different products. We created separate logos for HSE’s online products. Icons adjusted to the same standards of size, parameters and color and they look organic and familiar to the user who navigates on different pages. All the icons are designed in black color, so the designers of the HSE can paint them in any color.

Design tokens — color, typography, module and grid, dimensions and margins, transparency etc. — these are the basic elements of the visual language. The color, for example, is collected in the brand HSE color palette, which is used to highlight the main message of the page. Designers can set existing color codes from several tens, rather than hundreds of thousands of options. The color palette is designed for all cases, and detailed instructions give tips on where and what shade is best to use. The step is set in such a way that each of the colors perfectly becomes a hover for the other.

There is also an original HSE Sans font adapted for different situations — headings, subheadings, captions, small print for special cases, etc. In addition to the font itself, the design system adjusts the line length, line spacing, margins between blocks and components and other important details, ensuring that the corporate identity is preserved.

Component library — technical interface blocks, the atoms that developers use to build pages and layouts, along with their variations and sizes for different situations. UI-kit provides the similarity of page behavior and the identity of interaction scenarios for different products.

Instructions for designers — a set of technical rules that allow everyone to speak the same language and transmit information quickly and clearly between the design teams of different products, as well as between designers and developers.

Design System Advantages

You start collecting the fruits of your hard work almost immediately. First, the design system significantly reduces the costs when implementing new products.

Designers and developers can create schematic sketches from ready-made basic library elements without spending a lot of time and effort on development, approval and correction — ready-made system elements have already been approved and tested. On average, creating a service using design system blocks reduces the production time of new products to 2 days.

And UI-kits allow you to create layouts with high accuracy and speed and significantly reduce risks. They allow you to see how the design will look in real life, immediately note its weaknesses and quickly fix them using ready-made blocks. With the UI-kits, you can quickly build two or three options of a new product and test them.

The system also simplifies the interaction of users who are already familiar with the HSE ecosystem.

Design System Nuances

Here we have listed only the main elements and processes of work. And it is already clear that the design system is an indispensable tool that allows you to save time, money, effort, and nerves. But its main advantage is to limit the flight of imagination to clear principles that reflect the brand itself and its basic pillars.

It is always important to remember that a design system is an effective tool, but not an end in itself. You should always keep in mind that the most important thing is content. All elements should highlight the content, not overlap or distract from it. In addition to fonts, headers, and other blocks, there are some other tools for working with the content, such as adaptive screens, color and shadow design, and a limited color palette. No bright and knockout colors, extra columns, or large images where they are not needed. It helps the content to be displayed correctly and look readable.

And most importantly, a design system cannot be developed once and for all. The created library should always be updated — you need to constantly monitor the situation, develop missing elements or remove unclaimed rudiments. System participants must be up to date with the latest updates in order to speak the same language. Therefore, it is very important to develop detailed instructions that are relevant for both designers and developers in all digital products.

By the way, the HSE design system will be implemented in the near future, and we will gradually bring all University digital products under a single denominator. On the road so far…