Virtual UI Design Syst

Design System for Bank VTB Azerbaijan.

Year: 2022 to 2024
Project: Virtual UI Design System
Role: Product Designer
Team: Product Designer, Front End Developer, Project Manager.

Virtual UI is a Design System made especially for VTB Online and other internal and external Products of Bank VTB Azerbaijan. This project aims to make the company's digital products consistent and improve user experience.

Problems:

Identified key product issues: consistency, ease of use, and design language.
The main product, VTB Online (internet banking), faced these challenges.
User dissatisfaction with the current state of the products.
For more detailed insights, refer to the VTB Online Case Study.

Constraints:

Limited time frame.
Limited resources for User Research.
Complexity of current Front End architecture.

This is what VTB Online looked like when we started:

Main Dashboard

Transfer

Order a new Card

Now you have a bit of an understanding of why we needed to redesign.

Now let's talk about the Process.

Talking with our customers and understanding what they need and want.
Doing a market research.
Making mood board for the new visual language of VTB Online.
Make variations and select one of them from among stakeholders.
Making a Design System.
Updating VTB Online interface.

Overall that was the process. Our main goal was to make user-friendly, modern, and competitive UI and improve User Experience simultaneously.

Let's dive into the process of the Makign Design System.

We started to make this design system by choosing which structure to follow. Long story short, we came up with 2 alternatives:

Atomic Design Methodology
Code-Based Design System

These 2 have their own advantages and drawbacks. For example:

Atomic Design Methodology is good for long-term, complex, and large projects. Drawbacks? Long list of components, sometimes, repeating components.

Code-Based Design System is good when we talk about Designer-Developer relations. But our case was different, we already had good relations with developers. And mam, creating a single component can take a long time.

So we decided to go with the Atomic Design Methodology. I wrote about my experience and overall information about Atoms, Molecules, and Organisms.

When I made this case study, I thought about adding a full list of Components and so on. But then I decided why not add interactive components instead of simple bullet points? Yeah, I made interactive components in Framer:

Virtual UI on Maharram.xyz

You can interact with components (Not all, main components only), and view and read about how I used Tokens in Virtual UI.

Now, Let's talk about the hardest part of this Design System, Colors...
Why the hardest part? Because of accessibility. Yeah, I challenged myself to make good-looking and Accessible colors for this system. It took me 4 months and 4 different approaches to find the perfect one for our needs.

Light Mode

Dark Mode

As you can see, all colors have dark mode and are separated into Color and Element tokes. This approach makes it easier to maintain and use these colors in elements because of simplicity and number of tokens. It's easy to understand for both, Designer and Developers. Why? You can see it from here:

Logic behind the colors.

Usage of Colors, ex:1

Usage of Colors, ex:2

Usage of Colors, ex:3

Usage of Colors, ex:4

For more Details and explanations, please read it from here:

Tokens on maharram.xyz

We talk about the Idea behind this system, structure, and colors, and it's time to talk a bit about Font. I will keep it short, We used VTB Group UI font. It's the official font of VTB Group. And it looks like this: