October, 2017
MyBank – iOS & Android mobile bank app
MyBank is a mobile bank app for iOS and Android platforms. It's a fully-functional app that allows B2C users to do all bank operations using a mobile phone only.
When I began to design the app I interviewed 40+ people who use different mobile bank apps. They told me several important points:
When I began to design the app I interviewed 40+ people who use different mobile bank apps. They told me several important points:
1
Users open a bank app 3-4 times a week (so it's pretty much everyday app);
2
The most frequent operations are: to check the count of money on the card, to transfer money between cards, pay for the mobile phone and send money to the other person.
3
65% of users watch statistics several times a month;
4
42% of users check transactions history;
5
30% of users constantly use templates for frequent payments.
So I focused on helping users to reach the most frequent operations fast and placed them on the main screen. The first step was to make a rough prototype.
MyBank wireframe made in Balsamiq
Navigation
I decided to use the main page as a dashboard and an entry point to all the sections instead of a classical menu. So I placed all links to the main sections on the main screen. A user can reach any section he needs with one click. In order to return to the main screen, he clicks the Back icon.
Main workflow in iOS app (Sketch)
Authorisation and a main screen
To use some functions a user even doesn't have to be authorised in the app. For example to see currency course, find ATM or call to the bank in case of emergency. I placed these functions under a hamburger menu on the authorisation screen.
Authorisation and a main screen of MyBank app
After sign in a user sees the main screen with his debit and credit cards. He can access additional sections, try new features such as compare his expenses with other people. He also can choose a frequent payment to make from the panel at the bottom of the page. A pannel slides up in order to show all possible payments.
Cards and payments
After a user clicks a card on the main page he goes to the detailed card page. Here he can top up or block the card and see a detailed history of transactions.
In the top of the page there is a slider of all users cards. The last in the row is empty card – an opportunity to order a new card.
In the top of the page there is a slider of all users cards. The last in the row is empty card – an opportunity to order a new card.
Detailed card page and payment pages in MyBank iOS app
Third and fourth screens show how a user can transfer money between his cards or pay another MyBank client.
Other sections
Straight from the first screen, a user can open other sections such as statistics, currencies, ATMs, settings and a live chat with technical support.
Other sections in the app
On the statistics page, a user can switch between months and income or outcome diagrams. On the currencies page, he can add additional currency pairs. On the ATMs page, a user can search for specific ATM.
Android app
I've made Android app design as well. It has pretty much the same navigation system and differs in details. E.g. panel with payments options on the main screen is not translucent on the Android, on the card page there is a floating action button and a shape of live chat balloons is more angular than in iOS version.
Android app screens
In general MyBank app turned out pretty simple. It has no complicated menu, every section can be reached from the main page.
It is also quite flexible and scalable. Any new section can be added easily and won't increase a complexity of the app.
It is also quite flexible and scalable. Any new section can be added easily and won't increase a complexity of the app.
Olga Shavrina
Product manager. Human being