User feedbacks:
- Cumbersome manual processes impede workflow and evoke frustration.
- The outdated, non-user-friendly portal demands excessive mental and physical effort.
- Users face task incompletions, resulting in wasted time.
Back
Reimagining Banking Convenience: Increasing User Engagement & Task Efficiency
Existing Lloyds Bank mobile app lacks user-friendly design, intuitive navigation, and essential features, leading to confusion, inefficient expense tracking, and frustrating savings process.
My Role
Product Designer
Duration
4 Weeks
Platform
iOS
Key Stakeholders
Professor Savraj Matharu
Michal Heichel
Jonathan Levi
overview
Lloyds Banking Group stands as one of the largest banks in the United Kingdom, with over 14 million individuals utilizing their mobile application for daily banking activities.
As part of the Interactive Media Practice at the University of Westminster, I was assigned this project by my university professor, with the objective of enhancing user engagement and implementing essential features.
Highlights
A glimpse of the final design
1.1
Efficient card management
Prototype
1.2
Switching between the accounts
Prototype
Target audiences
Who are we solving for?
Millennials, Gen Z
Research summary
A glimpse into key research findings
Market research insights
As I did comprehensive market research & competitive analysis, the insights proved invaluable for understanding the UK banking industry. These insights are crucial for Lloyds to develop a competitive mobile application aligned with customer needs and expectations.
- Convenience is the key factor for customers choosing digital-only banks, with millennials and Gen Z valuing the ability to trade crypto and stocks.
- Younger generations are more likely to switch banks, with 57% of Gen Z adults switching their main account within two years of turning 18.
- Digital-only banks like Starling and Monzo have higher current account customer satisfaction rates compared to traditional banks like Lloyds, Barclays, and HSBC.
- High-street bank customers feel negative about their bank mainly due to savings rates and customer service.
- Traditional banks still hold the advantage of trust among customers, with most respondents using them for important financial transactions and arrangements.
2.1
A snapshot of the competitive analysis canvas
image
User research insights
I read existing user reviews from app stores, ran an online survey, and conducted interviews with real users to understand the problems users are having.
- Difficulty in finding desired information quickly and easily.
- Inability to track expenses and earnings due to the lack of budgeting tools and account analytics.
- Limited options for personalizing savings goals based on individual preferences.
- Frustrating card management experience within the application.
- Comparatively better services offered by competitors like Natwest, Monzo, and Barclays.
- Inability to download annual statements directly from the application, leading to time wasted in contacting customer support for solutions.
- Desire for visibility of Investment ISAs information within the application.
3.1
A snapshot of the research canvas
image
3.2
A snapshot of the only survey
image
Problem space
Understanding the core problems
- Outdated and poorly designed app screens with a lot of usability risks that resulting a high cognitive load and interaction cost.
- Important banking features such as account analytics, expense tracking, budgeting tools are currently unavailable.
- Process of saving money is lengthy and frustrating. Users can't customize their saving goals and track their savings.
- Important screens such as home is filled with unrelated features whereas daily and frequently used features such as daily transactions are hidden under menu.
- Lack of visual hierarchy throughout the design. Users can’t really differentiate the less-important information from the vital ones.
Objectives
My goals: To increase user engagement and task satisfaction, as well as to inspire the younger generation to save more.
Behavioural m.a.t.
Mapping the behavioural pattern of the users
When you want a user to perform a task, they need three things: sufficient motivation to undertake the task, a prompt or trigger, and the ability to complete it (which includes time, money, physical and mental ability).
I have used the BJ Fogg Model to map these elements of behavior that encourage or discourage our target users from performing mobile banking activities and making financial decisions. Based on this, I have designed a new interface that takes these aspects into consideration, in order to make the experience both engaging and intuitive for our users.
Key motivators
User friendly design
Ease of use
Personalisation
Transparency & feedbacks
Expense tracking
Incentives
Automated system
Ability
Limited time (Extremely busy)
Associated difficulty with the desired action
Financial solvency
Extra costs (Living, business, and others)
Spending habits
Financial & technical literacy
triggers/prompts
Changes in activities
Banking activity notifications
When they need to do a banking related task
Key questions
During the research phase, some questions came to my mind
How can I encourage the younger generation to save more money?
How can I ensure efficient expence tracking and better money management within the app?
Information Architecture (IA)
Setting up the right direction
To ensure a seamless user experience, I completely reorganised the overall Information Architecture (IA) of the application, aligning it with iOS guidelines and defining clear interaction patterns.
4.1
Reorganised Information Architecture
image
Visual design direction
The definitive guide to consistency and scalability
Scalable design system
In pursuit of a seamless and consistent design process, I meticulously crafted a comprehensive design system for this project. This section provides a glimpse of its implementation.
5.1
Usage of colors
image
5.2
Design component - List item
image
Hi-fidelity Wireframes
6.1
Snapshot of high fidelity wireframes
image
Finalising the visual patterns
To make sure the consistency throughout the application I tried multiple visual patterns and finalised one.
7.1
Visual patterns experimentation
image
Interaction planning for the application
1. Structural Navigation Pattern
To divide the hierarchy at the root level I used flat navigation pattern. Although existing Lloyds application has this navigation patter.
When there are internal navigations, I used drill-down navigation pattern (tree structure).
2. Overlay Navigation Pattern
When there are no internal navigations, I used overlay navigation pattern. It can be high friction, low friction, and non modal based on the contents.
7.2
Defining interaction pattern for an iOS application
image
Responsiveness
One of the crucial part of designing iOS application is to make sure the design is responsive across different screen sizes and design assets are perfectly exported for perfect implementation.
7.3
Design responsiveness across all devices
image
Solutions
As a desginer I believe, you have to have logical explanation of every design decision. To make this process even easier, I follow a standard set of questions while designing a particular screen or a complete user flow.
I believe, if a designer keeps these questions in mind while designing, he/she will never design wrong solutions. This process also helps designers to iterate better and the engineers and managers to understand the design and make constructive feedbacks.
What is the intent of the users to use this flow or screen? What are they trying to do?
What information are they seeking, and which details require more attention?
What are the actions that can be done in this particular screen or flow?
How can we make sure smooth navigation?
How can we help the users to make better decision faster?
Solution 01
Facilitating seamless navigation and efficient access to important informations
Before
8.1
High level audit of existing home screen
image
User story
I want to be able to easily navigate throughout the app and access banking services, so I can efficiently manage my tasks and save time.
Final design
I redesigned the essential screens with a familiar interface resembling traditional online banking. Utilizing availability heuristic, I highlighted daily activities for user-centric performance. Additionally, I employed seamless navigation and interaction, ensuring users adapt effortlessly.
Easy access to important information.
Easy navigation throughout the app.
9.1
Accessing important informations prototype
animated loop
9.2
New design of home and related screens
image
Solution 02
An intuitive savings system that provides convenience while saving money
Before
10.1
High level audit of existing savings goal screen
image
User story
I want to set different saving goals, customise them as needed, and track my saving progress, so that I can have personalised control over my financial goals and be motivated to save more.
Final design
I have implemented a new feature called "Savings Pot" that enables users to create multiple saving goals based on their specific objectives and timelines.
They can add or withdraw money from these pots anytime. Additionally, to make the experience more engaging for users, I have gamified it by offering rewards.
Ensured personalized experience by offering customization.
User can track their savings progress that fosters sense of accomplishment.
Gamified the experience to encourage younger generation to save more.
11.2
Savings pot
image
11.3
Savings pot creation flow
image
11.4
Savings pot features
image
Solution 03
Effective card management
Before
12.1
High level audit of existing card details screen
image
User story
I want an easy and efficient way to manage all my cards in one place, so that I can access and monitor my card details, transactions, and balances conveniently.
Final design
I have designed the dashboard by using the concept of minimalism. The available cards are displayed on the dashboard, along with quick access to key actions. In order to give users more control and autonomy over their financial transactions and card usage, I have included card controls. These controls allow users to freeze their card, manage their payment methods, and view their spending limits.
Reduced the cognitive load and interaction cost required to perceive card information.
Easy access to key informations.
Ensured transparency and control.
13.1
Efficient card management
Prototype
13.2
Card management flow
image
Solution 04
Intuitive budgeting tool and clear visual representation of banking activities
User story
I want to set monthly budgets for my regular spendings and like to have a clear visual representation of my banking activities so that I can track my expenses, manage my money well, easily understand my financial status,
and save money.
Final design
I have presented incomes and spendings in clear language along with easily understandable charts, which makes use of the availability heuristic to help users place high importance on available data.
To enable users to comprehend the spending insights more effectively, I have broken down the spending information into specific categories.
In line with the principle of mental accounting, I have allowed users to set flexible budgets into categories to help them mentally allocate their funds and track their spending in a more organized and purposeful manner.
Fostered responsible spending
Provided transparent banking insights
Ensured transparency and control.
Increased user engagement.
14.1
Account analytics and budgeting
image
Design Achievements
.png)