UX Case Study: Redesigning the Homepage for Bank of Scotland
Project Overview
The goal of this project was to redesign the homepage of Bank of Scotland to enhance the overall user experience. The primary objective was to create a more user-friendly, visually appealing, and efficient interface thaProject Overview
Problem Statement
The existing homepage design was cluttered and outdated, which created friction for users trying to complete common tasks, such as logging in, locating important information, and accessing banking services. Users frequently reported difficulty in finding essential links, especially on mobile devices, where the experience was less intuitive.
Project Goals
Improve the usability of the homepage by simplifying the design.
Optimize the layout for mobile and desktop to ensure responsiveness.
Make key actions (login, find branches, customer support) easily accessible.
Create a visually appealing design aligned with Bank of Scotland's brand identity.
Increase user engagement and customer satisfaction by reducing friction in accessing services.
Competitive Analysis
I reviewed competitor banking websites (e.g., HSBC, Barclays, Nat West) to identify best practices. The main takeaway was the need for a streamlined design where key actions like login and customer support were front and center.
Design Process
Wireframing
Based on user research and stakeholder insights, I developed low-fidelity wireframes. The primary focus was on decluttering the homepage by prioritising core user actions:
Hero banner Placed prominently at the top right with a clear, contrasting colour.
Primary Navigation Bar: Simplified to four key categories (Personal, Business, Loans, Help & Support) to allow easier access to core services.
Featured Services: A clean, horizontal card layout below the hero section for products such as loans, mortgages, and credit cards.
Footer: Consolidated with essential links, such as branch locator, social media, and privacy policies.
Key Design Decisions
Hero banner: The banner typically highlights key financial products or services, such as mortgages, loans, or credit cards. This positioning captures users' attention right away, providing quick access to high-priority offers. The rotating or static promotional content makes it easy to direct users toward offers they might be interested in.
Responsive Layout: The design was made fully responsive with clear mobile optimizations, such as collapsing the navigation into a hamburger menu and reducing text clutter.
Emphasised Core Actions: By simplifying the primary navigation and limiting the number of featured services, the homepage now has a clearer hierarchy of actions for users.
Improved Visual Hierarchy: The use of consistent headings, subheadings, and buttons allows users to quickly scan for the information they need.
High-Fidelity Prototype
Once the wireframes were validated, I created a high-fidelity prototype with updated branding elements, including color schemes and typography that aligned with Bank of Scotland's brand guidelines.
Color Scheme: The classic Bank of Scotland blue was kept as the primary color to maintain brand consistency, while lighter shades were used to improve readability.
Typography: Used the band font.
Images & Icons: High-quality images and simple, intuitive icons were used to make the site more engaging while enhancing usability from the brand.
Applying a consistent layout across Bank of Scotland, Lloyds, and Halifax—all part of the Lloyds Banking Group—offers several strategic and operational benefits. While each brand has its unique identity and customer base, maintaining a unified design system can streamline processes and improve both the user experience and internal efficiencies like:
Consistency Across Brands
Design and Development Efficiency
Cross-Platform Compatibility
Improved User Experience
Flexibility in Branding
Data-Driven Insights
Using a shared UI Kit doesn’t mean sacrificing individuality. Each brand (Bank of Scotland, Lloyds, and Halifax) can still maintain their distinct visual identity through branding elements like colors, logos, and imagery, while using the same underlying structure.
Promo cards with images are a versatile and impactful design element that can significantly improve user engagement, communicate important messages quickly, and drive higher conversion rates. For banks like Bank of Scotland, Lloyds, and Halifax, these cards offer an effective way to showcase financial products, cross-promote services, and enhance the overall user experience through visually appealing, well-structured content.
Mobile-Friendly and Scannable
Responsive Design: Promo cards with images work well in responsive layouts, adapting to different screen sizes. They are easy to click on, even on smaller devices, and the combination of images and text is often easier for users to interact with on mobile devices compared to dense text blocks.
Quick Scannability: Mobile users, in particular, benefit from the scannability of promo cards with images. By displaying content in a visually digestible way, users can quickly find relevant information or offers while on the go.
Prioritising Key Offerings Without Overloading the User
Mobile-First Benefit:
Prioritised Content: On a mobile screen, trying to display too much at once leads to a cluttered and overwhelming experience. A carousel component allows each bank to highlight priority offerings, such as the latest mortgage rates or credit card promotions, without overwhelming the user with too much information at once.
Outcome
The redesigned homepage resulted in:
Positive feedback from both stakeholders and users, particularly around the ease of navigation and the modernized design.
Lessons Learned
Simplicity is Key: Stripping down complex navigation and focusing on core user needs (like login and support) was crucial in improving the user experience.
Mobile-first Design: With a growing number of users accessing the site via mobile, ensuring a seamless mobile experience was critical to the project’s success.
Conclusion
The redesigned homepage for Bank of Scotland successfully balanced user needs with business objectives, providing a clean, user-friendly interface that aligns with the bank’s brand identity. The project demonstrated the value of user-centered design and iterative testing in improving overall user satisfaction.
