Lloyds Banking Group PLC
·
Oct 2017 - Jan 2018
Lloyds Banking Group PLC
UI design for the Lloyds app's money-transfer journey, from an overdraft warning to a confirmed transfer, during a wider mobile app refresh.
Role
UI Designer
Timeline
Oct 2017 - Jan 2018
Team
Mobile design team of around twelve, with a dedicated UX designer
Platform
iOS / Android
Overview
A money-transfer journey for the Lloyds app
Lloyds Banking Group is one of the UK's largest financial services groups, serving millions of customers through brands such as Lloyds Bank, Halifax and Bank of Scotland. I joined its mobile design team for a focused engagement during a wider refresh of the banking app, as Open Banking was becoming a focus of the programme. Working as the UI designer in a closely knit team of around twelve, alongside a dedicated UX designer, my focus was the money-transfer journey: its UI, the account screens that lead into it, and the shared UX thinking behind them.
Money transfer
A multi-step journey, from warning to confirmation
Account context
An overdraft warning that leads straight into Move Money
Cross-bank
An authentication handoff to another bank, and a clear return
Challenge
Moving money with confidence
Moving money is one of the most consequential things people do in a banking app, and one of the most anxious. The account view could warn someone that upcoming payments risked taking them overdrawn, with a Move Money action to fix it. That warning was only useful if the transfer behind it was quick, clear and hard to get wrong: the right accounts, the right amount, the right timing, and certainty about what had happened at the end, even when the journey passed through another bank's authentication.
How do you carry someone from an account warning to a completed transfer they can inspect, trust and confirm, even when part of the journey happens outside the app?
Approach
From warning to confirmation, one clear step at a time
Starting from the account
The journey begins before the transfer. The account overview brought balances, account types and upcoming payments into focus, and surfaced an overdraft risk with two clear routes: Move Money, or See Upcoming Payments. I worked on that connection so the warning led directly into action, rather than leaving someone to find the transfer flow on their own. A warning that doesn’t offer a next step only adds anxiety.
The overdraft warning leading into Move Money.
Designing the transfer journey
The transfer moves from choosing the account and recipient, through amount and timing, to review and confirmation, and each step asks for one decision. Account and recipient choices show enough detail to be recognised at a glance. Amount and timing are separate steps, so choosing when the money moves is its own decision. A review screen brings everything together before anything is committed. That pause is deliberate friction: it slows down the one moment where a mistake would cost money.
Left Choosing the account and the recipient. Right Amount, an optional note, then timing: one decision per step.
In a flow like this, clear hierarchy, consistent placement of the primary action and plain labelling do most of the work. People should never have to wonder what will happen when they tap.
Choosing where to send money, in motion (video).
Handing off to another bank, and coming back
Part of the journey passes through Barclays-branded identification and authentication before returning to Lloyds. Those transitions are where trust is most fragile. The journey returns to Lloyds with a clear payment confirmation, so there is no doubt about what has happened.
Left The recap, then the handoff to Barclays’ own sign-in (Barclays’ screens, not my design). Right Barclays authorises, then the journey returns to Lloyds.
Refreshing the existing app
Part of the work was deciding what to carry forward from the existing app and what to refresh. As an early exploration, I applied the refresh’s newer components and visual language to the existing screens. That showed what held up and what needed rethinking, before we moved on to the refreshed designs themselves.
Working within a larger team
With a team of around twelve working closely on separate parts of the app, consistency mattered as much as any single screen. I worked alongside the dedicated UX designer on the flow and its thinking, while making sure the transfer journey used the same components, patterns and visual language as the surrounding app refresh, so it felt like part of one app rather than a feature bolted on.
Outcome
A clearer path from warning to transfer
The work delivered a complete, detailed UI for the money-transfer journey and the account screens around it: from the overdraft warning and Move Money action, through account, recipient, amount and timing, to review, authentication and confirmation. It gave the refreshed app a transfer experience designed around clarity and confidence at the moments that matter most.
Warning to action
An overdraft-risk warning that leads straight into Move Money.
One decision per step
Account, recipient, amount and timing, each clear before the next.
Review before commit
A review screen before anything is sent, and an unambiguous confirmation after.
Consistent with the refresh
Built from the same patterns and components as the wider app.
Reflection
The riskier the action, the calmer the interface
Financial journeys reward restraint. When someone is moving money, especially in response to a warning, every extra element competes with the one decision they need to make. I design consequential flows the same way: one decision per step, a clear review before anything is committed, and a confirmation that leaves no room for doubt.
