The transition from UI-whale to the design system in QIWI
The design system has become the same fashionable and almost indispensable tool for an IT company as the use of kanban boards and agile. There are many definitions of a design system: someone only understands it as a UI-kit, and someone thinks that a design system necessarily includes the component base in the code.
From how we realized that it was time to move from a UI whale in sketch to the display of styles in the code - under the cut.
At first we had a UI kit in sketch for each of the platforms - web, iOS, Android. We also launched a guide on Wordpress, which describes how to use and combine components, and tells what the QIWI style is based on. Using a single UI-whale and guides helps accelerate the work of designers and make the product interfaces on different platforms visually consistent.
Single UI-kit is used in QIWI Wallet , QIWI Money Box , QIWI Bonus , QIWI Cashier , QIWI TeamplayWe also use it when designing interfaces for new products. The number of products launched is constantly growing, so the logical step was to create templates for internal pages. Templates for interface pages help to reduce the level of discrepancy in styles and significantly speed up design processes.
At the first stage, we got a visual design system, on the basis of which we can now deploy the design system in code.
We began to fill the design system this summer. Now developers of different teams and all designers of QIWI Wallet are working on the design system.
At the initial stage, we actively communicated with companies that have already successfully implemented a design system. In order to understand what will fall into the design system, and to determine the styles, we have regular meetings with inside the design team.
An important aspect when creating a design system is communication with the development team, one of the project's ideas is to create a community of developers and designers from different teams who will work together to create and fill it, and share experience with each other.
Now we are still on the road, the process is going on, and plans for next year are to fill the base of the main components and at the same time add unique components for individual products, both B2B and B2C segments.
However, not all QIWI products are included in the design system. For example, it does not include the Conscience - the visual style of this product is intentionally different.
When a new component appears, we will coordinate it within the design team and enter it into the UI kit, then it gets into Zeplin and Abstract. Abstract allows you to versionify layouts, this is a kind of Git for designers. From the UI whale, the finished component gets into the repository on GitHub, where developers can find it.
Now the design system is in the process of filling, it already has basic components. Next up are larger templates and patterns + unique product components.
The design system is useful for all participants of the product processes:
Now we are working to make the design system flexible and customizable for new styles.
One of the main tasks is to transfer already existing products to a single system. This will help get rid of Legacy in the design and code, and constantly maintain the interfaces of products and services up to date.
Where did we start
At first we had a UI kit in sketch for each of the platforms - web, iOS, Android. We also launched a guide on Wordpress, which describes how to use and combine components, and tells what the QIWI style is based on. Using a single UI-whale and guides helps accelerate the work of designers and make the product interfaces on different platforms visually consistent.
Single UI-kit is used in QIWI Wallet , QIWI Money Box , QIWI Bonus , QIWI Cashier , QIWI TeamplayWe also use it when designing interfaces for new products. The number of products launched is constantly growing, so the logical step was to create templates for internal pages. Templates for interface pages help to reduce the level of discrepancy in styles and significantly speed up design processes.
At the first stage, we got a visual design system, on the basis of which we can now deploy the design system in code.
What now
We began to fill the design system this summer. Now developers of different teams and all designers of QIWI Wallet are working on the design system.
At the initial stage, we actively communicated with companies that have already successfully implemented a design system. In order to understand what will fall into the design system, and to determine the styles, we have regular meetings with inside the design team.
An important aspect when creating a design system is communication with the development team, one of the project's ideas is to create a community of developers and designers from different teams who will work together to create and fill it, and share experience with each other.
Now we are still on the road, the process is going on, and plans for next year are to fill the base of the main components and at the same time add unique components for individual products, both B2B and B2C segments.
However, not all QIWI products are included in the design system. For example, it does not include the Conscience - the visual style of this product is intentionally different.
How does the work
When a new component appears, we will coordinate it within the design team and enter it into the UI kit, then it gets into Zeplin and Abstract. Abstract allows you to versionify layouts, this is a kind of Git for designers. From the UI whale, the finished component gets into the repository on GitHub, where developers can find it.
Now the design system is in the process of filling, it already has basic components. Next up are larger templates and patterns + unique product components.
The design system is useful for all participants of the product processes:
- for business - the design system allows launching new solutions 2 times faster and testing product hypotheses;
- for the team - there is a single base of tested components, which increases the speed and quality of work;
- for users - helps to form a single user experience in the QIWI family of products.
Now we are working to make the design system flexible and customizable for new styles.
One of the main tasks is to transfer already existing products to a single system. This will help get rid of Legacy in the design and code, and constantly maintain the interfaces of products and services up to date.