The challenge
Navigating compliance whilst ensuring a pleasurable experience
Mercedes-Benz Insurance products are traditionally sold via motor dealerships to the end customer. Our brief was to design a multi-platform, e-commerce solution to enable Mercedes-Benz to sell direct to the consumer in a non-advised online scenario.
Dealers are regulated by strict Financial Conduct Authority (FCA) guidelines when selling to customers on-site to ensure that they are treated fairly. Our challenge was to navigate these sometimes complex regulations whilst ensuring a pleasurable, easy-to-use e-commerce experience.
The application also had to support multiple front-ends for the different brands within the Daimler Group. The Smart brand has quite a different tone to Maybach's, for example.
Our approach
User-centred design in an agile environment
Our User Centred Design methodologies had to integrate well into an existing Agile Software Development environment with live users.
A mobile-first approach was taken so that we worked outwards from the tightest constraint in terms of screen real estate, content and functionality. Designing for the smallest screen first forces hard choices about priority, and it helped the client see content hierarchy as a commercial decision rather than a layout one.
The solution
Mapping the user experience
To add a further level of complexity, our solution had to integrate with an existing business-to-business platform, engineered to support an "advised sale". We needed to fully understand this user experience and compliance requirement in order to align, divert and compensate where necessary for a "non-advised" online scenario.
So we mapped both. Every step of the advised dealer journey was traced against its online equivalent, marking where the two could share a path, where the online route had to divert, and where a regulated conversation had to be compensated for by the interface alone. The map became the reference the whole team worked from, developers and compliance included.
Advised sale, in the dealership
- 01Contact details
- 02Vehicle details
- 03Status disclosure
- 04Demands & needs
- 05Summary
A business manager present throughout. Ends at a summary they talk the customer through.
Two spoken steps, one screen
Status disclosure and demands & needs were delivered face to face. Online, both had to be carried by a single screen the customer reads alone.
Non-advised sale, online and unaccompanied
- 01Choose product
- 02New or recall quote
- 03Registration
- 04Vehicle details
- 05Product / demands & needscompensates
- 06Driver details
- 07Premium
- 08Payment method
- 09Card payment
No adviser. The interface carries the regulated conversation, and the journey ends in a completed purchase.
Both routes ran on the same platform, and a route back to a dealer stayed open throughout. Source: D2C user journeys v0.5.
Coded prototype
A prototype you can still click through
The design was proven in code rather than in a deck. A coded Angular and SCSS prototype carried the whole journey: product selection, quote retrieval for a returning customer, registration, vehicle and driver capture, and checkout. Every compliance gate the FCA guidelines demanded had to survive contact with a real form.
That build has been restored and still runs, which makes it the clearest answer to the question the project raised: whether a regulated advised sale can become something a customer completes alone, on a phone, without being short-changed on protection.
Then, built, designed
Three views of the same journey
The same purchase journey at three fidelities: the low-fi screens we tested with, the coded build that proved it end to end, and the finished visual design for the protection product suite.
Tested
Low-fidelity, high frequency
Clickable low-fi screens, built with our friends at Marvel, let us put a journey in front of the team within hours rather than sprints. Cheap screens are easy to argue with, which is exactly why compliance and usability problems surfaced early.
Original Marvel prototypes are no longer hosted.
The 2016 Angular and SCSS build kept every brand decision in one partial: background colour, primary colour, heading typeface and the asset path. Shared components read those variable names and never the values. Swapping the partial re-skins the whole application, shown here as the Mercedes-Benz insurance flow on the left and the smart flow on the right, at identical geometry.
Built
The coded D2C flow
The Angular and SCSS build, restored and running. Product selection through to checkout, in the browser. One shared codebase: brand variables swapped Mercedes for Smart.
Open the prototype
Designed
The finished visual design
With the journey proven in code, we took the protection suite to brand-ready surfaces: GAP, minor damage, mechanical breakdown and alloy wheel, set in a dark editorial frame with Mercedes photography and a clear path to enquire.
The live site still follows this structure; photography and copy have been refreshed since.
View live insurance siteOutcome
From regulated concept to digital commerce
The engagement delivered a mapped compliance-led route to direct sale, tested journeys, and a working prototype of the full purchase flow, all of it inside an existing agile delivery team with live users on the other side.
The harder result was shared understanding. By the end, product, engineering and compliance were arguing about the same screens rather than about abstractions, which is what made a regulated sale designable at all.