Design challenge

A motor insurance page for the moments nobody is calm

A calm policy page and six-step claim flow, with a coded live demo.

Industry

Industry

Fintech

Fintech

Role

Role

UX/UI Designer

UX/UI Designer

Timeline

Timeline

Time-boxed design challenge

Time-boxed design challenge

Platform

Platform

Mobile banking app

Mobile banking app

The short version

Problem: People open their motor insurance page when they are stressed: after a bump, or with a renewal looming. The page has to reassure them, point at the next step and keep a lot of detail digestible.

What I did: Designed the policy page, a six-step claim flow and a coded live demo, all within Lloyds’ existing visual language.

What I would measure: How quickly someone finds “Make a claim”, whether they can finish a claim without help, and whether they can say what they are covered for.

The problem

Insurance screens are rarely visited for fun. The experience needed to reassure customers, make urgent actions impossible to miss, keep complex information readable, and feel like it belonged in the Lloyds app, not like a guest.

Three questions, one structure

Everything hangs on three questions a stressed customer is silently asking:

  • What’s my situation? A summary card with vehicle, policy status, renewal date, cover type and no-claims discount.

  • What can I do? One primary action (Make a claim) and secondary actions that open modals, so people stay anchored on the page.

  • What am I covered for? Tabs for Cover, Excess and Limits, and Support, with accordions to keep it light.

Decisions

One loud button, several quiet ones. “Make a claim” is the only primary action. Documents, update details and get help sit one level down.

Modals over new pages. Secondary actions open in modals so nobody loses their place. The trade-off is less room per task, which suits short actions but not the long claim flow.

A claim flow that holds your hand. Six steps with a stepper, one simple question at a time, a review screen and a confirmation.

Lloyds’ language, on purpose. Monochrome base, bright green accents and rounded cards, so the page feels trustworthy and familiar from the first tap.

What it looks like

Three image frames: the policy page; the six-step claim flow; the coded live demo.

Built to travel

The Summary, Actions, Details, Support pattern is not specific to motor insurance. My hypothesis is that it would work for pensions, home insurance and loans, since the cards, tabs, accordions and modals are reusable components. That is a hypothesis, not a result.

Reflection

With more time, I would test the claim flow with real customers, especially the review step, and check the page against accessibility standards with assistive technology.