Design system
‍DNS SALE
Overview
DNS is 2847 retail electronic stores with 38k+ employees. They need a mobile application through which they do their job of selling electronic goods for customers.
‍
- 22 место forbes russia
- $6 113M revenue
- 4 countries (Russia, kazakhstan, Croatia, Bulgaria)

Mission
The mission of the company is to satisfy the client with high quality equipment and in a short time

The mission of the project is DNS Sale. Increase mobility, convenience and speed of store employees
My role
I worked 1 year in dns as a product designer involved in every stage from brainstorming to analyzing the statistics of released features.

During my tenure, I led two pivotal projects:
1. Conducting UX research and redesigning the mobile application to enhance its user experience.
2. Developing a design system to standardize the design process and ensure consistency.
Team
7 flutter developers
6 testers
4 back-end developers
Product designer (me)
Product owner
System analysis
Achievement
Thanks to the design system, the development speed increased by ≈ 1.4 times (developers do not need to typeset)
Also, the testing time was reduced by ≈ 1.2 times thanks to the autotests prescribed for the components (they do not need to be written again every time)
Increased layout creation speed layout collection as a constructor
Applied Skills
Design Thinking,
UX Research,
User Interviews,
User Stories,
Wireframing,
Rapid Prototyping,
Usability Testing,
Visual Design.
The problem
Why did the company need a design system? When I joined the project, it had a lot of different texts, colors, elements that could be the same, but they are all different and they all need to be technically supported and taken into account when adding new functionality, which increased development time.

Also, due to the lack of a design system, each element had to be developed and tested again, which increased the development time.

For example, it looked like this :c
Research
From the very beginning, I gathered meetings with team leaders to determine the image of the result, draw up a plan for the creation and implementation of the project .

I also interviewed members of our team, what a design system should be like and what problems a particular specialist should solve.

I used best practices of the following design systems in my work:
- Atlassian.design
- Shopify Polaris
- Material Design
- Nutanix Design
- Contour Guides
- Mail Chimp
- IBM Design Language

‍I also collected all the screens of the application in one project map to make it easier to understand the scope of work.
Process
Before rules or elements are added to the design system, it is authenticated by technical programmers and test leads. During the discussion, we decided that we would design the system based on the Material Design System, because the team had already worked with this system. Epics were also found in the archive, where I scattered tasks on system design.
Principles
Together with the product owner, we determined the main priorities of the application and, based on them, wrote the principles of system design: Speed of work, clarity of the interface.
Interaction with the interface should be fast.
The interface should be simple and easy to use.
Foundation
From the very beginning, I created the basics of the ui kit: colors, typography, grids, indentation rules, how the black theme works, icons.
Components
Each component before adding was tested to check the patency to the main product. This was done so that there are no unused components in the design system.
Flexibility
Design system suitable for any mobile device considering safe area and different color themes.
Documentation
Rules were described in the design system: ux strategies, animations, standard errors, blank pages, spelling and grammar, sounds, vibration, safe area, scrolling. Each component rules its behavior and its properties.
Exemple app
Created a test application with all the elements to test the elements of the design system.
Thanks my team
I would like to express my gratitude to my team for their help in creating the design system and the excellent design collaboration.