Online Banking

At the beginning of 2015 I designed a new version of the main page and navigation of the online banking service for a well known Russian bank as part of the test job for future cooperation. While working in Usethics I got a chance to work together with this client on a regular basis, so I was very pleased to meet it again.

Current version of the online banking service was out of date and should be re-designed from scratch. That's why I was given wide discretion in terms of changing visual style, navigation and main page content, with some client's restrictions and preferences.

All mockups below are in Russian.

Old

Illustration

New

Illustration

Old version used fixed 3 columns grid for every single page which drastically limits design feasibility. The main page suffered the most from this limitation — as long as the bank adds new features trying to promote them, some new space on the main page is required for these new features.

In spite of the fact that the new version of the page contains much more information, new features and services it looks simple and more accessible due the flexible grid and white space with minimal graphics and the main accent on the content.

Illustration

Fully featured adaptive design was not an option for this project. The client had already chosen a platform for the new version and it does not support adaptive design. In fact the bank was not interested in development of a mobile version as it already has native mobile apps for online banking which cope with given scenarios much better than web version.

Although new version is not focused on mobile devices, the size of desktop monitors differs significantly, that's why a kind of adaptive design providing minimum and maximum width of a page was implemented in the new version.

Example for the Finances block:

Illustration
Illustration

Navigation was changed significantly too. I restructured it and used horizontal layout instead of vertical to save almost one third of screen space.

Navigation is fixed at the page header while scrolling to be always at hand.

Illustration

Overall number of level one sections was reduced to seven. But not one of them was lost or forgotten, since the client's request was to keep the general structure of the site.

Illustration
Illustration

Summary

This case was a great experience and I'm satisfied with results the client and I had achieved while working together. Naturally, it all didn't go always smoothly, some controversies upon the project arose from time to time, but at the end the client got what it wanted and I was pleased with the job I done. The final version of the site will be completed by the internal services of the bank.

Project mockups

Main page
PNG, 2195x2209

Navigation (operations)
PNG, 1792x987

Navigation (services)
PNG, 1423x906

Fixed navigation
PNG, 1424x910