Contents
Overview
Lloyds Bank International’s mobile app grew quickly after launch, reaching around 1,000+ daily active users and maintaining strong stability (97.7% Apdex score; 98.4% crash-free experience). As the sole designer, my focus shifted from shipping the initial product to making it scalable: reducing delivery friction, preventing drift across web, iOS and Android, and formalising design governance inside a regulated environment.
When Lloyds Banking Group introduced Lloyds Reimagined and the 'CancaraOS' rebrand mandate (80% journey adoption by October 2025), full technical adoption was the obvious best-case outcome. In our case, it wasn’t feasible without a platform rewrite, due to a mismatch in tech stacks. I led evaluation of the options, presented the trade-offs to SLT, and proposed a hybrid strategy: adopt the brand through token mapping and a refined local design system, while aligning iOS and Android engineering to shared tokens, component naming, and patterns.
The work delivered the mandated adoption target on time, preserved product stability, and improved delivery speed by standardising foundations rather than treating the rebrand as a surface exercise. After meeting the mandate, we used remaining time to begin aligning high-impact UX patterns with Lloyds UK journeys to reduce cognitive switching for customers using both apps.
Disclaimer
Due to regulatory and commercial constraints, several artefacts from this engagement cannot be publicly shared. Where original materials are unavailable, descriptions and reconstructed visuals are used to illustrate the approach and outcomes.
Context
Post-launch reality: stable product, fragile foundations
The first version of the iOS and Android apps were intentionally conservative. We replicated established web journeys to reduce risk and support delivery constraints. The outcome was a stable launch, but it also carried forward technical and design debt from the legacy web platform.
Visually, iOS and Android were closely aligned. Under the hood, alignment was weaker: tokens and components existed across platforms, but naming and implementation patterns were inconsistent. This wasn’t catastrophic, but it created repeated friction in QA and delivery. Small differences resulted in avoidable conversations, extra rework, and a growing sense that teams were building similar outcomes through different internal models.
My role
My scope included:
Design systems and token governance in Figma.
Journey design across mobile and web.
Design QA and accessibility validation.
Agile integration: refinement support, Jira/Figma linkage, definitions of readiness and done.
Stakeholder alignment and SLT comms.
Design enablement: training, mentoring, and team adoption of Figma.
App store presence: listings, icon, and marketing asset updates.
Constraints
Organisational
Design maturity was still forming. Historically, design had not been embedded into delivery.
Agile “ways of working” were evolving, alongside wider organisational change.
Technical
iOS and Android were built natively (Swift/Kotlin), while group-level design system implementation assumed a different shared technical stack.
Existing platform and web implementations had accumulated drift over time.
Regulatory & quality
Accessibility and auditability mattered. Delivery needed clear traceability, governance, and a stable Definition of Done.
Phase 1: Introducing design as an operating layer
Establishing Figma as the source of truth
Before the rebrand mandate arrived, the first priority was making design dependable as an organisational input, not a suggestion.
I migrated the organisation’s design assets into Figma and established it as the single source of truth across product, engineering, QA, and stakeholders. The aim was to reduce drift, shorten feedback loops, and make decision-making inspectable.
This included:
Secure workspace setup and rollout (in coordination with group tooling teams).
Training and enablement: Figma basics, design thinking, and Agile UX practices.
A controlled handoff process using Figma linking and status conventions.
Rebuilding a lightweight design system in Figma
I used the migration as an opportunity to refine our existing system:
Consolidated tokens and styles into a cleaner, more consistent set
Rebuilt components as a coherent library
Reconstructed 36+ mobile journeys using the refined system
To ensure parity and trust, internal QA and test teams validated the rebuilt Figma journeys against:
Legacy Sketch designs and journeys.
The live product.
This work was presented to SLT and was a turning point in making Figma the default reference point across the organisation.
Phase 2: 'Lloyds Reimagined' mandate & option evaluation
The mandate
Group expectation was full adoption of the central system, including shared Figma libraries, code libraries and implementation patterns. In an ideal world, that outcome was correct and I explicitly supported it:
Consistency at scale without constant policing.
Efficiency compounding across teams.
Reduced cognitive load and faster onboarding.
Governance without bottlenecks.
A platform for future change (rebrands, accessibility uplift, theming).
The mismatch
In our context, full technical adoption implied a large platform rewrite. Engineering estimated this as approximately 24 sprints, which SLT rejected as incompatible with timeline and business priorities.
At that point, the failure mode was clear:
If we adopted Figma libraries only, design would diverge from production and undermine the operating model we’d just institutionalised.
If we rewrote the platform, we would likely miss the deadline and destabilise a live product.
I led the evaluation of multiple implementation paths, working closely with engineering and then presenting the analysis to SLT.
Core decision
I proposed a hybrid strategy that preserved the intent of CancaraOS while respecting technical reality:
Map the new brand tokens and assets into our refined Figma design system.
Align iOS and Android engineering to shared tokens, naming, and component structure.
Use journey-based delivery planning in Scrum, while executing change at the component layer.
Resolve edge cases where old patterns could not map cleanly to new brand behaviour.
Maintain Figma as the enforced source of truth throughout.
The real risk moment: invisible work
The highest-risk phase was the least visible.
Token mapping accounted for the majority of the rebrand effort. For a significant period, stakeholders could not “see” progress as redesigned screens. They could only see the emergence of a new Figma variables mode and a restructured design system.
No one challenged my role as product expert, but SLT and the Product Owner were understandably cautious. Engineering also had limited experience with token-driven transformation.
Governance: 'Definition of Done' & drift prevention
Shared Definition of Done
We agreed and enforced a Definition of Done that treated experience quality as non-negotiable:
Acceptance criteria met
Code reviewed and merged
QE tests executed and passing
No high-priority defects remain
UI uses latest design tokens and approved design system components/patterns
Design QA completed:
Implementation matches design intent across key states
Responsive behaviour matches design
Accessibility requirements met (no critical issues outstanding)
Keyboard navigation, focus states, contrast, labels verified
No known technical, UX, accessibility, or QE defects remain
Preventing drift
Drift prevention was explicit:
Figma was enforced as the sole source of truth.
Every change required a Jira story linked to a Figma reference, and vice versa.
We used Figma’s handoff conventions (including “Ready for Development”) to create a visible quality gate and an auditable design pipeline.
Delivery outcomes
The approach improved alignment and reduced the need for repeated “pixel-level” negotiation.
With tokens and components standardised, engineering could move faster with fewer subjective debates and fewer avoidable discrepancies.
Design also benefited: the system reduced my ability to drift or invent exceptions, which strengthened consistency and maintained trust.
Product stability maintained during change:
97.7% Apdex score
98.4% crash-free experience
1,000+ daily active users and growing (approx. scale during the period)
Post-Deadline: UX Convergence with Lloyds UK journeys
After meeting the mandate, we had enough time and budget to begin aligning high-impact UX patterns with the Lloyds UK app where appropriate.
Some customers used both apps. A single unified product experience was not feasible for structural reasons, but reducing cognitive switching cost was still achievable.
We focused on:
login flow and layout conventions.
profile and settings information architecture.
placement of common actions (e.g., password management, contact details).
Web Platform: Rebrand & systemisation
Context
The web platform had grown without long-term design ownership. It was originally delivered in a waterfall model with minimal design input and limited design QA. Over the years, development-led iteration introduced significant visual and structural drift.
When I audited the platform:
Styling was not centralised.
Colours had proliferated (127+ in use).
Many styles were inline or one-off.
Assets were embedded inconsistently.
The pragmatic approach
A full audit and mapping of the web experience into Figma wasn’t feasible within time constraints. Instead, I applied the same principles that worked for mobile:
Define a lightweight web design system using shared primitives from mobile
Extend patterns for web-specific interactions (hover, focus, mouse behaviour)
Create a limited set of canonical UI designs (12) containing the rebranded components and tokens
Partner with engineering to apply the system across the site while cleaning up legacy CSS and inline styling
Enforce the same Figma/Jira governance and DoD standards
What changed
Delivered 80% rebrand adoption by deadline across major journeys.
Strengthened cross-platform consistency through token and component alignment.
Reduced delivery friction by formalising shared terminology and governance.
Kept product stability high while implementing structural change.
Improved design governance with Figma design/development pipeline, Ready-for-Development gates and traceable Jira linkage.
Modernised the legacy web styling approach through systemisation rather than a full redesign.
Began post-deadline UX convergence with Lloyds UK patterns for high-impact journeys.
Reflection
Two principles shaped the work:
In regulated environments, auditability is as important as aesthetics.
The work was only viable because decisions and handoffs were traceable. The pipeline mattered as much as the screens.
Governance without shared language is performative.
Consistency doesn’t come from review meetings. It comes from shared tokens, shared component models, and a shared Definition of Done that teams can execute without interpretation.
