![](bspb-mobile-cover-background.jpg)
Bank Saint Petersburg mobile website mock-ups
![](bspb-mobile-cover-phone-1-new.png)
![](bspb-mobile-cover-phone-2.png)
bspb.ru/webmobile — from mobile devices
The leading bank of the Russian Northwestern region offers its client a full range of financial services. The mobile version of the bank’s website created at the studio helps apply for a loan, open a savings account, order a bank card, find nearest offices and ATMs and explore other bank services.
![bspb mobile phone](bspb-mobile-phone.png)
The main screen contains links to the most popular products and offers.
Each service is introduced with an original metaphor and a unique cover. The images illustrate simple but always relevant values shared by the bank’s clients.
![](services/1-1.png)
![](services/1-2.png)
![](services/1-3.png)
![](services/2-1.png)
![](services/2-2.png)
![](services/2-3.png)
![](services/3-1.png)
![](services/3-2.png)
![](services/3-3.png)
![](services/4-1.png)
![](services/4-2.png)
![](services/4-3.png)
![](services/5-1.png)
![](services/5-2.png)
![](services/5-3.png)
![](services/6-1.png)
![](services/6-2.png)
![](services/6-3.png)
This makes products easy to recognize on the website.
![](bspb-mobile-premium-phone-new.png)
This makes products easy to recognize on the website.
![bspb mobile phone](bspb-mobile-phone.png)
Before submitting an application for a service, it’s helpful to go through all conditions and rate tables presented in compact form.
When there is too much information, a special control element becomes available. It shows current location in the menu and helps move through content.
![](bspb-mobile-spec-nav-phone.png)
When there is too much information, a special control element becomes available. It shows current location in the menu and helps move through content.
Maps help find the nearest office or ATM.
![bspb mobile phone](bspb-mobile-phone.png)
![](bspb-mobile-phone-bankomat_1.gif)
![bspb mobile phone](bspb-mobile-phone.png)
![](bspb-mobile-phone-bankomat_2.png)
The mock-ups were used to create a guide for developers which includes rules and nuances of the layout.
![bspb mobile guide 2](bspb-mobile-guide-2.png)
![bspb mobile guide 1](bspb-mobile-guide-1.png)
art director
designers
illustrator
project manager
- The studio wishes to thank Pavel Kolchin, Vladimir Kitlyar and Yulia Beletskaya for their help with the project