Overview

My team and I have created this design system for the SberSolutions Portal Platform. This platform includes multiple services for companies to organize and manage their work process.

Goal

To design a comprehensive set of guidelines, principles, assets, and components that are created and used to ensure consistency, efficiency, and cohesion in the design and development of SberSolutions Portal services.

Beginning

Starting this project we already knew the UI kit was incomplete, and some components didn’t work well, additionally, the developers had problems implementing interface layouts so we needed to research that area as well. We started our work by analyzing the existing UI kit and product interfaces to find the causes of these problems to solve them.

Research Findings

  1. Color palette The existing palette lacked variety and rules for color usage were unclear. Designers used transparency to create new shades of colors that led to different results due to color mixing. It was complicated for developers to implement these shades correctly which led to inconsistent results.
  2. Typography The text styles within the UI kit turned out to be outdated, failing to align with the brand's identity guidelines. Furthermore, the fonts used were not optimized for digital products, resulting in incorrect headline and text appearance within the interface.
  3. Components’ states Many of the existing components lacked certain states, leading to inaccuracies in the development process and resulting in an inconsistent interface.
  4. Components’ descriptions The absence of component structure descriptions, rules, or usage examples in the UI kit posed challenges for both designers and developers. Designers found it challenging to employ components accurately in layout creation, while developers encountered difficulties in error-free implementation.

Results and Solutions

As a result, we have developed a new design system for the SberSolutions Portal Platform. Here, you will find a comprehensive description of our solutions.

Color Palette

I've created a new color palette, following the brand style guide and Material Design principles. New extensive palette includes all the required shades, removing the need for transparency. We’ve carefully checked the compatibility of the new colors and made sure we had an ample variety of shades for every facet of the interface.

colors1.png

I’ve created new rules of color application and provided detailed examples of their usage.

Background & Surface Colors.png