Mobile
Banking.

Client
Lloyds Banking Group
Agency
Designit
Year
2017
Role
UX Designer

Lloyds' mobile app had a bloated information architecture that made basic tasks hard to find and harder to complete. As product designer at Designit, I led UX across a 10-sprint engagement, restructuring navigation, defining eight core user journeys, and delivering two fully interactive prototypes that went to the Lloyds board for sign-off.

UX DesignInformation ArchitectureMobileBankingPrototyping
Lloyds Mobile Banking — home screen
The problem

Lloyds' mobile app was failing customers. Basic tasks (checking a balance, making a payment) required too many steps and too much prior knowledge of the app's structure. The problem wasn't missing features; it was the architecture underneath them.

The impact

Two fully interactive prototypes went to the Lloyds board. The redesigned IA reduced steps to complete key tasks and eliminated categories of support queries. The engagement established Designit as a long-term Lloyds partner.

Team

  • Product Owner
  • Product Designer (Me)
  • Visual Designer
  • Business Analyst
  • Copywriter
  • Researcher

My contribution

  • Led UX and interaction design across all 10 sprints
  • Facilitated expert sessions and sketching workshops
  • Defined 8 end-to-end user journeys
  • Owned stakeholder presentations and alignment
  • Delivered 2 fully interactive board-ready prototypes
  • Contributed to the Lloyds design system
The brief

Fix the
foundations.

Lloyds knew their mobile app was failing customers. Basic tasks (checking a balance, making a payment, finding a product) required too many steps and too much prior knowledge of how the app was organised. The problem wasn't the features; it was the architecture underneath them.

My brief was to redesign the app from the ground up: rethink the information architecture, define a new navigation model, and produce a complete, production-ready design across all core journeys, from onboarding to card controls to payments.

Working embedded in a cross-functional team at Designit, I drove UX across ten two-week sprints, facilitating expert sessions, leading sketching rounds, synthesising user research, aligning stakeholders, and producing the final high-fidelity designs and interactive prototypes.

Scope
Journeys
  • Home screen and navigation
  • Statements and actions
  • Payment hub
Features
  • Products & services
  • Help & support
  • Card controls & loyalty
Deliverables
  • Brand differentiation
  • Design system
  • 2 interactive prototypes
Process

How we
worked.

Every sprint followed the same seven-step model: expert immersion, divergent sketching, guerrilla testing, stakeholder alignment, high-fidelity design, prototype testing, and a refinement week. The same rigour, ten times over, across eight distinct areas of the app.

01
Expert immersion
Each sprint opened with domain expert sessions (risk, compliance, product, and customer service) so design decisions were grounded in real constraints, not assumptions.
02
Divergent sketching
I ran structured sketching rounds across the team, using sprint goals and experience principles as guardrails. Volume and speed over fidelity. The best ideas survived the next step.
03
Guerrilla testing
Sketches went straight to real people, in branches, parks, and the street. Testing at sketch stage meant we invalidated weak ideas before they cost anything to build.
04
Stakeholder alignment
I presented refined directions back to Lloyds stakeholders, facilitating decisions and securing sign-off before moving to high fidelity. No surprises at handoff.
05
High fidelity design
Agreed direction progressed to detailed visual design. I worked closely with the visual designer to ensure interaction intent translated into polished, production-ready screens.
06
Prototype and test
Principle and InVision prototypes went to moderated user testing with real Lloyds customers, validating flows, surfacing friction, and generating improvement data.
07
Refinement
Testing findings were synthesised and applied before sprint close. Every sprint ended with a resolved, documented design, with no backlog of open questions.
×10
Scale across the product
The model repeated across ten sprints and eight distinct journeys. Consistency of process meant quality and pace held even as scope grew.
In the room
Sketching rounds
Structured sketching sessions: volume over polish, always
Sprint sketching session
Sprint sessions: expert immersion to high-fidelity in two weeks
Cross-functional collaboration
Cross-functional design: six disciplines, one shared direction

Final design

Home
Home: balance and recent spend surfaced immediately, without navigating in
Account detail
Account detail: insight at a glance, action one tap away
Transactions
Transactions: merchant logos reduce cognitive load; categories add context
Transaction detail
Transaction detail: location, category, and spend history in one view
Products
Products: contextual recommendations shown when relevant, not buried in a menu
Application flows
Application flows: progressive disclosure removes friction without losing compliance
Payments
Payments: a single focused task per screen; no competing actions
Card controls
Card controls: sensitive actions made accessible without feeling alarming
Lloyds Mobile Banking — interactive prototype
Interactive prototype used for board presentation
Outcomes

What it
delivered.

Two fully interactive prototypes, built in Principle and InVision, were presented to the Lloyds board and used to brief engineering teams for delivery. The redesigned IA reduced the number of steps to complete key tasks and removed entire categories of support queries related to feature discoverability.

The engagement established Designit as a trusted long-term partner for Lloyds, leading to follow-on work including the Strong Customer Authentication project under PSD2.

← PreviousPleoOut-of-pocket expenses · Mobile←Next →EurostarTravel discovery · Tablet→