Whole Bank | Case


Whole Bank started operations in Framingham, a small town in Massachusetts, United States. Their goal was to offer a different way to save and manage money by giving customers innovative options such as virtual currencies.

Whole Bank detected that the conventional Credit/Debit System shows big inconveniences for traveling customers.

Customers depend on the card to be able to get money from the ATM machines or to make payments. So they would like to develop a tool to let the bank customers pay without having to use the physical card.


In favor to confirm this hypothesis brought by Whole Bank and understand the users pain points, was conducted some interviews with possible users of the bank. With this was identified the following pains:

  • Lack of balance between security and practicality;
  • Lack of safety when walking with valuables (eg, cell phone, money);
  • Lack of agility;
  • Be surprised at the lack of bank balance;
  • Lack of a quick solution to problems of theft, wrong purchase, etc ;
  • Limit of credit cards;
  • Difficulty in drawing money out of the country;
  • High taxes.


Among the problems mentioned, the most recurring was about practicality and security, so I took these keywords and unleashed them with a brainstorm, then did another brainstorming process with possible solutions that balanced both goals.



As a solution I opted for the use of fingerprints, as a justification I can say that fingerprint is something personal, unique and practical to use, prevents the user from using the phone in places where they do not feel safe, solving the problem of security versus practicality, and also that this idea was mentioned in an interview. But in the course of the evolution of the idea and the usability tests, I came across a problem, many people have the damaged fingerprint or use third-party card.

So I had to find another way, I did not give up using fingerprint, but I decided to add a second option, the use of numeric password.

Explaining my proposal better, it is about adding travel mode and non-fingerprint travel mode in the Whole Bank application. The mode of travel is the temporary replacement of the credit card by the fingerprint, which is already registered in the banks. It works in the following steps:

Activation of function:

1- Activating travel mode

You must sign in into Whole Bank app and turn on travel mode.

2- Selecting the duration of the trip.

Once you’ve turned on travel mode, the app will prompt you to select how much time do you going to spend in the travel. After that you can already use a function.

Use of function via fingerprint payment:

1- Service

The service must inform about the purchase in the machine.

2- Insert your digital into the payment machine.

In the place of inserting the credit card you will be asked to insert your digital in the machine.

3- Identification and selection of account

After you insert the fingerprint, the system going to identify you and you should select which bank account do you would like to use.

4- Password

After you had your account checked, confirm your operation with your card password.

5- Feedback

The machine should give feedback on the purchase approval.

6- Comprovation

After the purchase, the proof of purchase will be printed , sent by e-mail or SMS.

7- Confirmation

There will be a notification on your mobile phone to confirm that you done a payment, and case haven’t been you , you can report and blocked your card/account.

And the non-fingerprint travel mode is an alternative to digital use, allowing people to not / want to use a digital possibility to use a function. The app will generate a password that will expire in a certain time period and that can be only used once.

How this function works?

Activation of function:

  1. Activating travel mode

You must sign into the Whole Bank app and activate travel mode.

2. Selecting the duration of the trip

Once you’ve enabled travel mode, the app will prompt you to select the duration of the trip.

3. Code Generation

Once you have activated the function you must go to Travel mode without digital and generate a code that you can use in the next purchase.

Using the function on payment:

1. Service

The attendant will put the purchase information on the machine (credit or debit, value).

2. Insertion of the code in the payment machine

Instead of entering the credit card you will be prompted to enter the code generated in the app.

3. Identification and selection of account

Once you’ve entered the code, the machine will identify you and your possible accounts, after which, you must select which one you would like to use to make the payment.

4. Password

After you and your account have been identified, you must enter your card password on the machine and confirm the operation.

5. Feedback

The machine will give feedback on the purchase approval.

6. Comprovation

After the approved purchase, the proof of purchase will be printed or sent by email or SMS.

7. Confirmation

You will receive a notification on your mobile phone to confirm that you made the purchase, otherwise you can report and block it.

App flow
Payment machine flow
App notification for confirmation

My experience

This challenge of Whole Bank was extremely rich for me, put in practice all that i’ve learned in the theory, in an organized and practical way , really made the difference.

In it was possible to make all the design thinking process, user research (empathy), main needs definition (definition), solution brainstorming (ideation) , prototyping and usability tests.

Also i had find out that a project never ends, that the design process is an endless loop (that not always happen in the same sequence, neither with all steps) and with that, get the project a better version.

In each test , we find out a new problem and a new idea. Even when doing the documentation and review the project, we find out a new need of research , a new test that should be done, or something that need to be changed in the project. But we shouldn’t forget that is always better do something than wait to get perfect.

Below you can see my initial screens and one of the tests.

first version
Second version
Position studies
Third version. From this vesion to the last one has been changed the nomenclature “travel mode without fingerprint” , to just “without fingerprint” and the order of the button “generate code” putting it after the text , with that was possible provide a logical sequence to the screen.

Product Designer at Neon. https://www.linkedin.com/in/rayanenavarro/

Love podcasts or audiobooks? Learn on the go with our new app.

The Six “P’s” for Successful Website Design

A desktop computer, laptop and tablet on a desk

Red Badger UX trend report 2018

Kleeto — Document Management Company Website Redesign Experience Case Study

My favorite news feed reader has

Anxiety and The Design of Everyday Things

With the Fans, For the Fans — Research & UX for Sports Digital Experiences

Colourful illustration of a team of people building an upright jigsaw.

Contributing to Open Source as a Designer and my journey as a Google Code-In Mentor

UX Design for App as Complete Newbie with Figma

An UX design App prototype I created for National Palace Museum

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rayane Navarro

Rayane Navarro

Product Designer at Neon. https://www.linkedin.com/in/rayanenavarro/

More from Medium


Case Study: Trip Advisor Usability Evaluation and Site Redesing — Ironhack Prework

5 DON’Ts to Avoid If You Want to Keep Your Digital Magazine Readers

Tips to keep your Digital Magazine readers

A Case Study on Urban Mobility