A new experience of daily mobile banking — a UX case study

Pierre Degeorges

2.5 weeks — London, UK

🔍 User research
🎨 Design studio
✍️ Prototyping
📱 Usability testing
🎬 Interaction design

0. Introduction

At this moment of digital transformation, the banking sector is faced with several challenges, including that of user experience. This is explained in part by the competition of mobile banks, neo-banks or FinTechs, namely financial services (account balances, transfers, wires) accessible from a mobile phone.

Why is user experience considered?

Mobile banks are faster, easier and offer a range of reduced services for less. For example, the British banks Monzo and Starling offer accounts with a debit card at no extra charge. The processes are faster and lighter (eg.: the application TransferWise allows the creation of an account and the placement of an international wire transfer in only a few clicks and the information that is advised is easier to digest. Today, all the advantages are brought together so that mobile banks have become the champions of customer satisfaction.

In this context, ‘’traditional’’ banks must innovate if they want to remain abreast of the quality standards of mobile banks. Many of them have arrived in The United Kingdom, such as Natwest, which has won the prize for the best banking application in March, 2018, for the second year running.

How can banks rely on their expertise and history to offer a competitive user experience?

This summer, in the context of a bootcamp with General Assembly in London, I had the opportunity to work in a team of 3 UX designers on an application concept which approaches this subject during a two-week sprint.

The case study on Barclays bank. The initial brief asked us to create a smart phone application linked to a new type of account targeting smart phone users.

In order to approach this problem, we planned our sprint in 3 big phases:

1. Research

In order to familiarize ourselves with the banking applications, we carried out some competition research of 7 actors in financial services which we categorized into 3 groups:

Competition research

  • Traditional banks that often offer a large range of services but have heavier processes and a less competitive user experience
  • Mobile banks that offer strong user experience, fast access allowed by an enrolment (account creation) in fewer steps but a limited array of services,
  • Applications offering a specialized financial service which offer strong experience, easy and fast enrolment and innovate generally through the simplification of a complex service (ex. TransferWise and international wire transfers).

User research

During our research phase, we interviewed 13 selected people according to how frequently they used their smart phones and depending on whether they had at least two banking products (all had at least one savings product and one credit card).

We created our questionnaire in order to better understand the needs and expectations of users when they:

  • Access information
  • Carry out an international transfer on two accounts from different devices
  • Manage their expenses
  • Manage a lost or stolen card

Key points

When analyzing the interviews that we led, it was revealed that users:

  • Want a clear and simple view of financial flows entering and leaving their accounts,
  • Want to be informed of operational costs and the length of time of each step during a foreign wire transfer,
  • Wish to manage a budget but don’t want to put too much effort into each task. It’s not about having a specific, strict budget to respect each month but rather about saving any excess
  • Have a general understanding of the financial activity of their account in a simple and visual way

Who is our target user?

After having reviewed all information collected during interviews, we identified common personality traits (of needs and goals) which have helped us to create a persona. The persona is an efficient tool because it allows us to keep perspective throughout the conception process, a synthesis of our research phase.

In terms of the initial brief and out research results, we have thus constructed our persona:

User journey

Liam would like to have a clear timeline of his expenses to carry out international wire transfers, quickly understanding some information or easily plan his next invoices. The current application that he uses does not allow him to carry out these operations quickly and in an understandable way.

Information architecture

In order to respond to user needs, we have constructed a site plan allowing all necessary tasks to be carried out, from account balance checks, detailed payments to the possibility of doing local/international wire transfers.

Our first plan was :

  • Welcome
  • My account
  • Send money

However, based on our research results, we believed that a 4th category was missing. A screen allowing a balance check — as simple as that — doesn’t allow the users to view all the financial information they want to see.

We have, therefore, added a 4th category, Insights, allowing access to different, simple and targeted visual presentations (eg.: expense types, average spending / day of the week, etc.) which will be presented in the form of widgets.

Our second plan has become:

  • Welcome
  • My account
  • Send money
  • Insights

3. Prototype & test

Prioritize functionalities

Several functionalities allow our users to resolve problems. We have carried out an exercise in order to prioritize the selection of essential functionalities that we will include in our MVP.

This exercise is simple; it’s a question of positioning the functionalities on a matrix according to:

  • Whether they are expected by the user
  • If the user needs them

We have decided to construct the following elements and functionalities in priority:

  • Notifications relative to account activity
  • Global expense information
  • International payments
  • Lost/stolen card reporting
  • Balance check
  • Local payments
  • Account information
  • Messages to adviser

Design studio

“Enlightened trial and error succeeds over the planning of the lone genius.” — Peter Skillman, IDEO

In order to move on quickly to a first prototype, we had recourse to design studio techniques; quick sketching when working under time constraints is efficient because it leads to faster results.

Our first prototype is a succession of screens designed on paper. We tested them with many users in order to understand if they have managed to check their account or carry out a payment easily.

Paper prototyping — why is it necessary?

In this project, we have realized how important it is to present financial information which is complex and dense in a clear and concise manner. In order to assist users to see it more clearly, the paper prototype is a good exercise to test several options.

This technique also allowed us to go more quickly in the conception process when relying on user feedback (facing a draft, users are in general more inclined to give ideas for improvement and to participate in the discussion).

Guerilla test for fast results

In order to use logos and terms that are sufficiently understandable to users, we tested many ideas that were selected on the go.

  • Testing a relevant terminology to design a financial operation (Pay? / transfer? Send money?)

Logo test

  • Testing logos that appropriately match their meaning (are they understandable without text?)

Testing different ways to present an account balance to choose the easiest and simplest to understand

From the paper prototype to the high-fidelity prototype

Welcome — recent activity on my account

My account — detailed list of transactions

4. Final design

Branding

Barclays style guide

In this project, it seemed important to us to remain coherent with the Barclays business brand identity and not to bring changes to it. Barclays is a strong brand in the UK; its logo (the eagle) and its colour (sky blue) are strong and easily identifiable. One change in the iconography or in the colour range could disrupt the message sent by the product which was not our wish.

In terms of experience, we have opted for an application

  • Visual: in the way in which information is delivered,
  • Efficient: simplifying the daily banking experience when focusing on the essential,
  • Authentic: the application must make the tradition and values of Barclays clear

Prototype

Final mock-up

Login and welcome screen

Detailed activity of my account: past and pending transactions

“Sending money”: carrying out a wire transfer in the UK and abroad

“Insights”: understanding expenditure better via widgets

Next steps

If this project must continue, we are considering improving expense management by making it more personalized (according to collected user data) and by constructing adapted recommendations for different spending profiles; for example, a big spender would be helped to restrain his expenses and would have a different standard of interactivity compared to that of a more frugal profile.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade