Case Study: HSBC Mobile Banking

Taking on the young pretenders.

My girlfriend is a long-time customer of HSBC. Every time she tries to use the banking app on her iPad or mobile I see the air turned blue with curses and frustration. Temperamental connectivity, an antiquated security system, lack of features, a dated looking UI. Definitely worth looking at, I thought.

Why redesign?
Before I even put pencil to paper I did some research into the current state of retail banking and unearthed some surprising statistics. According to Capgemini’s 2016 Retail Banking Report:

  • Only 16% of customers would buy an additional product from their bank
  • While retail banks improved on last year overall in every sector for Customer Experience, Gen Y registered lower than every other demographic
  • 87.1% of banks surveyed felt that their existing infrastructure was inadequate to compete against emerging fintech providers
  • Positive experience is up for all customer outreach channels (branch, internet, mobile) but actual interactions are down 3.2% for branches and even 6% for internet - meanwhile mobile interactions are up nearly 3%
  • Only 45.8% of Gen Y customers would commit to stay with their bank for the next six months

It seems obvious, therefore, that the entire retail banking industry is experiencing a seismic shift toward mobile interactions - something which has fuelled the rise of digital-only fintech providers. Generally these companies are known as ‘modular producers’ - each app handles a specific, niche function such as contactless payments.

Established retail banks cover much more than this, but the new providers are applying for bank certification and it’s being granted. HSBC and its High Street counterparts need to stay ahead of this wave, which will be difficult without significant investment of time and capital.

HSBC App Concept Visuals

The app
In an audit of the top 5 UK banking apps, agency Adaptive Lab scored HSBC 5th out of 5, citing ‘usability issues and a lack of key functionality’. App reviews on both the App Store and Google Play tell a similar tale - clunky interfaces not optimised for touch gestures, confusing labels and poor server connectivity.

Look and feel
It has to be said, HSBC do not have the most exciting brand guidelines. The main colours are pure white, pure black and red. Even the logo features a slightly customised version of Times New Roman. Still, banking apps aren’t there to look pretty, they are there to be functional.

I removed all of the useless stock photography found on the current app, which numerous studies show to add nothing to a user’s experience. I don’t need to see a dramatic shot of the New York skyline when I’m trying to transfer my friend a tenner for my share of the takeaway.

Instead the focus is on clean typography, icons and hierarchy, allowing people to complete tasks quickly and easily. For the sake of consistency I have kept the brand’s preferred typeface, Univers, and their colour palette despite its limitations.

HSBC App Concept Visuals

I divided the app into five main areas:

  • Home, a simple overview of all accounts and their balances;
  • Find Us, where you can use GPS to locate either the nearest HSBC branch, nearest ATM or both;
  • Accounts, where payments, transfers and Standing Orders are made and managed;
  • Spending, which contains account statements, spending data and the ability to set Budgets;
  • Help, which contains security-based actions and FAQs on app operation.

This navigation is placed at the bottom of the screen at all times once logged in, in order to facilitate more fluid navigation around the app. I believe that the majority of time will be spent in the Accounts and Spending sections, so these are placed more centrally to make them easier to reach.

Sub-sections of each area can be navigated to through the secondary nav which appears at the top when required - a standard design pattern for both iOS and Android.

HSBC App Concept Visuals

The majority of information in the app is held in cards, which has become a go-to design pattern for displaying singular pieces of information. They are also very suited to touch devices due to their size, and their ubiquity means they are a familiar design pattern to use.

To maximise screen real estate, swipe gestures are used to select different account cards and months. Elements ‘bleed’ off the edge of the screen to provide a visual cue that they can be swiped across, along with a dot ‘selector’ beneath the cards to show your place in the carousel.

One of the major criticisms levelled at the current HSBC app by Adaptive Lab was the confusing language that didn’t tie in at all with user expectations. In my design I’ve tried not only to make the labelling of sections clear and unambiguous, but also to make the language element of interaction as engaging as possible.

For example, when setting up a new Standing Order or Budget in the app, the user interacts with a Natural Language style form rather than a traditional series of text fields and dropdown. Once filled out, the form creates a complete sentence which is much easier to understand, and I daresay more human, than a series of discrete values.

Another method of data entry I have used here is for amounts of money, found on the Transfer and Standing Order sections. Here, the underlined £0.00 allows a user to tap, bring up a keypad and enter a figure.

There are many apps in this market that would choose to include a slider here, which I have deliberately chosen not to do. Sliders can be engaging and fun to use, but they are difficult to manipulate when a precise value is required, as would be the case here.

HSBC App Concept Visuals

Data insights
Fintech apps can be very powerful in terms of analytics. While I’m not sure there’s huge value in knowing your average spend per visit to Starbucks last month (besides novelty), there are some aspects of data presentation that I wanted to emulate.

The Spending section of the app is where you will find the conventional statement of in and out transactions per account, under the Statement tab. Payments out are highlighted red, payments in are highlighted green. There’s also a search field that allows you to search for a specific transaction. So far, so vanilla.

But it’s in the Breakdown that things start to get interesting. Here we can see an interactive line graph that shows you your balance level at any time. Pressing anywhere on the line reveals a tooltip with that particular date and specific balance level, while dragging it right or left continues it into the previous or next month respectively.

Beneath this we have a number of statistics; while quite general, they offer a good insight into user spending month-by-month and can alert the user to any worrying trends.

The Spending Review collates merchants into specific categories to provide a pie chart of where money is being spent, be it travel, clothes, food, bills and so on. Tapping on one of these groups shows each specific transaction and allows the user to set a Budget.

Using the Natural Language form style mentioned above, the user can easily set goals for spending certain amounts on a category, or putting money into savings. These pair with an optional notification system to alert the user to imminent overspends, in real time.

To discuss this project in more detail, please do get in touch.