top of page
Design system
DNS SALE
Overview
DNS is 2847 hardware stores with 38k+ employees. They need a mobile application through which they do their job of selling products for newborns.
- 22 place 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
As a product designer, I was involved in the entire development process: from brainstorming to analyzing statistics on a released feature.
In more detail, I led two projects:
1. Create and subsequently develop a design system. Monitor the progress of tasks on it, push its development. Author's supervision of the final result.
2. Redesign and improvement of the user experience of the mobile application, you can learn more about it.
Team
7 flutter developers
6 testers
4 back-end developers
Product designer (me)
Product owner
System analysis
Achievement
1. Thanks to the design system, the development speed increased by ≈ 1.4 times developers do not need to typeset
2. 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
3. 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.
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:
- Material Design
- Human Interface Guidelines
- Atlassian design
- Shopify Polaris
- Contour Guides
- 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.
Example app
Developers 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.
bottom of page