Lead UX Designer
Short-term car cover journey for MoneySuperMarket
The challenge
This journey ran on Comparison Creator, Defaqto's in-house platform for building comparison journeys. The team building it had no UX support — the flow had been entirely development-led. A rebrand to MONY was also confirmed for a few months later.
I needed to design a production-ready journey, end-to-end, that developers could build from directly. I also needed to avoid designing the same components twice when the MONY rebrand landed.
Process
As the sole designer on this project, I built a full design system — components, icons, variables, typography and gradients — under the existing MSM library. I used it to design the complete flow: the form entry steps, the transition from form to results, and the results page itself, including its side sheets. I gave developers view access through Figma's Dev Mode, so they could inspect specs directly instead of working from static exports. To de-risk the rebrand, I set up a parallel MONY component library with matching structure, then demonstrated swapping the entire flow to the new brand using Figma's library-swap feature — with no rework of the underlying layouts.
Gallery
Results
The MSM-branded journey shipped as the build reference. QA finally had a source of truth to validate the build against — something this journey had never had before — and developers had clearer guidelines to work from. Product could take the proposed changes to MSM stakeholders with confidence, backed by a proper design instead of an ad hoc, development-led flow. When the MONY rebrand landed, the swap-library approach became the template for migrating the journey, saving the team from redesigning it from scratch.
Key learnings
Structuring components and styles around library-swapping early turned a full rebrand into a swap, not a redesign. It's worth the extra setup time whenever a brand change is already on the roadmap.
Role
Lead UX Designer
Category
Comparison Creator · MoneySuperMarket