Making My Account the place customers manage their cover, and add to it

Until then, only customers who had bought a protection plan could create an account. The business was about to let Beko customers register their free guarantees online too, so I needed to know what people expect to see once an appliance is registered.

I ran two separate card sorts with 25 participants: one for a free guarantee and one for a paid plan. Paying changes what people expect, and asking them to think about both at once would have been too much. Participants ranked the information they considered important and set aside what wasn't.

Everyone wanted to know what was covered, and it usually ranked first, yet we only offered a document download. Plan holders wanted to book a repair straight away rather than look for "expert help". Guarantee holders cared more about reaching the manufacturer. And 71% didn't want prompts to add other appliances on the page about the one they'd just registered.

Those findings set the hierarchy for the dashboard, guarantee and plan pages: plans, guarantees, and cancelled or expired cover grouped separately, repair booking up front for plan holders, and a single cross-sell placed where it wouldn't get in the way. I designed loading skeletons and empty states too, so the dashboard holds its shape while plans load or when a customer has none. Cancelling online went onto the roadmap.

Customers who signed up manually were getting stuck. Session replays in Quantum Metric showed people struggling to get past personal details, especially the address field: the lookup was slow, and its results opened in a small scrolling box over the page, which is hard to use on a phone.

I redesigned the journey as a stepper with one question per screen, introductory screens explaining where to find plan details, and helper text written with our content designer. I rebuilt the address component with clear states for searching, choosing and entering an address by hand, and the password component so its rules read as a checklist that turns green or red as you type.

In testing against the existing journey, participants preferred the step-by-step format and understood the new address and password components. Testing also showed quick fixes for the live journey: drop the word "Login" from a sign-up flow, and use labels like "First name shown on plan".

We wanted existing customers to be able to protect another appliance without leaving their account. I tested an embedded quick-quote prototype against the existing quote and buy journey. People found the small widget cramped on mobile and disliked being asked "Do you have a dishwasher?" out of nowhere, so the design moved to full screens with a clear step count.

Data shaped each step. The ten most popular brands made up around 60% of choices, so they're offered first with search for the rest. Around 40% of customers reported guarantees longer than two years, so the guarantee question explains how to check rather than assuming. And about 30% of people who first said their appliance wasn't working went back and changed their answer, so the "good working order" step spells out exactly what that means.

The sessions also exposed problems in the live journey: the "No thanks, show me the quote" link sat below the fold, and the basket appeared under the pay button. We prioritised both fixes.

The appliance picker looked like a set of buttons but behaved like radio buttons, and there was no visible focus. Keyboard users tabbed in, pressed Enter and nothing happened. I redesigned it to look and behave like the radio group it is, with a clear focus indicator, visible checked states and a submit button. I also ran contrast tests on our button and background colours so every pairing we used met WCAG AA.

Our type and spacing jumped at each breakpoint, so a heading could look right on one screen and oversized just below the next. I moved us to fluid type and spacing that scale smoothly between a 360px and 1536px viewport, defined once and shared by design and code.

For colour, I built the brand palette on the OKLCH colour space. Its lightness value gives a numbered scale, like dg-primary-60, where every colour at the same number has the same perceived lightness. Designers and developers can predict contrast from the name alone. Three Figma frame sizes and a 12-column grid at every breakpoint completed the set.