GOALS

The main goal of Design System development is to reduce the time spent on the development of banking mobile products. According to our calculations, Design System reduces the design time spent on each product by 50%, which leads to savings in all involved resources such as employees, vendors, research and budget. Design System allows you to quickly create prototypes and test hypotheses even before the start of the development of a new product.

The secondary goal is the unification of all banking products for mobile devices. This allows you to build a trusting relationship with users, increases brand awareness and reliability.

I was a Head designer of Mobile Bank Design System. My task was to identify the main design patterns of banking products and combine them into a single design system, as well as to minimize the processing of existing products in the bank.

MY ROLE

RESULTS

Platforms: iOS / Android

>30%

>30%

>15

projects based on Design System

time saved on design layouts

time saved on code

01. Company's main product patterns and analysis identification
02. Creating Styles, themes and components
03. Work on Design System accessibility
04. Guidelines development
05. Productive workflow with developers
06. Convenient figma-space creation for users and support specialists
07. Testing Design System on the partner projects
08. Product Improvements

preview preview preview

Please note that I'm not authorized to share real company data, so only my personal developments are included in this block, and the figma file contains a customized part of the library components without documentation.

nterfaces

ONLINE BANKING Designed Using the Design System

Financial App for Medium & Small Businesses Designed Using the Design System

styles STYLES STYLES

COLORS

The palette for Design System is based on commonly used colors in the bank's mobile applications. I have chosen a limited number of colors: the main corporate blue, a neutral color for texts and three status colors. Each color was divided into dark and light shades in the amount of 10 shades for each to systematize the palette and prevent designers from using a large number of similar shades.

A simple color palette no longer meets the needs of modern digital products. I developed a token system that works across multiple mobile apps, starting with light and dark base themes, which reduces dark theme development time by nearly 90%. Each product can create its own theme based on these color tokens, allowing real-time testing in the Design System application.

I chose a straightforward principle for the Design System that minimizes confusion for designers and developers. The base theme is divided into Dark and Light themes, with each further categorized into three groups: Text, Element, and Background. A detailed diagram illustrates this structure.

Base palette

themization

It is important to note that all of the selected colors for the tokens are based on the shades of the color palette that I mentioned above. Here is an example of a part of the token system in the base theme and an additional theme that can be developed from the base theme.

FONTs

I chose font styles according to the mobile application interfaces already existing in the bank, taking into account applications not only for phones, but also for tablets. considering the multi-platforming with both iOS (SF) and Android (Roboto) platforms, a single approach in the naming of font styles was chosen. I also kept in mind the generally accepted norms in font sizes and line spacing that correspond to a 4 pixel grid. You can find the most used fonts below:

Base FONTs

Tokens

Main colors

Status colors

LIBRARY LIBRARY

design system STRUCTURE

All components of the Design System are divided into three groups: Basic, System, and Additional. This structure enables designers to work with one library without the need for extra paid libraries. The library is regularly updated with new components and variations. In addition to the Design System, I created a comprehensive guideline that outlines rules for using the library, component behavior, interface development features, and a handy UI Kit navigation document.

Libraries & comPonents

>100

components

>2.000

varieties

2

platforms (iOS/Android)

4

basic themes

The base group of components includes commonly used elements for banking application interfaces, organized in alphabetical order and divided into atoms and molecules. This structure adds variability without overloading the Design System, with state switching handled entirely by Variants. This organization simplifies component use for both library and interface designers. Thus, the organization of Design System has been developed according to the following important aspects:

Organization

Efficient organization of component variability can greatly reduce the time spent on product interface development, as designers often need to search for specific components or states. My goal is to minimize this time. Through testing, I found that effective use of component variants depends on a combined display of settings. All components are configured through selection and switching, with intuitive names to help designers quickly find the desired state.

While developing the Design System, I prioritized multiplatform compatibility but separated the iOS and Android libraries due to their distinct features. It consists of four files: Palette, Icon Pack, and iOS and Android Component Libraries, allowing product designers to connect only the necessary libraries. This setup allows designers to integrate only the necessary libraries, which is especially useful for projects transitioning to the unified Design System. It supports gradual migration and the development of new color themes. This flexibility ensures consistency across all mobile apps while allowing each platform to maintain its unique characteristics, with a wide range of components and variations for both iOS and Android.

Convenient way to group, organize and vary components according to the atomic principle

Convenient work with components using the Variants settings

Native and simplified library structure with structured naming of components

Clickable components for prototyping

One of the most important aspects of Design System is the ability of the components to adapt to different platforms and devices. A product designer using Design System shouldn't change the parameters of the components for their product by choice. I need to give the designer a Design System that will meet all modern technical requirements, facilitate and speed up the work of the designer.

MULTIPLATFORM

Responsive Design

Seamless transition while migrating between Android and iOS apps on any device

I wanted to save balance between brand integrity across all platforms and meeting platform-specific regulations. To do this, I relied on my knowledge and experience with various mobile products, which allowed me to achieve the desired results.

Recognizable brand identity for users of bank's digital products

Compliance with platform-specific regulations for native use by users of bank applications

ACCESSIBILITY ACCESSIBILITY

Accessibility

Inclusive design works for all users: the designer does not work for a certain type of people, but makes sure that the product solves the problems of people in different life scenarios - it doesn't matter if the users are sight challenged due to the age or congenital health issues.

Most people with blindness use all sorts of technologies: the Internet, computers or laptops and smartphones that are connected to special programs.

CARE FOR EVERY USER

Banking products also consider users with disabilities in order to prevent the clients from changing the bank

According to the UN, the number of visually impaired in relation to the population of the Earth as a percentage:

According to the International Agency for the Prevention of Blindness, today approximately 284 million inhabitants of the Earth have visual impairments, about 39 million of them are completely deprived of it. More than 19 million children have eye diseases.

The main causes of disability: 85% - common disease, 10.4% - disabled since childhood, 1.4% - labor injuries, 1.6% - military injuries, 1% - other causes.

By age groups, million

In the world, 8% of all men and 0.5% of women have some type of color blindness. Deuteranopia and protanopia - are conditions when green and red colors look almost the same to a person: they are yellow-brown and differ only in brightness.

COLOR ACCESSIBILITY

246000000 ÷ 7021836029 = 0,035

0.55%

39000000 ÷ 7021836029 = 0,0055

of the population is completely blind

Do not use color pairs that may confuse users with color blindness

3.5%

of the population are visually impaired

Don't just use color to encode states, duplicate the state with text and an icon

Maintain a minimum contrast ratio of 4.5:1

A designer can use this table when working with interfaces and be sure that the chosen colors will not cause difficulties in perception for people with color blindness.

Table of acceptable color combinations

Design System should exclude the possibility of the designer using incorrect colors in interfaces in advance. I have developed rules and tables that the designer can check at any time to make sure that the interfaces will be friendly for each user.

HOW IT WORKS IN THE INTERFACE

Good colour difference

Poor colour difference

An example of how a person with color blindness sees acolours of a circular chart

An example of how a person with color blindness sees acolours of a circular chart

A good font contrast makes it easier to read, while a bad one, obviously, makes the opposite. There are several rules that help improve reading on mobile devices. Such rules can be taken into account by a product designer in the interface development, so they were also placed in the Design System guideline.

DYNAMIC FONTS

Sequence is always a core tenet of UX, and is also important for users with disabilities.

Font size & Content structure

It is important to use the fonts of the underlying platform, which eliminates possible errors in displaying fonts in components. Also a designer of a mobile app has to think about easy-to-read structure in advance.

Text line length

The optimal text line length for comfortable reading is 30-40 characters.

Responsive Fonts

If the user set a comfortable font size for a device in the phone settings, mobile app must support this setting. This function must be configured at the level of the application code or Design System.

VOICE OVER

Dynamic font table

The dynamic font feature is configured at the code level in Design System. The maximum increase in fonts through the phone settings is +3 points. I have tested the entire library of components for the valid operation of this function and changing fonts.

Gesture-based way to read content on a mobile device screen. Visually impaired users can navigate the interface and understand what actions need to be taken and what the results of these actions will be. The Design System guide also includes some rules for developing accessible interfaces.

Actions should be clearly marked and separated from the text, and actions that take the user outside the application must be voiced.

All scenarios for your product should be carefully reviewed for availability, preferably by a competent group of beta testers.

Source, information portal: https://specialviewportal.ru

01

02

03

A

In addition to the correct combination of colors, it is worth paying attention to the contrast of texts in interfaces. Contrast requirements are described in the WCAG guidelines developed by the W3C consortium. This is one of the most important rules for the accessibility of interfaces, and the designer must take this into account. Design System provides for this and excludes the possibility of using non-contrast fonts by the designer in advance. Please note that in addition to the brightness of the black color, the size and style of the fonts in the interface also matter.

text contrast

Contrast support levels

Contrast values

Heading — 4,5:1
Text — 7:1

Low level. Minimum availability. Ensuring availability without loss of information. We focus our project on this level.

AA

Middle level. Full accessibility to all interface elements.

AAA

High level. The level of accessibility of specialized Internet resources for the visually impaired.

Heading — 3:1
Text — 4,5:1

AA

AAA

principles

Subsequence

Navigation

Testing

constituents

Types of screen readers

WCAG contains recommendations for ensuring accessibility for all types of nosologies, and WAR-ARIA regulates exclusively the technical part of the implementation of accessibility for blind users

International Standards

Illustrations, photos and videos must have a voice-over description of what is happening in them. Official documents and tables must be submitted in HTML format. Also, the zoom function should be available in applications.

Voice Over for iOS & MacOS, Talk Back for Android, NVDA and Jaws for Windows.

Available content

SLA SLA SLA SLA SLA

Together with the team manager, we prepared an SLA between a Design System development team and users, where we, as a Design System development team, guarantee a high level of quality of the service provided, taking into account the teams' compliance with certain rules for using the library.

Design System is flexible and easy to use for a large company that aims at creating multiple apps that must be united by a single concept, but at the same time be unique.

The mobile library team develops, supports and delivers components for other bank's teams, and our main goal is to reduce the time and cost of resources for the development of bank products. In case of unacceptable modification of components by designers, it may be difficult to get the correct components in the code, which will lead to an increase in the time for product development. The following rules must be followed by designers:

ALLOWED CHANGES

Service level agreement

workflow & INTERACTION WITH USERS

forbidden CHANGES

Color scheme

The development of a personal color theme for the application should be carried out taking into account the corporate requirements of the bank and 100% synchronization with the basic set of Design System tokens, it is also possible to add additional colors if required.

Typography

The development of a personal font theme for the application should be carried out taking into account 100% synchronization with the basic set of font theme Design System, it is also possible to add additional fonts if required.

Variants

Modification of components and elements can only be carried out through the allowed settings that exist in the options.

Such a modification of components will require large investments in design, development and testing of the user Design System development time.

Now the work on Design System is a joint work of all designers, developers and testers of the bank. Because every user of Design System is interested in improving Design System as a general tool. At the first stages, our team developed and tested a library with a certain number of components and their behavior. We had a workflow on which we worked smoothly.

At this point of Design System development, I immersed myself in testing Design System as a product for designers. I participated in the development of one of the bank's products where I studied the interaction of designers with Design System during the development of a new banking product. I identified the pros and cons of working with Design System and improved the work with it.

But after Design System was released, new participants were added to our workflow - users of Design System. The fact is that in the process of developing products based on the library of the bank, the library constantly requires the development of new components, elements and their behavior. But we cannot make a clumsy, heavy and complicated Design System, this is contrary to our initial goals. Therefore, a new workflow was developed that includes requests from teams and identifies the relevance of these requests.

Component development flow

Changing the fillet radius of components

What does it affect

Changing component behavior

Reassigning font styles and color tokens

Resizing components

Mobile application HOME GYM

A sports community where the person individuality comes above all and motivation and communication are main values

The critical view of the homepage simple functionality and identifying the real reason for the customer to buy

Website for a Production Center

VIEW OTHER PROJECTS

Marketplace: a bank partnership project

Multi-functional bank project with cashback, marketplace and gamification functions in one

A few more projects in different design branches: branding, graphic design, typography etc.

Quick preview of my other projects