FLY UX

BELMONT BANK   

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:

INSIGHTS:

USER GOALS AND DESIRES:

  • Check the latest transactions

  • Transfer money to new or saved bank accounts

  • Make payments

  • 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

DISCOVER (DIVERGE)

Journey Map

DEFINE(converge):

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

notes

SKETCH (diverge)

 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

 

DECIDE (CONVERGE)

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.

PROTOTYPE (DIVERGE)

 I created a High fidelity prototype by designing the screens through “Sketch” and then export the screens to Axure in order to create hotspots and render the prototype interactive. 

PLAYBOOK: interactive prototype.

Link to the Axure prototype: https://twwaby.axshare.com