- Three in-house designers in 2013 were not enough to cover the amount of work ahead of us.
- The bank is a huge organization, and lots of projects were outsourced. There was no way for us to know about all of them, but we wanted to keep UI consistent for users.
- Monolithic architecture and legacy systems prevented teams from developing features independently and slowed the time to market.
UI library in code seemed to address at least two problems. It became a tool to build consistent UI without designers for both internal and external teams.
We started with retail customers and desktop web (95% clients in 2013)
In early 2013, 95% of retail customers could access online banking only from desktop computers. As a result, our first UI library was made only for desktops.
The number of smartphones was slowly taking off. In 2015 mobile platforms became our priority and the Design System caught up by the end of the year.
Engineers can build simple features without designers
We launched pilot projects, where engineers and product managers were building features utilizing our UI library (no designers involved). They proved that simple tasks could be accomplished with the UI library in code only. Shared UI components were also useful when engineers changed teams.
UI code maintenance became one of the main priorities for the design department.
Usability Index and shipping speed
Our internal metric was the number of teams that adopted our approach across the bank. We could not enforce that adoption, only share and educate. The official website with guidelines and open-sourcing the code became a significant contributor to this metric.
The Usability Index was our qualitative metric. We've established a UX laboratory to test product prototypes and UI components before shipping them to the library.
Was the problem solved?
Shared frontend components allowed product teams to develop features independently while keeping the UI consistent.
Engineer/designer collaborations enabled building production-grade prototypes and allowed faster iterations.
The impact became even more noticeable after approximately three years, as the number of teams that were using our UI library reached 30+.
Key improvements and changes
- Consistent UI across core products.
- Faster prototyping and iterations.
- Eventually, new features started shipping within weeks instead of three months on average. Design System was one of the major contributing factors.
- External companies adopted our open-sourced code, which helped them to speed up the development and keep the UI consistent with the product of in-house teams.
We partnered with IT/engineering teams to implement Single Sign-On. It helped us to overcome the monolithic architecture limitations. Now every team could ship features independently. My team initiated the project as a part of the Design System development and was a brilliant example of cross-functional collaboration.
Our first approach to the UI library was a kind of misfire because we missed mobile and focused on UI components, not product. We fixed it by writing down mission-critical user stories, prioritizing core and most frequently used UI elements, and recreating components starting from mobile views (including native components) and then upscaling them to desktop.
Our second attempt was way more successful and eventually evolved into the Design System, which included the UI library in code and the Product Development Method. It became crucial for designer collaborations, design management, and scaling the team.
By the end of 2016, I developed The Method — a guideline that aligned 30+ designers from distributed teams and became the core of the Design System.
- Initial UI design and supervision
- Team management, hiring designers and engineers
- Defined design principles
- XFN: Introduced Design System to dev teams
- Administrative functions
- Anton Vinogradov, the first hire at the design department. UI engineer, co-author and first maintainer of the UI library.
- Nik Berezovsky, UI designer. Co-author of the first major redesign of the Design System.
- Mitya Teryaew and Vitaly Galakhov. UI engineers, managed the transition to React and open-sourced our library on GitHub.
- Maxim Azrilyan, Alexander Tarasov and Tamara Zuikova — system architects that made SSO possible and helped promote the idea across the bank in 2015.
GitHub with all (100+) contributors.