May 17, 2018 at 13:34How to pack three large banks in one site
Until recently, the site vtb.ru fully met the requirements of VTB Bank. But after the merger of the Bank of Moscow and VTB24, it began to cover only a small segment of an expanded array of products and services. Own sites of the Bank of Moscow and VTB24 were supposed to cease to exist over time. Therefore, we had to figure out how to combine all the information so that the user clearly understood what was happening on his display. In this post we will tell how we solved this problem and came to the updated vtb.ru, launched at the beginning of the year.
The VTB digital business team, together with specialists from USABILITYLAB, conducted research, summarized the requirements of users and employees of the bank, formed the logic of the new site and developed page layouts. Bank specialists transformed mock-ups into interfaces: they analyzed UX prototypes, discussed solutions, coordinated everything and interacted with designers and technical specialists.
But first things first. This is how we created the new official site of VTB - a single access point to all products of the bank.
Any large bank consists of many divisions with different functionality. Information about them should be on the site, so it was necessary to take into account the opinion of colleagues. The plan seems to be simple: we hold meetings, collect feedback, make a website. But in the end, we remain with a scattering of blocks that can hardly be connected together.
How to solve a problem? To study the opinions of employees and users. We conducted more than 100 in-depth interviews with clients and bank employees. The information received was extremely useful - supported by our assessment, they became the foundation for finding the best solution. According to the structure of the site, we talked mainly with bank employees. And the structure and content of individual pages helped us determine the site visitors. They told why they came to the site, what they were looking for, what they were missing.
Communication with colleagues and clients has changed our ideas. At first, we planned to combine the sections for medium and large businesses into one under the name “Medium and Large Business” (or “Corporate Business”). And there, for simplicity, put information for financial organizations. After meetings with colleagues and clients from the “corporate business”, it became clear that in such a structure you can easily get lost. As a result, we left the initial plan and divided the sections into separate blocks.
Or here is an example from customers. People who want to take a small loan come to our site. They see that the minimum amount is 100 thousand rubles, and leave - they don’t need so much money. But after all, many of these visitors could have come up with a credit card, they just don’t know about it. Therefore, if on a new site a visitor enters into the calculator a cash loan in the amount of less than 100 thousand, then we will show him a credit card offer.
If the customer enters less than 100 thousand into the loan calculator, he will see an offer to apply for a credit card.
From the study, we also learned that on the old version of the site it was difficult for novice entrepreneurs to find service tariffs and sort out complex documents. On the new site, on the first screen of the "Small Business" section, we duplicated the link to the tariffs twice, and the tariffs themselves are now shown in a clear table.
Two pages for small business on the new site: the main page of the section and the page with tariffs. Transitions to the page with tariffs in the screenshot are circled in red.
Another example, this time from the Private Banking area. We found that many customers from this segment did not understand and did not use the benefits of premium services, because on the old site this information was presented unnoticed. On the new site, we divided all services for such customers into four categories and made large links to them. In the screenshot below, one of them is circled - “Family Office”.
Old and new versions of the page for Private Banking customers.
In addition to the interview, we conducted card sortings in order to form or adjust the structure of some sections. To check our structure of the “To Shareholders and Investors” section, we cut cards with section names and asked the real holders of the bank’s shares to make a site menu from them. The division into groups coincided! That was great news.
Card sorting to check the structure of the "Shareholders" section
When creating the site, we took into account that people with disabilities will use it. Visually impaired users can zoom in up to 500% without having to scroll horizontally, and the site will display correctly ( WCAG accessibility guidelines require seamless scaling up to 200%).
The main page of the site at a scale of 400%
All texts on the site are in large and contrasting fonts: the size of the main text is 15px, the size of the headers is 23px. The line width does not exceed 80 characters, as recommended by WCAG.
The main colors of the bank are cyan and blue. But they have too low a contrast with respect to each other, but when using red, there are no such problems. Therefore, in the digital environment, in addition to the two primary colors, we use red:
Contrast red buttons on the VTB website
For users with disabilities, we have created a separate settings panel. In it you can choose the color scheme, line spacing and letter spacing, font with serifs or without; enable and disable underlining of all links and images. Thus, users with special needs can fully customize the site for themselves.
Website display with increased font contrast, underlined links and increased line spacing
To make the site accessible to people with serious vision problems, we have ensured that the site works correctly with screen access programs. They sound what is displayed on the user's screen.
A fragment of the document with the markup of the reading sequence on the layout of one of the internal pages of the site
Now the site setting for visually impaired users is already fully implemented. Interaction with screen access programs is still at the debugging stage and will become fully functional in the near future.
Our new site is implemented on the Sitecore Web CMS platform and has several hundred pages. If you draw the layouts of each of them, and even do it the same way, you can spend a lot of time. So to facilitate this task and ensure scalability in the future, we decided to create templates for all standard pages.
We started this work with systematization of the design of all pages of the old VTB website, the sites of the Bank of Moscow, VTB24 and all attached documents. The result is 18 types of pages: 7 for individuals, 6 for corporate clients and 5 in sections for shareholders, investors, analysts and the press. Created 18 templates.
You can place any page of an old or new site in them.
The Product with Benefits template (left) and its implementation on the site (in the center and on the right). The page length may vary depending on the quantity and nature of the content.
One of the templates was developed taking into account not only the convenience of users, but also the requirements of SEO - this is a template of a "spreading page" from sections for legal entities. Initially, we planned that the user would switch between subsections within the same section using the top drop-down menu. But for bank products to be well indexed by search engines, links to them must be collected on a separate page.
An example of a “distributing” page template, which lists the main services related to settlement services.
The interfaces of the new site began with sketches, which we gradually changed based on the results of research and internal discussions.
First, on the page for small businesses, we wanted to make a filter of cards with descriptions of bank products in the main part of the screen. But after another series of interviews with users, they realized that they first of all needed information on opening a bank account: tariff, set of necessary documents, etc. This is what we placed on the first page of the section instead of what we gathered earlier.
Small Business page: two intermediate concepts and final implementation on the site
Of course, a lot of discussion was caused by the layout of the main page. Initially, there were three concepts: the main page as the cover of the site, the main page as a showcase of products and the more familiar option for corporate sites with a banner at the top, which we ended up with.
The first, not yet detailed, concepts of the main page of the site.
We chose the concept with a large banner for two reasons. Firstly, this ensured continuity with the Bank of Moscow and VTB24 website, which was important for the customers of these banks. Secondly, it was a proven solution in terms of promoting key products of the bank - it has long been proven to be effective.
The “Products for all occasions” block was created according to the concept of the “block of integrated solutions” - a convenient showcase of bank products. Something similar is on many internal pages of the site. But only on the main page does the block fully embody our original plan: to show the products of the bank through the prism of the life tasks of site visitors, which we determined as a result of the interview (for example, “accumulate a large amount”).
The “Products for all occasions” block on the main page of the site
In the future, using the Sitecore platform, we plan to fully personalize the contents of the main page of the site for each specific user.
The preparatory stage for the creation of the site - analysis of the requirements of different parties, development of layouts, coordination, design - took a year and a half, from the beginning of 2016 to the middle of 2017. Development took a few months, and in January 2018 a new site was launched.
Project discussion log: 109 topics, 1199 comments, 417 files
In the following articles we plan to talk about the technical side of the issue: site implementation using Sitecore Web CMS and personalization of content. In the meantime, we are waiting for your comments.
The VTB digital business team, together with specialists from USABILITYLAB, conducted research, summarized the requirements of users and employees of the bank, formed the logic of the new site and developed page layouts. Bank specialists transformed mock-ups into interfaces: they analyzed UX prototypes, discussed solutions, coordinated everything and interacted with designers and technical specialists.
But first things first. This is how we created the new official site of VTB - a single access point to all products of the bank.
Personal experience is the main thing
Any large bank consists of many divisions with different functionality. Information about them should be on the site, so it was necessary to take into account the opinion of colleagues. The plan seems to be simple: we hold meetings, collect feedback, make a website. But in the end, we remain with a scattering of blocks that can hardly be connected together.
How to solve a problem? To study the opinions of employees and users. We conducted more than 100 in-depth interviews with clients and bank employees. The information received was extremely useful - supported by our assessment, they became the foundation for finding the best solution. According to the structure of the site, we talked mainly with bank employees. And the structure and content of individual pages helped us determine the site visitors. They told why they came to the site, what they were looking for, what they were missing.
Communication with colleagues and clients has changed our ideas. At first, we planned to combine the sections for medium and large businesses into one under the name “Medium and Large Business” (or “Corporate Business”). And there, for simplicity, put information for financial organizations. After meetings with colleagues and clients from the “corporate business”, it became clear that in such a structure you can easily get lost. As a result, we left the initial plan and divided the sections into separate blocks.
Or here is an example from customers. People who want to take a small loan come to our site. They see that the minimum amount is 100 thousand rubles, and leave - they don’t need so much money. But after all, many of these visitors could have come up with a credit card, they just don’t know about it. Therefore, if on a new site a visitor enters into the calculator a cash loan in the amount of less than 100 thousand, then we will show him a credit card offer.
If the customer enters less than 100 thousand into the loan calculator, he will see an offer to apply for a credit card.
From the study, we also learned that on the old version of the site it was difficult for novice entrepreneurs to find service tariffs and sort out complex documents. On the new site, on the first screen of the "Small Business" section, we duplicated the link to the tariffs twice, and the tariffs themselves are now shown in a clear table.
Two pages for small business on the new site: the main page of the section and the page with tariffs. Transitions to the page with tariffs in the screenshot are circled in red.
Another example, this time from the Private Banking area. We found that many customers from this segment did not understand and did not use the benefits of premium services, because on the old site this information was presented unnoticed. On the new site, we divided all services for such customers into four categories and made large links to them. In the screenshot below, one of them is circled - “Family Office”.
Old and new versions of the page for Private Banking customers.
In addition to the interview, we conducted card sortings in order to form or adjust the structure of some sections. To check our structure of the “To Shareholders and Investors” section, we cut cards with section names and asked the real holders of the bank’s shares to make a site menu from them. The division into groups coincided! That was great news.
Card sorting to check the structure of the "Shareholders" section
We are working on accessibility
When creating the site, we took into account that people with disabilities will use it. Visually impaired users can zoom in up to 500% without having to scroll horizontally, and the site will display correctly ( WCAG accessibility guidelines require seamless scaling up to 200%).
The main page of the site at a scale of 400%
All texts on the site are in large and contrasting fonts: the size of the main text is 15px, the size of the headers is 23px. The line width does not exceed 80 characters, as recommended by WCAG.
The main colors of the bank are cyan and blue. But they have too low a contrast with respect to each other, but when using red, there are no such problems. Therefore, in the digital environment, in addition to the two primary colors, we use red:
Contrast red buttons on the VTB website
For users with disabilities, we have created a separate settings panel. In it you can choose the color scheme, line spacing and letter spacing, font with serifs or without; enable and disable underlining of all links and images. Thus, users with special needs can fully customize the site for themselves.
Website display with increased font contrast, underlined links and increased line spacing
To make the site accessible to people with serious vision problems, we have ensured that the site works correctly with screen access programs. They sound what is displayed on the user's screen.
A fragment of the document with the markup of the reading sequence on the layout of one of the internal pages of the site
Now the site setting for visually impaired users is already fully implemented. Interaction with screen access programs is still at the debugging stage and will become fully functional in the near future.
Templating
Our new site is implemented on the Sitecore Web CMS platform and has several hundred pages. If you draw the layouts of each of them, and even do it the same way, you can spend a lot of time. So to facilitate this task and ensure scalability in the future, we decided to create templates for all standard pages.
We started this work with systematization of the design of all pages of the old VTB website, the sites of the Bank of Moscow, VTB24 and all attached documents. The result is 18 types of pages: 7 for individuals, 6 for corporate clients and 5 in sections for shareholders, investors, analysts and the press. Created 18 templates.
You can place any page of an old or new site in them.
The Product with Benefits template (left) and its implementation on the site (in the center and on the right). The page length may vary depending on the quantity and nature of the content.
One of the templates was developed taking into account not only the convenience of users, but also the requirements of SEO - this is a template of a "spreading page" from sections for legal entities. Initially, we planned that the user would switch between subsections within the same section using the top drop-down menu. But for bank products to be well indexed by search engines, links to them must be collected on a separate page.
An example of a “distributing” page template, which lists the main services related to settlement services.
Layouts and compromise
The interfaces of the new site began with sketches, which we gradually changed based on the results of research and internal discussions.
First, on the page for small businesses, we wanted to make a filter of cards with descriptions of bank products in the main part of the screen. But after another series of interviews with users, they realized that they first of all needed information on opening a bank account: tariff, set of necessary documents, etc. This is what we placed on the first page of the section instead of what we gathered earlier.
Small Business page: two intermediate concepts and final implementation on the site
Of course, a lot of discussion was caused by the layout of the main page. Initially, there were three concepts: the main page as the cover of the site, the main page as a showcase of products and the more familiar option for corporate sites with a banner at the top, which we ended up with.
The first, not yet detailed, concepts of the main page of the site.
We chose the concept with a large banner for two reasons. Firstly, this ensured continuity with the Bank of Moscow and VTB24 website, which was important for the customers of these banks. Secondly, it was a proven solution in terms of promoting key products of the bank - it has long been proven to be effective.
The “Products for all occasions” block was created according to the concept of the “block of integrated solutions” - a convenient showcase of bank products. Something similar is on many internal pages of the site. But only on the main page does the block fully embody our original plan: to show the products of the bank through the prism of the life tasks of site visitors, which we determined as a result of the interview (for example, “accumulate a large amount”).
The “Products for all occasions” block on the main page of the site
In the future, using the Sitecore platform, we plan to fully personalize the contents of the main page of the site for each specific user.
The preparatory stage for the creation of the site - analysis of the requirements of different parties, development of layouts, coordination, design - took a year and a half, from the beginning of 2016 to the middle of 2017. Development took a few months, and in January 2018 a new site was launched.
Project discussion log: 109 topics, 1199 comments, 417 files
In the following articles we plan to talk about the technical side of the issue: site implementation using Sitecore Web CMS and personalization of content. In the meantime, we are waiting for your comments.