Brief: Improve the landing page; improve the "Checking the latest transactions" and "make payments" use cases.
Target audience's motivations: be able to check different bank accounts; be able to make actions effortlessly.
Business vision:"Belmont Bank" is a fictional retail bank addressed to millennials.
The bank required its mobile bank app to be modern but simple to use.
In order to discover and understand the problem as well as the users main goals I started by gathering data.
After having conducted user interviews and online surveys with the target audience, I felt my ideas were clearer:
USER GOALS AND DESIRES:
Check the latest transactions
Transfer money to new or saved bank accounts
Be able to request money or split the bills between friends and family
USER PAIN POINTS:
Not be able to understand the exact location of the transactions.
The screens are not very clear and organised
There is not suggestions about recipients getting notifications.
There is not option to change currency.
PLAYBOOK: USER INTERVIEWS, USER TESTING, COMPETITIVE BENCHMARKS,
USER JOURNEY MAP
With structured data on hand I defined the possible structure and the ideal user journey for the two specific use cases.
The user flow should have been easy and effortless.
After an attentive analysis, I decided to design the mobile app by:
mixing visual elements and text so it would be more easy to relate the transaction to places or people.
cutting off complexity and use progressive disclosure
making the hard facts easy to find: account balance, pending payments.
mapping where the expenses had made.
considering the fact that millennials make an extensive use of social media.
PLAYBOOK: ASSUMPTION MAP, THE GOLDEN PATH, DESIGN PRINCIPLES
I sketched many variant solutions as possible such as different interactions and microinteractions:
how the system behave, how it respond to actions how communicate results and how it helps to fulfil intentions.
PLAYBOOK: CRAZY 8'S, SOLUTION SKETCH
In this phase I decided to narrow down the various choices to one solution; based on this
I created high fidelity wireframes:
I set the various possible cards as the actual real representation of them (users can swipe the cards on the right or the left to see the info related to them)
I decided to create a "Transactions" tab in the navigation bar.
Next to the name of the place where the transaction took place I also put the logo of the business.
When clicking on logo a separated page appears with the exact location on the map where the related transaction had been made.
The app automatically suggests the available Belmont Bank recipients accounts thanks to the access to the user's phone contacts.
The recipients are displayed with their profile photos if they have one.
The recipients can be notified via social media or messages.