Alfa-bank

Retail and corporate banking. 15+ mln. customers. One of the biggest privately-held banks in Russia.

Design System to speed up the digital transformation

In 2012 it became apparent that clients would switch to online banking in the coming years. Handling clients in branches is too expensive and time-consuming.

The initial business goal was to close the functionality gap between branches and online channels. We had to ship a lot of features quickly. That's how the UI library appeared and evolved into the Design System over the years.

Context

People/business problem

  • 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.

Public website for the Design System

Public website for the Design System

Open-sourcing code on Github was not enough and we published guidelines, icons, proper descriptions, and principles on an official website. Sources, descriptions, examples were aimed at both internal and external teams. At some point, it even served as a recruiting tool too.

(Left to right: Alfa-bank's Digital Products, UI library, Principles, Patterns, How to use it, Style: typography, colors, icons )

UI components library

UI components library

Each component was meticulously described, and every page turned into a testing stand. Formatting currencies, rendering banking cards, masking account numbers, calendars, transaction cards, etc.

Dark mode preview

Dark mode preview

We were keen to support different color schemes from the very beginning. This idea slowed us down significantly at the start. Initially (in 2014), we wanted to use a dark theme for corporate banking, but eventually, it transformed into the dark mode as we know it today (in 2020).

Fun fact: dark mode toggle existed on the website from the very beginning.

Icons repository

Icons repository

Over 300+ icons were designed from scratch in at least three optical sizes. The internal library was integrated into apps building processes. Every time an engineer was building an app, icons were automatically pulled from our repository. Sources were stored in SVG, then converted into PDF for iOS (Android worked fine with an SVG). Every time an icon was changed/tweaked/updated, we were sure it would remain consistent everywhere.

The Method

The Method

The Method became one of the most important parts of the Design System. I wrote down the most important principles and designers became ambassadors of this method in product teams.

The main sections include:

  • Define people problem in simple words,
  • define how you would measure success,
  • come up with hypotheses,
  • define the context (CJM),
  • prototype/iterate.

Design Patterns

Design Patterns

Nik Berezovsky and I wrote down some important and banking-specific patterns, like:

  • managing passwords and authorization,
  • formatting currencies,
  • formatting bank card numbers, accounts, phone numbers,
  • typography, design priciples, basic layouts,
  • etc.

Results

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.

Project notes

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.

Team

Design director

Ivan Vasilev

  • Initial UI design and supervision
  • Team management, hiring designers and engineers
  • Defined design principles
  • XFN: Introduced Design System to dev teams
  • Administrative functions

Core contributors

  • 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.