Lloyds Banking App

Re-design the current banking app to incorporate subscription and budget features.

It can be a hard task for many online banking app users to keep track of their upcoming payments. Helpful reminders and notifications can sometimes help users see into the future when paying bills or saving for a rainy day.

Tools

Figma, Invision, Notion

Role

Product Designer

Application

Mobile

Timeline

2 Weeks

Problem Statement

It’s hard to keep track of all the products and services that we have subscribed to every month. All we see is money deducting from our accounts, sometimes from services that we don’t need anymore. How can you design a product which helps manage subscriptions?

Pain points:

  • How might we get users to budget their expenses without using too many external tools.
  • How might we get users to see what financial outgoings they have pending.

Solution

Goal:

To create a one-stop solution for users to manage their finances using a banking app.

Approach:

  • Understanding what tools current banking app users use to manage their monthly outgoings.
  • Gain insight into current Lloyds banking app user’s pain points and how this re-design could benefit their experience.

Design Process

  • Survey
  • Affinity mapping
  • User persona
  • Customer journey map
  • Crazy 8’s
  • Low Fidelity
  • Mid Fidelity
  • High Fidelity

1. Discovery

The user research conducted was for me to get insight into how banking app users currently organise their subscriptions and how many subscriptions they manage on a monthly basis. This factor will be able to help me evaluate aspects within the app that are a luxury than a necessity.

The affinity map diagram uses comments found from current Lloyds banking app users who had left a review on the ios app store or google play store. Based on the comments from real users I had organised the listing from various UI issues to feature suggestions.

2. Define

A friendly reminder is sometimes all that is needed to aid a user’s overall goal, when thinking about features users can get complacent to systems and formats they are used to however that doesn’t mean minor adjustments cant benefit them to ensure common mistakes are not missed in the future, this can improve their brand awareness and loyalty when considering products in the future. For users who do not enjoy the task of creating and maintaining notes of what subscriptions/ payments are due on a monthly basis, a fix from a UI perspective could be formatting the accessibility of the app so such things as pending payments are clearly identifiable.

<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><span data-buffer="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);">User Persona

Many users have their own variation of the best way for them to organise their pending finances. The user featured indicates a person who has their life more or less in order but would sometimes like more support from their bank when future planning their monetary goals.

<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal;">Customer Journey

Through the process of a customer journey we can explore certain pain points a user experiences when attempting to re-budget their outgoing expenses. From this we can understand the featured user is not someone who enjoys the task of budgeting his finances to keep up to date with payments, however a resolution to his issue would be for all the pending subscriptions to be clearly formatted within his banking app so he is fully aware of what his pending charges are. 

3. Ideate

During the crazy 8’s ideation process I was focused on creating the key aspects within the landing page. I understood that many current Lloyds banking app users would like modern features to be integrated such as “curved edges” and “bubbles”.

In this phase, I had also taken into consideration the current format of traditional banking apps vs fintech apps currently in the market. With online being fintech banks core business resource there is no surprise as to why their take on user aid is so important. I had considered if the Lloyds app integrated a modern approach without changing the branded values how their existing customer base would react.

Crazy 8's

4. Prototype

Low Fidelity

I have used invision to produce my low fidelity wireframes, I feel this gave me the best opportunity to take key aspects from the crazy 8’s session and visually format it. For this stage placement was very important and included factors of what users are customed to when banking with Lloyds. A feature I thought was important to include was the ‘log out’ icon in the top right corner. This was a feature users within my research had a major issue with and I found the rationale behind having the log out icon on the navigation bar very important.

Another feature I felt justified the placement of was the calendar, based on my user research many users rely on their own personal calendars to organise finances and found it would be resourceful to have this as a featured option.

Mid Fidelity

Style Guide

The style guide incorporates key branding elements for Lloyds banking group, the colour is a key feature and I have taken the 60/30/10 rule (which is an interior design term for finding a balance between colours used) into consideration to the app’s colour.

High Fidelity

Colour was an important factor when designing this app, I wanted to ensure the current brand’s identity would not be lost within the design. Within the homepage features, I had used aspects from Monzo with the card placement header (I think it is important for users to easily be able to scroll and it maintains the user to stay on the homepage). Based on my user research I found that over 90% of users asked use their banking app to check their balance.

The calendar is a key feature as a result from one of the pain points users face when wanting to visually see what pending outgoings they have. Similarly, the budget feature is important for users to build up their own monetary targets all within one app.

Lloyds - High (Homepage)-2
Lloyds - High (Calendar)-2
Lloyds - High (Budget)-2

Accessibly Considerations

I have focused on ensuring contrast in relation to colour used within the app is consistent and adheres to AA or AAA ratings. I have made it an important factor to include text descriptions to the icons within the navigation bars.

Overview

There is much room for improvement when reflecting the many needs for a banking app user and what factors to consider the most important, the app design has clear formatting and has taken into consideration some feedback given by real users regarding the overall UI of the current app. The goal of creating a solution for users to manage their finances has been answered within the calendar and budget pages.

<span data-metadata="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);"><span data-buffer="" style="font-style: normal; font-variant-caps: normal; white-space: normal; caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0);">Self Reflection

When considering the most realistic way to tackle a pain point that not all users may experience can be hard to think but I found with the help of intensive user research by real-world users common complaints/ issues can be beneficial to understanding the overall user issue. I found with my research users when asked the right question you can gain an understanding of how people deal with problems, much of the time users don’t know how to resolve an issue that they’ve never had to question themselves. This is why I find it extremely important for businesses to maintain strong customer relationships and understand when the market is changing to a new format for the greater good.