Summary
Over an 8‑week engagement (2w discovery, 4w design, 2w iteration) I led the redesign of Legal & General's life‑insurance quote engine — moving from a dense single‑page form to a four‑stage progressive flow built on the Canopy design system, with mobile treated as the primary surface.
The problem
The legacy quote engine was a single‑page form with 10+ dense input fields shown at once. It asked for sensitive health data before any trust was established, and on tablets and phones the system keyboard routinely covered both the inputs and the primary CTA. The experience felt clinical and overwhelming, and it leaked users badly on mobile.
The challenge
- Regulated environment — every change had to live inside Legal & General's compliance and brand constraints.
- Strict adherence to Canopy, L&G's internal design system, for handoff and long‑term maintenance.
- Mobile‑first was non‑negotiable: viewport, keyboard behavior, and touch targets had to be designed for, not adapted to.
- Post‑launch conversion data was under NDA, so success had to be argued from pre‑launch evidence and stakeholder alignment, not promised metrics.
My role
Lead UX inside a small team (Senior UX Architect, UX Director, two front‑end developers). I owned the audit, information architecture, progressive‑disclosure strategy, interaction patterns, mobile behavior, and the mapping of every screen back to Canopy components — running weekly reviews with the UX Director and pressure‑testing interaction models with the Senior UX Architect.
Design decisions
Progressive disclosure over a single page
Replaced the one‑page form with four stages — Health Info → Strategy → Quote Results → Contact — so each step felt like a small commitment instead of an interrogation, while keeping the underlying question logic intact.
Show the quote before asking for contact
Pushed for a value‑exchange model: users see an estimated quote before lead capture. Sales worried about volume; I argued for qualified leads and used competitive benchmarking to get alignment.
Conversational language over form labels
Rewrote questions as natural sentences ("When is your birthday?" instead of "DOB (MM/DD/YYYY)") so the flow reads as a conversation rather than a database entry screen.
Sliders with manual override
Used sliders for ranges like weight to make mobile input feel natural, but kept manual text entry as an override for precision. In testing, users described sliders as easier without introducing data errors.
Fix mobile at the viewport level
Designed the layout so the primary CTA stays visible above the system keyboard on Android and iOS, eliminating the overlap that was silently killing mobile conversion.
System
Canopy component compliance
Every screen was mapped back to Canopy's component library so the build matched the system one‑to‑one, with no orphan patterns to maintain.
Touch‑optimized form controls
Increased minimum touch targets from 32px to 48px and defined consistent interaction states (default, focus, error, disabled) for every input across the flow.
Information architecture, iterated
Worked through five versions of the IA — from the legacy structure to the final four‑stage flow — to find the balance between granularity and momentum.
Interface
From legacy form to staged flow
Before: a dense single page that asked for everything at once. After: four focused stages, each with a clear question, a primary action, and a visible sense of progress.
Mobile keyboard solved
The redesigned layout keeps the Next CTA permanently visible above the keyboard on phones — the original viewport problem turned into a quiet, reliable interaction.
Conversational questions
Plain‑language questions, paced one decision at a time, replace the legacy label‑and‑field pattern without losing any of the regulated copy underneath.
Two prototype directions, one decision
We built and reviewed an interactive‑driven prototype and a focus‑driven prototype. After stakeholder review and internal testing, the interactive‑driven version (v2) moved forward because it balanced efficiency with user confidence.
Gallery
Outcome
Eliminated the mobile keyboard overlap that was blocking conversion, reduced cognitive load from 10+ fields shown at once to four staged decisions, and shipped a Canopy‑aligned flow that the client kept live in a regulated, high‑stakes environment for over a year with zero rollback requests. Post‑launch conversion numbers are under NDA; longevity in a compliance‑heavy product is the defensible signal.
Reflection
This project is the clearest example of what senior product design looks like in a regulated context: take a dense legacy form, find the real friction with audit and analytics, and re‑sequence the experience around how users actually decide — without breaking compliance or the design system. The honest next step is the missing one I'd negotiate up front on a future engagement: event‑level analytics from day one to validate stage‑by‑stage drop‑off, and A/B testing of the results screen instead of relying on longevity as the only proof.