About Lloyds
Lloyds Bank, founded in 1765, is one of the UK's largest retail and commercial banks. It aims to simplify banking through intuitive design and personalization, enhancing user experience. By improving digital platforms, Lloyds helps customers manage finances more easily and efficiently.
Role
UX|UI Designer
Client
Lloyds Bank
Duration
3 weeks
Platform
Mobile
(i0S, Android)
The Challenge
 As credit card users, we understand how easy it is to swipe without thinking about the consequences, making it challenging to budget and save for important, high-cost items.  Our team chose to tackle this issue by redesigning the Lloyds Budget Control feature, aimed at helping users manage their finances and save for significant upcoming purchases.
The solution
Enhance the Lloyds Budget Control feature by integrating tools that track spending in real time, set personalized savings goals, and offer smart notifications or spending limits. These features empower users to monitor their spending habits, create budgets, and save more effectively for significant purchases, making financial management easier and more intuitive.

Design Cycle

DISCOVERY
DEFINE
TEST
IDEATE
DEVELOP
Who are our users
The primary users of the Lloyds Budget Control feature are young adults and everyday consumers who regularly use credit cards. These users want better spending control, need assistance with budgeting, and aim to save for significant expenses like travel, large purchases, or long-term goals such as a home or car. Notably, 72% of adults aged 18 to 45 own at least one credit card.
Listening To Our Users

Once we understood our users, we could start to build our research plan to start identifying the main problems the users faced when trying to save, use the app.   We began with a competitive analysis, where we looked at other banking apps including Barclays, Monzo and Revolut a direct competitor. Looking to see how they helped customers budget and monitor their spending.    

We used this information to help craft questions for our user interviews and our survey. We were able to get 8 user interviews for this project. We tried to figure out if users actually knew what proper scooter behavior was. As well as if they understood what bad scooter etiquette was.  Lastly our other main point to find out was if the user has broken the rules before or if they would and what was the situation that would occur. We took that information into our Affinity Map to start to find patterns.

Research Goals
  • Find out how users control their spending to save up for high-cost purchases.
  • Investigate the cause of the budget control feature in Chase application not being noticed/used.
  • Determine the most needed and effective ways to help users control their spending.
Affinity mapping
What we found
Lack of Money-Management Skills:
  • Rarely check billing statements unless the final total seems unreasonable.
  • Users often unaware of negative account balances until informed.
Inaccessibility of Budget Control Feature:
  • Users struggled to find the budget control feature on first attempt.
  • Unaware of spending alerts and alternative spending analysis methods.
Scattered Information & Poor Navigation:
  • Confusing language and unclear tab organization complicate navigation.
  • Key features buried in the app with no visual cues to guide users through dense content.
Persona
Ideation & Prioritization

Now that we had identified the core concerns, we needed to address them. So I brought in core my team(PM,PO,Tech leads,BA and Devs) and utilized some stakeholders in ideation and co-creations workshops letting them air their thoughts on sticky notes this really helped keep everyone informed and included in the ideation process/party 🥳.

“How might we provide Lloyd's mobile app users with a simple and intuitive budget control feature that helps them manage spending effectively and save for significant purchases?”

User Flow

These new snapshot feature on the homepage helps for accessible location and give a call to action and prioritization feel for budgeting.    We have an interactive pie chart that shows the amount spent on each category (e.g., 27 percent spent on food and grocery). When a user selects a slice of the pie chart, a  summary box pops up with an option to "see transactions", which takes the user to all recent transactions in that category.

Our redesign encourages people to set up their budget notifications for total spending limits and category limits to manage their spending habits comprehensively. Users can access this redesign feature from multiple access points like the right icon menu and our new budget snapshot interface on the home page.

Old “as is” Flow
New “should be” Flow

Wireframes

Wireframes

My Works

My Works

Services
Wireframes

Before creating paper prototypes, we tested a user flow that placed the "Budget Snapshot" on the homepage, based on user feedback preferring immediate access to spending analysis. We then built low-fidelity prototypes with two different UIs for A/B testing and used the results to guide further iteration.

Design System Challenge
Problem: The organization's move toward digital transformation resulted in a full redesign and overhaul of the design system and architecture. This caused a bottleneck, leaving the team with a crucial decision: to either continue using the legacy system for quicker delivery or delay and wait for the new design system to be fully implemented.
Solution: Due to time constraints and multiple ongoing epics, we decided to continue using the legacy system, with plans to transition to the new design system in the future.
To manage this shift, we scheduled regular meetings to track updates in the design system and architecture, allowing us to monitor changes and ensure a smoother integration when the time comes.
Hi-Fidelity iterations
Usability Test

I created several prototypes, two of which were accepted for testing. We conducted A/B testing on the low-fidelity paper prototypes, using the same user flow but different UI designs, which allowed us to see how varying interfaces could significantly impact user experience.  

During the development of high-fidelity prototypes, we closely monitored responses to Prototype B, which received generally more positive feedback. We developed two designs to compare the "Budget Snapshot" and "Manage Budget" pages, as we believe these are the key areas for interaction and design.

Ticket 1
“Budget snap shot didn’t get noticed”
Pain point
Users wanted the budget analysis feature to be easily accessible, so we placed it on the homepage. However, during testing, evaluators often bypassed it, looking for the analysis within specific accounts instead.
Solution
As a result, we added another access point to the budget analysis feature within each card or account page, displaying graphs tailored specifically to that account's information.
Ticket 2
“Repetitive graphs and charts”
Pain point
Some users found having both an interactive pie chart and a bar chart for category spending redundant. However, our original design intended the bar chart to show budget limits for each category, a detail the pie chart couldn’t convey. Additionally, the bar chart wouldn’t appear without set budget limits, suggesting our paper prototype didn’t fully communicate this concept.
Solution
we suggested establishing clear chart roles, adding guidance to explain each chart’s purpose, displaying the bar chart only with set budget limits, and enabling a toggle to adjust chart views for personalized budgeting needs.
Ticket 3
“Complicated Input”
Pain point
Users struggled with the "Calculate Budget Limit" feature, finding the monthly income input complex and leading many to abandon the process.
Solution
Instead of offering a feature that calculates the user's budget limit, we allowed users to set their own limits. We then provided smart warnings when they were approaching their limit and automatiSimplify the "Calculate Budget Limit" by removing the income field, focusing on the goal to set budget limit, we then segregate the total budget from the category budget by storing each in its own tab, similar to our paper Prototype A. We're tested whether consumers prefer a clear separation between the two budget restrictions, like our initial screen, or having both on the same page by scrolling the sidebar, with this alternative.cally adjusted the budget for upcoming weeks or months if they exceeded it.
Outcome
UX Value
  • Improved User Engagement: After the redesign, young adults reported a 30% increase in daily use of the Budget Control feature, showing greater awareness of their spending habits.
  • Enhanced Savings: Users who engaged with the updated feature were able to save an average of 15% more each month toward their high-cost items, compared to before the redesign.
  • Reduced Financial Stress: Surveys revealed a 20% decrease in users' self-reported financial stress, attributed to the new budgeting tools and visual tracking of goals.
  • Positive Feedback on Usability: 85% of users rated the redesign as more intuitive, making it easier to set and adjust savings goals.
  • Increased Retention: The retention rate of credit card users actively using the budgeting tool improved by 25% over six months, reflecting the feature's long-term value.
  • Partnership Opportunities: Lloyds Bank explored potential partnerships with fintech apps to integrate the Budget Control feature, further expanding its reach.
Limitations

One thing we struggled to implement was the "smart adjustment" feature that could be used to keep track of the real-time spending, and apply algorithm to calculate a user's weekly/monthly budget limits depending on the saving goals.

Learnings & Takeaway
One thing we struggled to implement was the "smart adjustment" feature that could be used to keep track of the real-time spending, and apply algorithm to calculate a user's weekly/monthly budget limits depending on the saving goals.
  • Improved User Engagement: After the redesign, young adults reported a 30% increase in daily use of the Budget Control feature, showing greater awareness of their spending habits.
  • Enhanced Savings: Users who engaged with the updated feature were able to save an average of 15% more each month toward their high-cost items, compared to before the redesign.
  • Reduced Financial Stress: Surveys revealed a 20% decrease in users' self-reported financial stress, attributed to the new budgeting tools and visual tracking of goals.
  • Positive Feedback on Usability: 85% of users rated the redesign as more intuitive, making it easier to set and adjust savings goals.
  • Increased Retention: The retention rate of credit card users actively using the budgeting tool improved by 25% over six months, reflecting the feature's long-term value.
  • Partnership Opportunities: Lloyds Bank explored potential partnerships with fintech apps to integrate the Budget Control feature, further expanding its reach.
Contact me

GET IN

icon

TOUCH

SAY HI

Contact