CV
Design System
Sber is the largest bank in Central and Eastern Europe, where I worked for 5 years. This case is about how the design system helped Bigtech to scale and increase T2M.
The bank then had over 200,000 employees, about 15,000 in the Retail Business unit, where I was leading the design of the core finance app with 200+ product teams.
At the beginning of 2018, Sber was in the middle of digital transformation process, and the rapid growth of teams only exacerbated the inconsistency of the UI and the hassle of writing code.
Developing an approach to standardize how screens and individual components were designed was necessary. Also, it was crucial to act faster because product teams formed and started developing their features without detailed enough guidelines. It was painful to see the continuously increasing UX/UI debt.
As often happens in large companies, the importance of any initiative leads to the issue of prioritizing resources, and it has yet to be proven what is more beneficial for the company — design system or other product features requested by clients.
I brought several key aspects to the management:
• Reducing design and dev costs,
• Faster time-to-market,
• Dark theme as a feature (that year Apple announced it at WWDC),
• Opportunity to solve inclusion issues by providing essential components with voiceover for screen readers,
‍• Possibility of system fonts scaling, which we didn't have then,
• Basis for multilingualism.
By allocating 1,5 designers' FTE for an audit, I gained a better understanding of how bad things were. Everything had to start with the basics: we've got different shades of green, problems with meeting WCAG requirements, a lack of a determined text style sheet, and significant differences between iOS and Android, even at the UX level.

All these negatively affected the time consumption of the design and development teams and even the call center specialists who assisted customers with answering questions.
‍
As a paradigm, we took an Atomic Design approach adapted to our needs, where each more complex element inherited the parameters of a simpler one. We had to build at least a foundation of colors, text styles, and iconography to move forward.
Color combinations went through a plugin that checked contrast for compliance with the AA standard WCAG 2.1, and the list of text styles was aligned between the iOS and Android platforms.
We started developing a new icon pack, unifying metaphors and an approach to creating them, abandoning duo-color from considerations of scalability and simplicity of color assignment on dev's side.

The icon pack is an endless job because new products force us to create new ones to cover their demand. However, after a few iterations, we received a gorgeous pack of 300+ icons in 2 versions: outlined and filled inversion, with variable sizes of 36, 24, and 16 px.
Another considerable potential in reducing costs was the tech stack. Especially when you have 100+ designers and 250+ developers. In 2018, we used multiple services to manage stages of the design process in the bank.

Fortunately, Figma answers all of our requirements: prototyping, user testing, version control, environment for dev, subscription management, and convenient cloud storage.
However, one of Figma's advantages became an obstacle when we looked at this point from the security requirements, which are strictly mandatory in any banking environment.

So, I started negotiating the process of including Figma in a list of accepted cloud services, discussing the conditions with the infrastructure and the security department. It took some time, but the profit was worth all the effort. We saved thousands of dollars, and we were able to create a new design system in Figma.
Moving to a new tool with a new design system that was organized differently and a distributed team of 100+ designers was already a big challenge.

Therefore, we held a series of meetups for designers and developers separately to discuss the changes and share the principles that guided us in making them.
The larger the team, the more valuable communication and support issues become. We created three group chats to support designers and iOS and Android developers to help 200+ product teams in moving to a new design system.
Developers have worked to release playground applications that clearly demonstrate the behaviour of components in different states. Moreover, my team created the Whooosh plugin for Figma, which allows designers to switch screens to a dark theme in two clicks.

Later, we upgraded the plugin with a new feature — transforming iOS screens to Android and back — based on our NOVA design system, of course.
The proper guidelines describing each component were also a significant part of the delivery process. In the end, we developed 146 components with more than 1000 states in total. Each of them supported WCAG standards.
Also, we launched a promo website, which played an essential role in promoting the NOVA design system to inner teams and raising the value of the HR brand on the nationwide design market, which helped me hire more great specialists.
Any system is not fulfilled without proper processes. That's why I looked for the big picture and tried to cover all of the instances that improved our client experience.
Besides working on the design system, I eagered to make our in-app language more natural and hired the first UX-writer to create human-oriented writing guides and persuade others not to forget this crucial part of the product impression.
Over the next two years, most Sber's departments and hired their own writers to transform classic clerical texts into those written in human language, so the total number of hired UX writers exceeded 20.
Continuing the idea of making clerical communication more human-oriented, we decided to enrich our digital channels with images that reveal the essence of the product and complement our existing icon pack and stack of technical illustrations.
We called this idea Emotional Banking, which contrasted our people-centered approach with the typical conservative language that banks usually use when speaking to clients.
The library of graphic assets includes 400+ promo images, 150+ illustrations for onboardings, 100+ status (technical) illustrations, and guidelines of UX animation, which describe how to make characters alive via Lottie.
Design System that we implemented for iOS, Andriod and web-services essentially improved flexibility and maintenance of our app and enable a lot of features like dark theme, multilingualism, customized wallpapers and many more.
Then we made it portable to share with other companies of Sber ecosystem. It became a SaaS solution that the teams of Sber Belarus and Sber Kazakhstan could use, as well as our internal services.
Calculating the impact of a design system in large organizations isn’t straightforward, but rough estimates show we’ve saved over 65,000 man-hours annually (approx. €2M/year), reduced T2M by 26% YoY, and ensured our app is both consistent and visually appealing.
More importantly for long-term goals, we achieved control on UI customisation, built a proper infrastructure for the future and make the whole development process more predictable and clear for the 250+ teams and stakeholders.
It wouldn't be possible without the great team I've found during this journey.
So, a massive shoutout to every designer, developer, product owner and other contributors who was a part of this story brought NOVA to life and made it consistent and logical with its finesse for iOS, Android, and the web. Luv you guys!
Back to Home