VTB Insurance is one of the top 10 largest Russian insurance companies with over 90 branches and outlets throughout the country.

Challenge

Create a new version of VTB Insurance corporate website. Focus: online sales and mobile accessibility.
Development Stages
Usability
UX Design
UI Design
Front-end
Website CMS, deployment and support provided by Articul Media.
Online calculators on product pages and branded illustrations provided by the customer.

Landing page concept

Insurance fee is calculated on the landing page.
The first unit fits into 670px block which is the minimum height for 1366x768px screen resolution.
Other important services are accessible from the landing page as well.

VTB Insurance corporate
website UX Design

Online calculators
Mobile version
Branches and contacts
Solutions for individuals
Solutions for businesses
About us
Other services

Landing page evolution

The homepage has undergone a long way of 12 iterations. We brought the design from the concept to the final version making sure it fully complies with VTB Insurance brandbook.

Quick fee calculation on the landing page

When selling insurance online it is crucial to show the approximate insurance fee straight away. This is why we made all calculators easily accessible on the landing page.
Try the demo. All calculations are approximate.
Buy online:
Health
Injuries and disability
Insurance for injuries, casualties and rehabilitation for adults and minors
Critical illness
Insurance for cancer and oncology, stroke, heart attack and other deseases.
Automotive
OMI
Compulsory third party liability insurance
CNC
Fully comprehensive automobile insurance
Home
House
Insurance for fire, natural disasters and other disaster situations
Apartment
Insurance for household incidents, including electrical and leakages

Injuries and disability

Insurance for injuries, casualties and rehabilitation for adults and minors.
Adults under 55
Minors from 3 to 17
Insurance amount
Insurance period
Include sports activites insurance
Include hospitalization insurance
2 534 q
In the mobile version the calculators are also accessible on the landing page.
Pull to see the full
page layout on mobile

Insurance Product Categories

To simplify product navigation
we added comprehendible insurance
descriptions instead of product
brand names.
Package insurance solutions are
listed in a separate block. Typically,
customers who have bought such a
product offline only come to the
website to activate it.

Contacts

Branches and outlets are easy to find on the interactive map or by nearest metro station, both from a desktop computer and on mobile devices.
Pull to see the full
page layout on mobile
Interactive Moscow metro map © Art. Lebedev Studio

Is that all?

In total, we have prototyped, designed and put together 58 templates, including those for mobile version and English version. All of them are currently being implemented at vtbins.ru website.

Tools and technologies

UX Design: OmniGraffle.
UI Design: Photoshop, Illustrator, Sketch.
Markup: HTML5/CSS3, Jade, Stylus, Gulp, jQuery, SVG.
Front-end: JavaScript, AngularJS.

Team

Project Lead
Alexander Samsonov
Project Managers
Olga Azovskaya
Anton Bespalov
UX Design
Ivan Zverev
UI Design
Sasha Belichenko
Alexander Lopatyuk
Markup
Alexander Shiryaev
Front-end
Anton Novikov

Spent time

Total time spent: 620 hours, including:
20% — UX Design
20% — UI Design
20% — Markup
10% — Front-end
30% — Project Management
Since 2012 VTB Insurance is expanding its online presence,
with our close involvement.
Other projects for VTB Insurance:
— Interfaces for car insurance quote calculators and online orders;