UX Case Study | Mobile Banking App

General Assembly | Concept Project

11 min readJul 1, 2019

Overview

Barclays recognise that there are a number of new service providers disrupting the banking space through the provision of easy to use, online-only bank accounts.

In order to compete with these service providers, Barclays is launching an online-only account intended for use by active smartphone users.

Challenge

The challenge set by the client was to develop an interactive prototype underpinned by a robust UX process that provides users with the following:

Feature 1: Real-time balance of the bank account.
Feature 2: Notifications to let users know of a significant change to the account.
Feature 3: Allows users to send money instantly to other account holders.
Feature 4: Allow users to report a lost or stolen card.
Feature 5: Mobile-first responsive website or a native application.

Team Organisation & Roles

Our team consisted of Emily Jekyll, Chris Le and myself (Neil Winchester). We utilised a flat structure and issues were resolved through open discussion. A project canvas was developed to ensure that we all understood the challenge.

Team members contributed to every activity whilst leveraging our strengths:

I focused on the development of user flows, process and client presentation.
Chris focused on branding & accessibility.
Emily focused on the competitor analysis, navigation & sitemaps.

Process

The following graphic outlines the process we used to address the challenge.

Part 1 | Research

To understand the banking market, we performed a competitor analysis of traditional banking apps and those with an online-only presence.

User research was conducted using the tools outlined below enabling the team to understand the market and why users were using other banking apps & services.

Part 2 | User Research Synthesis

The team took the output from the user research and generated an Affinity Map and a series of Experience Maps. This enabled the synthesis of insights & opportunities.

Five key insights were extracted from the Affinity Mapping process. These are listed below with supporting quotes from the user research.

Three of the insights aligned directly with the requirements of the brief:

02 Security — this encompassed all aspects from logging on to the account, notifications of a change to account and being able to freeze or cancel a debit card (Features 2 & 4 of brief).
03 Check Balance — a minimum feature for any banking application (Feature 1).
04 Payments & Transactions — being able to transfer money to colleagues/friends (Feature 3).

Two other insights were also identified:

01 Sign-up — a key pain point with all users as it required either an existing account and often required hard copy information to be presented & verified at a physical bank. Monzo / Revolut were deemed to be market leaders as their complete process could (in general) be completed online.
05 Heritage — traditional banks such as Barclays were still seen as more trustworthy & safe than the disruptors.

These were taken forward into the development of the solution.

Technology Selection

Feature 5 of the brief related to the type of technology to be used — a mobile-first responsive website or a native application.

The team performed research that when combined with the affinity mapping indicated that a native app for the iPhone (5s-8) would offer the best solution for the initial rollout as outlined below.

MVP Feature Prioritization

The synthesis identified a number of features that could be implemented. In order to reduce these to an acceptable number for a minimum viable product (MVP,) a feature prioritization matrix was used.

Scenario Development

The output from the synthesis led to the generation of 5 scenarios to be taken forward.

Part 3 | Ideation

Persona Development & Problem Statements

The team developed a persona to represent the typical user of the banking app to help us map out and understand the user’s goals and frustrations.

We also developed a ‘problem statement’ using a ‘How Might We’ structure for each scenario in order to support the design ideation process and development of the user flows.

Design Studio & Product Benchmarking

The team held a design studio where we generated a set of sketch concepts for each of the defined scenarios. These were evaluated by the team, critiqued and the most viable taken forward.

One of the key user insights related to the sign-up process, therefore we benchmarked the Monzo and Revolut processes to understand their respective strengths and weaknesses.

Benchmarking Revolut and Monzo sign-up processes

This enabled the identification of opportunities to optimise the sign-up flow through reduction of user steps & identification of aspects from the market leaders that were contrary to the design we wanted to achieve.

User Flows

A ‘happy path’ user flow was developed for each scenario/problem statement. This created a framework against which the prototypes could be developed.

Branding

An exercise was performed to develop the brand for the new account & app building on Barclay’s existing heritage. A sample is outlined below.

Based on the objective of the challenge, a working title of ‘Evolve’ and circular logo were developed and taken forward into the prototyping stage.

Site Map and App Navigation

The team structured the native app through the use of a simple site map.

We developed a navigation structure for the UI underpinned by common design patterns to reduce user learning, the likelihood of user error & enhance the user experience.

Part 4 | Prototyping & Testing

Responsibilities for the prototype & testing for each scenario were split amongst my team members. I was responsible for developing Scenario 1 (Sign up for a new account) and Scenario 5 (Freeze / unfreeze card).

A three-stage prototype & testing process was applied initially using a paper prototype, through to mid-fidelity wireframes and onto a high-fidelity interactive prototype (developed using Sketch & InVision).

User testing was performed with 5 users for each iteration underpinned by a test plan & script to ensure consistency.

Scenario 1: Sign-up for a new account

Our principal objectives were to make the sign-up process quick & easy and to remove the need for the user to go into the branch to present hardcopy information (passports, driving licences etc.).

We assumed that Barclays has the back end technology to perform online verification of ID documentation (e.g. driving license) via uploaded photos.

The benchmarking exercise that we had performed enabled the development of the initial prototype that satisfied the objectives through:

Removing non-relevant steps |For example — removing the need to add funds as part of the sign-up process. Our user research supported this and indicated that such a step did not feel customer oriented and was only financially motivated.
Streamlining technology | It was assumed our solution would use optical character recognition to extract critical information from ID documents— removing the need to scan documents and enter personal information.

These led to a reduction in steps & data entry of approximately 35% when compared to Monzo & Revolut.

The paper prototype tested well, however, users fed back that there was too much information presented on a number of the screens — an example is shown in Image A below.

Example 1: Sign Up process (items in red and green highlight the issues)

We believed that this was a function of the paper prototype and indeed when the concept was converted to mid-fidelity, the issue did disappear.

However, the interactive nature of the mid-fidelity concept raised other issues specifically relating to the copy used.

An example of this is shown in Image B above that is presented to the user when they have successfully captured their ID and recorded a selfie video confirming their identification. The copy remained the same before and after the required information was captured:

Take a picture of your ID so we can check & capture the information

Due to this, users became confused as to whether they had completed the task correctly or were still required to capture additional ID information.

The issue was resolved in the high-fidelity iterations through a change of copy as shown in Image C and outlined below.

Pre-information Capture: Take a picture of your ID so we can check & capture the information
Post Information Capture: Complete image suitable for verification.

This approach was applied to other areas where the copy proved to be an issue.

The GIF below provides an animated overview of the complete sign-up process (1min 30sec).

Scenario 5: Freeze / Unfreeze Card

Feature 4 of the brief was based on enabling the user to report a lost or stolen card. Although this was achieved, the user research indicated that enabling a user to freeze/unfreeze their card was an important feature. This is because it enables users to manage situations where they may have mislaid their card but don't believe that it is lost or stolen.

The paper prototype (Image A below) was well received and users quickly and easily found the correct screens to freeze their lost card, however, they struggled to find the CTA to cancel the card (found under ‘Manage Card’).

This was addressed on the mid-fidelity prototype where a clear CTA to ‘Cancel Card’ was positioned above the card image so as to be out of reach (and thus accidental operation) of a typical users thumb reach.

Unfortunately, testing showed that this actually created confusion as it seemed to be of higher importance to users due to the hierarchical structure of the information.

The ‘Cancel Card’ CTA was relocated with the other functions in the high-fidelity prototype. This was tested and was shown to remove confusion with users being able to Freeze, Unfreeze or Cancel their card.

The GIF below provides an animated overview of the card freeze / unfreeze process.

Accessibility Testing

As part of the branding exercise, we used the existing Barclays blue that appears in their logo and repeatedly throughout on their digital product.

We tested the accessibility of the high-fidelity prototype solution using the Home Office Accessibility guidelines.

All aspects passed the colourblind simulation test, however, the Barclays blue failed the contrast checker test when used with white text.

It is proposed that this is addressed as part of a further iteration of the high-fidelity prototype — options include:

Use an alternative colour where the Barclays blue is used.
Use the Barclays blue with black text.

Part 5 | Achievements & Next Steps

Challenge & Insights

01 Sign-up — a simple linear process was developed that enables a new user to sign-up for a new account via their mobile phone and submit ID information electronically. The process has been optimised and has 35% fewer steps for sign-up when compared to the market leaders.
02 Security (Features 2 & 4 of brief) — the solution notifies users of significant changes through push notifications & users can freeze, unfreeze or cancel a card. It is proposed that the solution would use inherent security features of the phone (e.g. fingerprint) for app log-on.
03 Check Balance (Feature 1) — the solution provides the user with their account balance on login.
04 Payments & Transactions (Feature 3) — the solution enables users to send money to other accounts holders and we are proposing to use contactless payment to transfer fund to other mobile phone users.
05 Heritage: Through branding, we remained aligned with the Barclays brand identity whilst injecting a revitalised feel through the use of additional colours.

System-Wide Considerations

Whilst the solution addresses the digital component, research indicates that other aspects need to be addressed if the account & app are to be successful:

Customer Service & Staff Training: Banks such as Monzo & Revolut were reported to have exceptional customers service where issues are addressed in minutes by knowledgeable staff. Therefore a strong customer service spine needs to be in place before the launch of the Evolve app.
Open Banking: It is proposed that the solution is expanded to be the ‘open banking’ hub enabling users to access all of their online accounts from Barclays and other banks.
App Champions & Rollout: It is proposed that app champions are identified within the digital sector who can ‘spread the word’ and look to see the app grow through ‘word of mouth’.

Key Learning:

Whilst the whole project was a learning experience with a series of new tools used such as Design Studios & Benchmarking, the main learning came from the impact of accessibility and the fact that it should be performed on a progressive basis testing as the solution and branding development to avoid any unwanted surprises!

Next Steps

Contact

If you enjoyed this read, like to learn more about this project or have any questions, email me or contact me on LinkedIn.

Other Scenarios

As stated, all scenarios were developed to provide a complete MVP. The following GIF animations provide a full overview of the solution developed.