CASE STUDY
Lloyds Bank International
Project Type
UI Design
Industry
Global Banking & Finance
Role
Junior Designer
Summary
Lloyds Bank International’s online services were fragmented across five separate public-facing platforms, each using a different brand identity but underpinned by similar backend systems and design patterns. The collection of platforms were known as:
Commercial Internet Banking
Lloyds Investment Fund Managers Ltd
Overseas Company Club Internet Banking
Currency Internet Banking
Private Banking Online
Customers were required to manage multiple logins and inconsistent interfaces. The business also faced the ongoing burden of supporting several legacy systems. The IBX Desktop project aimed to unify these services into a single, consistent, and brand-aligned responsive web platform.
Team
Project Manager
Noel Mallet
Design Manager
Bart Wijsmuller
Junior Designer
2 x Business Analyst
4 x Web Developers
2 x Engineers
2 x Testers
Context & Key Challenges
Fragmented brand identities across platforms
Challenge
Five public-facing platforms used different visual identities, terminology, and interaction patterns.
This inconsistency confused customers, increased cognitive load, and created extra work for brand governance and maintenance.
Solution
Consolidate visual and interaction patterns into a single component library aligned with the Lloyds brand.
Standardise language, UI components, and documentation; introduce a lightweight governance process to maintain consistency.
Benefit
A coherent brand experience reduces user confusion, speeds design-to-development handoff, lowers long-term maintenance costs, and improves perceived trust and professionalism.
Separate authentication & multiple logins
Challenge
Customers had to maintain separate credentials and sessions across several platforms.
This increased friction, password fatigue, and support incidents while complicating security monitoring and compliance.
Solution
Implement a unified authentication model.
Benefit
Simplified login flows reduce support tickets and abandonment, improve security oversight, and create a smoother, more reliable customer journey across services.
Brand misalignment with Lloyds Banking Group
Challenge
Legacy platforms diverged visually and tonally from Lloyds Banking Group’s updated digital brand.
This weakened brand equity and creating extra effort for marketing and compliance teams.
Solution
Re-skin and refactor the unified platform to strictly follow Lloyds’ updated brand guidelines
Integrate brand QA checkpoints into the design handoff process.
Benefit
Restoring brand alignment increases customer confidence, streamlines marketing and regulatory reviews, and reduces rework across digital channels.
My Role
I was responsible for the full UI redesign and took on the day-to-day UX design work.
My output was regularly reviewed and shaped by my design manager and mentor, Noel Mallet, who brought senior UX expertise to the project. His guidance supported my development and helped ensure a high standard of delivery.
I worked closely with Lloyds Banking Group’s new digital brand guidelines to ensure consistency across the new platform. The final solution aligned with WCAG 2.1 Level AA accessibility standards and was delivered under tight technical and operational constraints.
Business Impact
Users
~250,000
Active customers globally, managing billions in currency.
Platform consolidation
5 → 1
Reducing maintenance costs and operational complexity.
Support tickets
- 46%
Reduction in related support tickets in the first 6 months post-launch.
Audit & Analysis
Reviewed all five legacy platforms to understand functionality, terminology, and user flows including authentication, payments, and currency handling. Captured screenshots and documented layouts, UI patterns, and online features.
Information Architecture & Integration Mapping
Mapped current-state architecture, navigation structures, and backend integrations in collaboration with developers. Created visual diagrams using Visio and draw.io to identify overlaps and dependencies.
Brand Evaluation
Reviewed Lloyds Banking Group’s updated digital brand guidelines to understand layout structure, tone, and visual conventions. Assessed internal platforms already using the new brand to evaluate consistency and practical application. Consulted with internal teams to clarify any gaps and ensure alignment across the unified experience.
Wireframes
Designed and collaborated on three rounds of wireframing with stakeholders and developers to align on structure, functionality, and technical feasibility before moving into high-fidelity design.
Desktop Wireframes
Mobile Wireframes
Sketch Library Setup
Created a basic component library in Sketch using the updated Lloyds Banking Group brand guidelines. Established reusable components, colours, and text styles.
Designs & Templates
Designed core templates reflecting shared features across platforms, consolidating them into a consistent and accessible user interface. Ensured designs met WCAG 2.1 Level AA accessibility standards across all components.
Designs were validated through stakeholder reviews and RM-mediated customer sessions, in which the design team (myself or the design manager) presented prototypes to customers affected by the issues and recorded their feedback.
Presented designs to stakeholders across business and technology teams. Collected feedback, refined outputs, and ensured alignment with business needs and regulatory standards.
Desktop Designs
Mobile Designs
System Export
Handoff & Implementation
Delivered design files with clear documentation. Worked closely with developers throughout build and supported design QA to maintain accuracy, accessibility, and consistency.
Internal Presentation
Prepared and delivered a walkthrough presentation for internal teams, highlighting the platform consolidation, design rationale, and key improvements for users and the business.
Outcomes
Consolidated five legacy platforms into one unified online experience
Reduced system complexity, improved maintainability, and established a single consistent interface serving hundreds of thousands of customers across global markets.
Delivered accessible UI templates meeting WCAG 2.1 Level AA
Ensured compliance across all redesigned layouts and components, improving usability for a broader audience. Automated WCAG checks pass rate 92%; manual assistive-technology validation passed key flows 100%.
Improved cross-team alignment and delivery efficiency
Wireframing and review cycles with stakeholders and developers reduced rework and enabled smoother handoff into development.
Lessons Learned
1. Early access to design assets is critical
Restricted access to existing design libraries added time and complexity. Securing early collaboration with central design teams would streamline setup and ensure brand consistency from the outset.
2. Accessibility must be baked in from the beginning
Designing to meet WCAG 2.1 Level AA standards was achievable, but would have benefited from earlier engagement with accessibility specialists and QA teams to validate designs against assistive technologies.
3. Platform consolidation demands deep domain knowledge
Each platform had its own logic, user expectations, and terminology. Taking time to understand these differences in detail was essential to avoid oversimplification and preserve critical functionality.
4. Clear documentation bridges design and development
Well-documented design files and structured handoff significantly reduced ambiguity and rework. Maintaining version control and annotation standards helped keep cross-team collaboration smooth.
5. Internal education supports adoption
The internal presentation helped non-design stakeholders understand the scale and value of the work. Communicating design rationale is key to building support and trust around major platform changes.