Lloyds Bank Dashboard Redesign is a user-centric project aimed at enhancing the online banking experience by improving the dashboard interface.
Role:
UX/UI Designer
Purpose:
Personal Project
Tools Used:
POP by Marvel, InVision, Figma, Adobe Illustrator
The Project
The Lloyds Bank app redesign project focused on modernizing the user experience and improving the overall functionality of the mobile application. The goal was to address user feedback, streamline the main dashboard, and create a more user-friendly and visually appealing interface. This redesign aimed to enhance usability, accessibility, and overall satisfaction for Lloyds Bank customers.
Problem Statement:
Users find the Lloyds Bank app’s dashboard cluttered and overwhelming, struggling to locate key features and manage their finances effectively. The outdated design detracts from the user experience, and the lack of customization options prevents users from personalizing their dashboard to better fit their needs.
The Process
Research
Competitor Analysis
The competitor research aimed to analyze the mobile banking apps of leading financial institutions to identify best practices, user-friendly features, and areas for improvement that could inspire the redesign of the Lloyds Bank app.
Method
Competitor analysis focused on studying the mobile apps of major banks including Barclays, HSBC, Monzo, and Nationwide.
The evaluation focused on the following key aspects:
-
User Interface (UI): Visual design, layout, and overall aesthetics.
-
User Experience (UX): Ease of navigation, intuitiveness of features, and user feedback mechanisms.
-
Features: Functionalities such as account management, money transfers, bill payments, and personalized settings.
-
Accessibility: Compliance with accessibility standards to cater to diverse user needs.
Findings:
Insights for Redesign:
Design Inspiration:
-
Utilize Monzo’s vibrant and engaging design for a modern aesthetic.
-
Incorporate Barclays’ clean and intuitive UI elements for ease of use.
Feature Enhancements:
-
Expand functionalities similar to those offered by HSBC and Monzo, such as advanced money management tools and personalized features.
-
Improve account management features to streamline user interactions.
Accessibility Improvements:
-
Adopt advanced accessibility features like adjustable text sizes and high contrast modes from Barclays and HSBC.
-
Ensure comprehensive support for diverse user needs through inclusive design practices.
User Research
To gain a deeper understanding of user needs and behaviors related to mobile banking, we conducted interviews with a diverse group of Lloyds Bank customers. The aim was to uncover their current activities, challenges, and desires for the Lloyds Bank app, focusing on how they interact with the dashboard and its features.
Key Findings & Insights
The interviews revealed several important insights that will help shape the redesign of the Lloyds Bank app:
User Activities and Preferences:
Users typically engage with the Lloyds Bank dashboard to check balances, view recent transactions, and monitor income and expenditure, with usage ranging from daily to weekly. They appreciate the easy accessibility of the “pay and transfer” section and the clear display of accounts on the main page.
Pain Points and Challenges:
The dashboard is often described as cluttered, with unnecessary sections like “everyday offers” and the “credit score” section. Users find the inability to hide these sections frustrating and desire a more streamlined, customizable interface.
Design and Usability:
While the dashboard's design is considered modern and logical, users seek improvements in decluttering and efficiency. They rate the overall design and usability positively but note that it could be more intuitive.
Desired Features and Improvements:
Users would like notifications for upcoming payments, a section for recent payments, and a weekly spending report. Customization options to hide unwanted sections and simplify the dashboard are highly desired.
Define
Project Goals
-
Enhance Usability and Accessibility
-
Streamline Navigation and Layout: Simplify navigation to key features like balance checking, transactions, and transfers, and ensure a clean, uncluttered dashboard layout for better readability.
-
Quick Access to Important Functions: Make sections like “pay and transfer” and recent transactions easily accessible and straightforward to use.
-
-
Increase Customizability and Personalization
-
Personalized Dashboard: Allow users to customize their dashboard by adding, removing, or rearranging sections based on their preferences and needs.
-
Hide Irrelevant Sections: Enable users to hide sections that are not useful to them, enhancing their personal dashboard experience.
-
User Journey
To understand and improve the user experience of the Lloyds Bank app dashboard, I mapped out the typical user journey. This process highlighted key phases and tasks users undertake while interacting with the app, from logging in to viewing account details and transferring funds. By focusing on users' thoughts, emotions, and identifying opportunities for enhancement, we aimed to create a more intuitive and satisfying banking experience.
User Persona
To ensure that the redesigned Lloyds Bank app dashboard meets the diverse needs of its users, I created detailed personas based on user research and findings. These personas represent different user types, each with unique goals, behaviors, and preferred features.
User Flow
In order to enhance the Lloyds Bank app dashboard, I conducted an analysis of the current user flow to identify key areas of friction. By mapping out the user flow for three distinct personas, we gained insights into their specific goals and pain points. This analysis enabled us to design an improved user flow that simplifies key processes such as account management and fund transfers.
Current User Flow - Areas of Friction
-
Cluttered and Inefficient Dashboard:
-
The dashboard includes many sections that users do not frequently use, causing distraction and making navigation difficult.
-
Sections like "Everyday Offers" and "Credit Score" are not relevant to all users and contribute to a cluttered experience.
-
Users face difficulties due to a multi-step process to access frequently used features.
-
-
Lack of Customization and Personalization:
-
Users cannot adjust the dashboard to fit their preferences or needs.
-
-
Complicated Login Process:
-
When you are unable to access FaceID or Fingerprint, you are prompted to enter characters from a word you chose during sign up in the Memorable Information section. Users may not always remember this word or have it readily available. Forgetting it can lead to a lengthy process. The log-in process should be simplified.
-
Improved User Flow
By analyzing current user flows and identifying friction points, I designed improved flows that simplify key processes such as dashboard navigation, fund transfers, and account management. These enhancements aim to create a more user-friendly and efficient experience for all users.
Ideate
Lo-Fi Wireframe Sketches
Crazy 8's Sketches
When starting the redesign for the Lloyds Bank app dashboard, I used the Crazy 8s technique. This method helped me quickly develop eight different ideas to improve the dashboard’s functionality and user experience. I concentrated on exploring various concepts to tackle user pain points and enhance key features.
Solution Sketching
After this initial brainstorming phase, I then refined these concepts into low-fidelity wireframes focusing on the main dashboard, login process, and accounts overview. This approach helped me to outline the core features and create a solid basis for high-fidelity prototypes.
UI Design
Design System (UI Elements)
To ensure a cohesive and modern redesign for the Lloyds Bank app dashboard, I focused on leveraging existing brand colours and icons. I adhered to the established brand guidelines to maintain consistency with Lloyds’ existing visual identity.
I introduced updated UI elements such as coloured spacers and rounded corners to refresh the outdated design and enhance visual appeal. These elements were designed to create a cleaner, more contemporary look while staying true to the Lloyds Bank brand.
This approach allowed me to modernize the app’s aesthetics and improve the overall user experience without straying from the established brand identity.
Final Product
Login Screen:
Redesign of Login Page
Current Login Page
Redesigned Login Page
-
Simple Login Feature: The new design allows users to log in using their username and password, offering a straightforward and familiar process.
-
Side Menu with Support Options: Includes a side menu that features options such as resetting the password, registering for an account, and accessing the help centre. This is beneficial as it provides immediate access to essential support and account management options, reducing user frustration and improving convenience.
Current Login Page
-
Biometric Only-Option: When biometric authentication is enabled, the current login page only offers this option, limiting user choice and flexibility.
-
Memorable Information Section: If biometric authentication fails or is not enabled, users are redirected to enter memorable information. This can be inconvenient and time-consuming, especially if users don't remember the details, leading to a longer and more frustrating login process.
Home Dashboard Screen:
Redesign of Home Page
Current Home Page
Redesigned Home Page
-
Simplified User Experience: Focuses on providing a user-friendly experience by consolidating all essential information into a single, visually appealing page. This design improves learnability and usability, making it easier for users to navigate and manage their accounts.
-
Visual Clarity: Clean, modern design with a clear visual hierarchy. Notifications and alerts are prominently placed on a dark green banner at the top, and accounts are displayed on neatly organized grey rectangles with rounded corners.
Current Home Page
-
Cluttered Layout Design: The cluttered layout and disorganized information result in a poor user experience, with users having to navigate through multiple tabs and mixed elements to find the information they need.
-
Disorganized Information: The home page is cluttered with various elements such as notifications, savings accounts, messages, cashback offers, credit scores, and fraud prevention messages, creating a confusing user experience.
Navigation and Accounts "More" Tab:
Redesign of Navigation
(Side Menu and More Tab)
Current Navigation
(Bottom Menu and More Tab)
Redesigned Navigation
Side Menu
-
Consolidated Options: Removed the bottom navigation and replaced it with a side menu to incorporate more details and options for the consumer such as contact, insights, moving money, bill payments, inbox, products, and a sign-out button. This addresses the overcrowding issue on the current home page.
-
Specific to Accounts: The bottom navigation was deemed irrelevant during initial sketches as it was not specific to any account. With a clean and detailed home page, options have been transferred to each account section, such as the pay and transfer feature.
"More" Tab:
-
Customization Option: Includes hide or show account for customization.
-
Relevant Features: Includes options from the old bottom navigation, such as transfer funds, pay a bill, manage card, etc., making it more specific to each account and reducing unnecessary steps.
Current Navigation
Bottom Navigation
-
Cluttered Layout: The bottom page is cluttered with too many options that not all users use daily, such as "apply" for more products.
-
Lack of Specificity: Does not specify which account the bottom navigation is linked to, potentially causing confusion.
"More" Tab:
-
Duplicate Information: The more tab in the current design includes the same information as the account section and bottom navigation, leading to repetition. For example, pay and transfer is shown twice on the home page and in the more tab.
-
Excessive Options: The current more tab includes 17 options with icons and text, which is excessive and not all are used daily. Users need to scroll to view all options.
Accounts Overview:
Redesign of Accounts Overview and More Tab
Current Accounts Overview and More Tab
Redesigned Accounts Overview
-
Tab Structure: Account info and transactions are split into tabs for cleaner organization and ease of access. This helps in reducing visual clutter and makes it easier for users to find specific information.
-
Account Information: Includes account details, actions such as card management, and spending insights. This provides a comprehensive view of account management options.
-
Transactions: Features a search function and a cleaner, more appealing design. Pending transactions are indicated with a "pending" sticker on the specific transaction, rather than being grouped separately. This offers a more streamlined and visually consistent presentation of transactions.
-
Floating Plus Icon: Designed as a floating plus icon for quick access to additional options, similar to the more tab on the home page. This ensures that essential but less frequently used options are easily accessible without cluttering the main view.
Current Accounts Overview
-
Cluttered View: Shows all transactions in one view, with a tab to click the previous month. This can look overcrowded, especially with the top tab navigation. While there is a search function, the overall presentation can be confusing.
-
Grouped Pending Transactions: Pending transactions are grouped together at the top, but dates are not included unless clicked on. This grouping can cause confusion and makes it harder to quickly understand transaction status.
-
Busy Visual Design: The overuse of spacers and grey dividers makes the interface look busy and can visually overwhelm users.
-
"More" Tab: Includes the same options and looks the same as the previous design. This leads to redundancy and an overwhelming number of options for everyday use. While organized, the sheer number of options can be too much for the user.
Profile and Settings:
Redesign of Profile and Settings
Current Profile and Settings
Redesigned Profile and Settings
-
Consistent Visual Design: The redesign ensures consistency with a clean visual design throughout the profile and settings pages, providing a more unified and aesthetically pleasing user experience.
-
Sections: Added sections to the profile page for better organization and easy access to different profile-related options. This helps users quickly find and manage their profile information.
-
Consistent Use of Brand Colours: Ensured the consistent use of brand colors across the profile and settings tabs. This enhances visual harmony and reinforces brand identity.
-
Reduced Visual Clutter: Simplified the design by reducing the use of spacers and grey dividers. This minimizes visual clutter and makes the settings page more user-friendly and less overwhelming.
Current Profile and Settings
-
Inconsistent Design: The profile tab’s design is not consistent with the settings tab, leading to a disjointed user experience.
-
Colour Inconsistency: The sub headers in the settings tab use the brand green color, whereas the profile tab uses grey, causing a lack of visual harmony.
-
Visual Clutter: The use of spacers and grey dividers in the settings tab creates a visually overwhelming experience for users, making it harder to navigate and find information.
Reflections
In the Lloyds Bank redesign project, I concentrated on the main home page and accounts page to address immediate usability issues and enhance the overall user experience. This targeted approach allowed me to make impactful changes, such as simplifying navigation, decluttering the interface, and providing a more cohesive visual design.
What's Next:
-
Expand Redesign to Other Sections: Beyond the home and accounts pages, other sections of the app will be reviewed and redesigned to provide a consistent and seamless experience.
-
Review User Personas and Flows: Revisit the user personas and user flows to identify additional areas for improvement and ensure that all user journeys are optimized.
-
User Testing and Feedback: Conduct further user testing to gather feedback on the redesigned pages and iterate on the design based on user insights.
Staying true to a user-centric approach was key in this project. Understanding the needs, preferences, and pain points of the users helped shape the redesign and ensure that the changes made were truly beneficial to them.
Thank you for scrolling!
Feel free to reach out if you have feedback, are interested in collaborating, or simply want to say hello!