- About
I worked with our team and developers to craft a style guide for superapp, which contains the library of common components used in the product and expands out to design principles for the design team to follow, as well as UX guidance on usage and implementation for every piece used in the product, from form elements to typography and entire screen configurations.
The style guide was vital for both our developers and our designers, giving us a shared kit of parts to work from and ensures consistency within our designs. This framework was adopted by additional suites and it used across multiple teams at the company today.
- Process
- Defining a goals and finding a problems
- Defining a principles (on principles based review process)
- Deep research of web and mobile specification(IOS Android Web)
- Research and define methodology(BEM, Atomic design, etc.)
- Make list of components
- Define extended color plate (for UI and content)
- Define theming tokens
- Make guidelines and components
- Make process of scaling, contributing and review
- Principles are the most important part of any system. They determine the shape of the future product, and the product review process will be built on them in the future. Sbergdrug is an internal product and has no competitors, so we chose speed, predictability, uniformity and simplicity as the main principles. As a designer, you should view a good solution as being as simple, predictable, fast to produce, and consistent in style as possible.
- Guides
The Style Guide also served as a home for product design principles and general advice about typography, accessibility, and UX best practices. The design team was composed of designers who ranged from folks who had worked at Sber for decades, to young designers working on their first product team. The Style Guide was a way to help reach consensus on common paradigms and industry standards.
- Examples
In addition to documenting components and their usage, I crafted do/do not scenarios, and tons of test examples for many elements in the style guide, to help illustrate best practice and prevent easily avoided pratfalls. The Style Guide was both documentation and education.
