Liberty Blume

The brief

I lead frontend architecture on a large-scale financial lending platform: package building, credit assessment, customer data capture and digital agreement completion. Every transition handles real money and real compliance.

The work

1. 01

   12+ step journey architecture

   Architected a React application with context-based state across interconnected steps, supporting complex loan workflows.

2. 02

   7-1 SCSS and BEM

   Designed a 7-1 SCSS architecture with BEM, delivering responsive, accessible UI components the wider team now uses as the standard.

3. 03

   Performance and DevOps

   Optimised asset strategy, font loading and state management. Established Git workflows, GCP deployment pipelines and Docker-based environments.

Outcome

Supported multi-million-euro revenue across a regulated lending journey.

Constraints

FCA-regulated journey, twelve steps, every transition logged for audit. Lending decisions and digital agreement on screen, behind a public marketing site. Team is distributed across three time zones; the front end has to be self-explanatory enough that the back-end and content teams can extend it without re-litigating component design.

Stack and architecture

React + Context API for shared state across steps so the journey can pause, branch and resume without prop drilling. SCSS 7-1 with BEM, generated utility classes from a token map, container queries on the form components so the steps work at every viewport. Build deploys via GCP and Docker on a trunk-based workflow with required reviews and type checks. No CSS-in-JS, no global state library; the journey is intentionally legible.

Outcome and next steps

The platform is live in production, supporting multi-million-euro revenue with full WCAG 2.1 AA conformance. The team now extends the journey by composing existing tokens and components rather than authoring new SCSS. Next: lift the same architecture into Liberty Global's adjacent regulated products.

Selected screens

• 

  Address details capture in the multi-step flow.

• 

  Affordability step with clear validation states.

• 

  Agreement and signature completion.