Russian Commercial Bank with state participation. It is the main structure of the VTB Group.
In 2019, the Group’s development strategy for the next 3 years was adopted. Its main criteria are:
- Strengthening the Business Model
- Accelerating Business Digitalization
- Building an advanced technology platform
- Acceleration of bank’s response to market developments
Project Summary
The bank approached me on the recommendation of one of the design leaders who had worked with me before, to become the leader of one of the VTB department heads
VTB Bank has set before us the task to develop a website that will help to improve relations with customers, making their experience more comfortable and effective.
The challenge
- Update the technology platform to increase the speed of the site
- Implement design systems for faster and cheaper scaling
- Consider information architecture and common approaches to navigation
- Implement new performance tools
- Change the approach to information services of the site
- Provide customer support not only at the «sale» stage, but also after
Lead UX
Vusial 3D designer
VTB Bank
Germany/Russia department
C4D, Blender, Redshift, Figma, Notion, Hotjar
Usability testing, Over 100 3D Illustrations, Management team, Wire-framing, Internal Pages, Main Pages, Feedback for designers, Present idea to management, Benchmark, Competitor Analysism Usability Testing, Design System
2021 September - 2022 February
My role & Structure team
Before proceeding with the site transformation, we have set up the system work of the team of designers and the format of interaction with bank products.
The core of the cross-functional team is the design lead and product chain. The bank’s product manager is our contact with the business customer, developers, analysts and other project participants
Research
Review and metrics of market
When selecting competitors, we looked at the banks from two sides - from the business indicators, namely from the profit size, and from the user review
Competitor analysis/Benchmark
To help VTB shape the image of the result, we analyzed the visual trends of financial institutions list of competitors
Internal competitors: Sberbank, Alfabank, Gazprombank, Raiffeisenbank, Tinkoff Bank, RocketBank
International competitors: Monzo, Revolut, N26, Acorns, Robinhood, Affirm, Klarna, Bunq
Value Proposition after research
Internal experience:
- Most banks look modern
- Most banks have a design system, the pages look whole
- Focus on selling banners, contrast target buttons
- The main pages of banks are aimed mainly at individuals
- Photo style is often used
- Some banks use personalization
International experience:
- Banks use simple design, understandable to each user
-Most banks have a design system, the pages look whole
-The first screen always contains the target action or service
-The main focus is to demonstrate the product as openly and effectively as possible
-Minimalist color palette
-Many banks use personalization
Analysis of old website
Summary
- Cumbersome navigation system, leveling site comprehensibility
- Prevalence of negative user experience in mobile version
- Many services of the site are hidden behind advertising banners
- Static changes make website image irrelevant
- The site is much less trusted than the sites of strong competitors
Solution
Wireframes & UserFlow
Based off the initial project's materials and research, We got to work on the wireframes. I decided to divide for every person some pages and conquer screens. I had reviewed all the pages with emphasize on UX and got feedback for design on internal meeting.
We have done wire-prototypes and make stakeholders test ensured we weren’t missing anything important that users will need from the design.
Meeting insights/Style concept
The main styling element of the new visual language was the gradient obtained by mixing two VTB brand colors. Later, the gradients on the site were given variability to solve a variety of interface tasks. They are mainly used to highlight important information. All decisions as always decided at rallies
How a dark theme works
The theme is switched through the toggle. The decision to use the «switch» was chosen after questioning the clients who considered this option optimal.
Why do we need black theme
We did some research on the bank’s clients and got some insights that helped us work. It became obvious that users needed a dark site theme.
- People with visual impairment actively use mobile banking, both in applications and on sites.
- It is important for businesses to ensure maximum availability of products for different segments of the target audience.
- Visually impaired people do not use the standard dashboard on sites, as they have difficulty configuring it.
- Default settings for panels for the visually impaired are inconvenient and make it difficult to read content.
- Disabling graphics on the site for visually impaired customers tends to infringe on their rights rather than enhance their capabilities.
- The required contrast of the key elements should correspond to 7:1, the minimum size of the text - 16.
- Reducing user vision burden
- Increase client availability of the interface
Hire staff team
Now, after creating the design concept, we and my department had to hire a designer to create interior design illustrations
As there were few designers on the market with 3D skills, personally my suggestion was to make an onboarding course for designers in cinema 3D and make templates.
Design-concept (usability testing)
In late 2021, the new homepage of the VTB website was launched in a pilot format. If desired, the client could return to the old design. This avoided possible negative reactions from the audience. After undergoing the necessary tests and modifications, in January 2022, the previous version of the site was lost. Then the end-to-end navigation system of the site was updated.
3D illustrations
1000+ illustrations developed especially for the new VTB website. My team had done over 250+ illustration, for each I was giving review also created 50+ illustration without help team
Design System
It is a set of components, rules, regulations and tools to improve the quality and speed of development of new products, as well as to effectively support existing ones.
- Synchronization of design and development commands
- Maximum layout and site matching
- Fast implementation of new functionality
- Bank brand recognition in a digital environment
- The Elements and Styles Inventory, available in Figma for Designers and Sellers
- Component set in Storybook for developers
- Page assembly and administration interface for content managers.
All components of the system are integrated with each other.
Main Page animation
Final Design
Development
Communication
with development team
It was important for us to make sure that when delivering our design that it was easy for developers to understand.
I reviewed the flow of all screens and notes were added in figma, it means developer team even without viewing the prototype, could still understand how interactions will take place. The arrows give context on how the flow moves from one screen to the next. Specs were added to provide measurements for all the UI elements and padding. This reduces the timeline of the launch project and any uncertainty that developers may have on the overall design.
Outcomes
Statistic
- Site downloads 2 times faster according to the top 10 pages due to the implementation of the design system and graphics optimization
- 37% increase in visits site with conversion to product or service application
- 59% lower failure rate
connected with problems in navigation and site architecture
- 20% increase in site availability
- Thanks to the dark eyes for customers with vision problems
- Number of traffic doubled compared to December 2020
- Viewing depth more than 3 times increased
compared to December 2020.
Summary
- Conducted a full-scale analysis of the solution through expert evaluation, benchmarking and competitive analysis, usability testing
- Created new navigation system, website architecture and user experience, taking into account existing technological limitations
- Developed and protected the concept of a new visual language
- Developed page design based on mobile experience, adaptability and inclusiveness
- Developed and implemented a design system, formed an approach to the design of communications
- Updated approach to information services of the site
- Connect design with new performance marketing tools
- Organized the work of a large team of designers and integrated it into the bank’s food teams
Other numbers
Reduce load on support center
We created with my team a new set of popular questions in the question page, provided block for main page - "questions and answers", added an online support button
— We have reduced load on support center for 15% in summary for past year
Improve conversion rate
I suggested using Hotjar for recording and thermal card for analyzing users' feedback and make review in the future
— We've improved conversation rate for 35% in summary for the past year with the hotjar tool
