Problems solved
Explore how designs have been brought to life, with testimonials showcasing their business impact
A super design system
Design system
Design tokens
System design
The problem
- Slow and resource intensive maintenance of the existing design system
- Upcoming brand refresh and site-wide look & feel change
The solution
- Identify bottlenecks within the existing design system
- New platform with automated features and compatibility with our design and front-end tools
- Design system migration & integration
Project details
In September 2021, it was time for a brand refresh for MoneySuperMarket again, transitioning from its ‘Money Calm’ campaign to ‘MoneySuperSeven’.
MoneySuperSeven
This bold new campaign introduced a team of seven money-saving specialists, each representing a specific area of price-comparison: car insurance, energy, home insurance, broadband, travel insurance, credit cards, and pet insurance. It advertised the company’s financial services with memorable characters – featuring Judi Dench in a similar role like ‘M’ from the James Bond films.
The campaign received positive attention for its creative approach and clear messaging, effectively communicating the brand’s expanded focus and dedication to customer savings.
The new campaign also made a shift from the old look and feel of the website. The new colours, characters, and tone of voice had to be reflected in the website’s content. Components and journeys had to be updated to be consistent.
Challenges with the design system
Moneysupermarket already had an existing design system. However, even before the new campaign, it proved to be challenging to keep it up-to-date. Updates were implemented manually. It had an ever-increasing backlog. The CMS slowly became unsustainable, and changes were lagging behind. With the new campaign coming up, there was a serious risk that it would make things even worse.
Immediate priorities were clear: doing the actual work first, designing, validating, and implementing the new branding on the journeys and the main landing pages. Updating the design system and documentation didn’t get enough resources. It fell behind compared to the live site. Our design system lost its primary purpose – being the one source of truth.
After the successful launch of the MoneySuperSeven campaign, I led a rethinking of the strategy of the design system. Teaming up with brand/creative, product, and development, we needed to find a new way to evaluate it and fix its main pain points – we needed to treat it as a product. The audit gave us successful aspects to build on and clear areas for improvement.
The Good
Atomic structure
There was already a solid foundation established, a well-structured atomic design system. A rich component library – designed and maintained in Figma – featuring foundations, components, patterns, and page designs.
The frontend code of the components and foundations were developed and maintained in Storybook, which gave us a ton of flexibility to integrate with different systems.
The Bad
Design system CMS
On the flip-side, the existing design system presented significant challenges in terms of flexibility, required a lot of effort to update, and lacked automation. It was a joint effort from the entire design team to set up the first version of the design system, but unfortunately, maintenance still demanded a lot of resources – both its CMS system and its content.
The need for manual maintenance and the limited integration with other tools (Figma, Storybook) found out to be the main reason for its rapid obsolescence.
The team agreed that replatforming the design system into an established platform with automated features would solve our biggest issues.
The Solution
Zeroheight comes to the rescue
We have agreed to replace our custom CMS with a more flexible solution. The team identified the following requirements against the new CMS:
- Automation & integration with Figma and Storybook is a must (increased efficiency with less resource)
- No maintenance on the design system CMS (no more in-house resource)
- Full version control (roll out releases efficiently)
- CMS support for existing and upcoming technologies (future proofing)
- Comprehensive maintenance support
(no more in-house development)
After considering many options and the available tools on the market, my team decided to explore 3rd party tool called Zeroheight. I’ve led the partnership and after a successful trial period, we started to connect our component library and codebase into Zeroheight.
Setting up the new system
Zeroheight proved to be a game-changer. Following a quick onboarding, my team successfully transformed the existing component library and codebase into Zeroheight. Built-in integrations with Figma and Storybook eliminated the need to manually update design artifacts and code. A new inspect mode with instant front-end code generation sped up handover between design and development.
The CMS was maintained by Zeroheight, so our design system team could really focus on what mattered the most – collect feedback from users, improve the workflow, introduce optimizations, roll out releases. Thanks to automation, UX and product designers no longer needed to manually update design system content; they became users, not a constant maintenance crew. Developers benefited from simplified handover thanks to features like front-end code generation and design tokens. Design tokens introduced fully automated changes in the codebase if foundational changes (new colors, typeface, spacing, etc.) were introduced in the future – like another rebranding.
The design system was finally found the way back to its original purpose – being the one source of truth for design, content, development, and other stakeholders.
Project summary
+15%
Faster feature delivery
-20%
Less design debt
Zeroheight’s built-in automated features simplified design system updates and releases, which helped with component reuse and consistency. This not only saved time but also streamlined the product workflow. As a result, designers could focus more on designing for the customer’s problem and less on deciding on the right component or pattern. Less time needed to be spent on developer handovers as standard components and their behaviors were already documented and implemented.
Analytics and heat maps feature provided valuable insights of how the system was being used, tracking engagement and helping the design system team identify popular components and lacking documentations. By monitoring user interactions, it highlighted areas where the system was thriving and where further improvements were needed.
Streamlined components
Enhanced documentations
Improved accessibility
The data also revealed opportunities for optimization, such as streamlining components or enhancing documentation. Accessibility gained greater attention, enabling improvements in this area to deliver more accessible and inclusive experiences. The design system – once again – became an essential resource for the business and the product teams.
Project year: 2021
Duration: 6 months
Team: Product lead and 2 product designers
A new design-system and e-commerce website
Design system
Service design
IA
Product strategy
Product optimization
The problem
- Inconsistent UI and UX patterns within the JD website
- Inconsistencies globally, between JD websites
- Legacy tech (outdated back-end, slow load times)
The solution
- Brand new design system (UX/design solution)
- Website re-platform (technology solution)
Project details
The new principles
A team of 3 product designers (head, senior and a mid-weight) worked on the new component library (foundations, components and patterns) and crafted a consistent digital language from the ground up for JD UK and the European markets.
They were supported by a cross-functional design system team — developers, QAs, copywriters, creatives, and accessibility experts — who supported the product designers to build a new system that serves product teams the right way.
The design system team followed these principles:
Atomic design system
We built the design system from the ground up, starting with foundations, such as logos, colors, typography and iconography. Then, we developed reusable components like buttons and forms, which were applied to create cohesive, user-friendly patterns and page designs.
Accessibility & inclusive design principles
We prioritized accessibility and inclusive design principles throughout the design process, ensuring adherence to ADA and EEA guidelines. Proper color contrast, keyboard navigation, and screen reader compatibility gave an experience that’s accessible to all users, regardless of ability.
Integrated systems
We seamlessly connected our designs in Figma to frontend code using variables and design tokens within Storybook, ensuring consistency across the design system. Zeroheight served as a user-friendly platform to integrate these tools, offering a centralized portal to distribute updates, gather internal feedback, and maintain a single source of truth. Automation and version control were key to keeping the design system up to date, well-documented, and aligned with ongoing changes.
Built to scale globally
The development team leveraged the new design system to build the website, ensuring scalability for future global markets. By utilizing standardized components and guidelines, the system enabled smooth version releases, optimizations, and a high-quality handover for ongoing updates. The structure also served a basis to create design systems for other brands owned by JD Group. This flexible approach sets the foundation for consistent, efficient growth across regions while maintaining design integrity.
The design system
The newly implemented design system represents a pivotal milestone in JD’s digital transformation, which was implemented in their new web experience.
Project summary
This transformation presented a unique opportunity to make significant improvements on site performance and lay the foundation of a consistent, global omni-channel customer experience.
Scalable & Consistent
Accessible & Inclusive
Integrated & Automated
The new website’s first release launched for the Italian market in 2025.
Project year: 2024
Duration: 9 months
Online forms done the right way
User research
UX patterns
Prototyping
Validation / iteration
SaaS
The problem
- Poor question set performance
- Negative user feedback: ‘long and complex questions’
The solution
- Customer research to identify customer expectations across our question sets
- Question set patterns and spaces tailored to each comparison journey
- Reworked question set journeys validated with users
Project details
As part of Moneysupermarket’s UX team, I was tasked to identify and tackle the root cause of poor question set performance. Along with researchers, we built a plan to identify:
Customer types
(not limited to existing personas and major customer types)
Product diversity
Differences across products and question sets
Expectations
Customer expectations within question set journeys
We used the outcome of the research to:
- identify key themes and needs for different users
- explore and validate different question set patterns that solve those pain-points and user needs
The research was conducted on diverse users and multiple comparison channels – insurance (car, home, life) and money products (credit cards, mortgages). The study combined existing learning with new qualitative insights – e.g. usability tests, customer interviews, screen recordings – and quantitative research – e.g. surveys.
Key findings
Fresh data confirmed our assumptions that customer expectation constantly changes during the question set journeys. In some areas they require more support, some places the don’t struggle at all.
It also confirmed that our journeys were falling short on inclusivity. People with different level of product and technology understanding might experience different level of frustrations. Our questions and explanations contained a lot of jargon and weren’t really helpful for most of the users. Users required more handholding and a sense of reassurance and calmness when sharing personal – and sometimes sensitive – information.
The surprising finding of this research was that user behaviors were fundamentally different on various channels – like car insurance comparison was vastly different to someone getting a life insurance or comparing credit cards. That seems obvious now, but at the time we used the same question set patterns across all products. That obviously didn’t work well for our customers.
We identified the following themes:
Inclusivity
Stop focusing only on the majority. Consider the diverse range of customers using our services.
Product diversity
The ‘one size fits all‘ approach for our different question sets is far from optimal.
Expectations
Customers have different expectations in each stage of the journey.
Question set patterns
To tackle these challenges, I started to experiment with different question set patterns. Each pattern built around a main UX principle.
Clarity
Only 1-3 questions per page
This pattern only showed a few questions at a time compared to long question forms.
My hypothesis was that this pattern would give clarity and better focus around questions. Ultimately help customers to lock-in and answer questions more effectively.
Useful for:
- Personal or sensitive questions
- Short, but important part of the form, where giving correct answers are key for the customers
Control
Gradually reveal new questions
This pattern showed one question initially, but instead of clicking continue after each question, the user got scrolled to the next question.
My hypothesis was that this pattern would give quicker completion time and a better sense of progression while maintaining decent level of control of the questions.
Useful for:
- Filling out long forms
- Generic questions where focus is less and progression is more important
Overview
Summarize answers
This pattern would be used to give an overview of answers during long question sets.
My hypothesis was that this pattern would help users double check and evaluate their answers, therefore they complete question sets more accurately.
Useful for:
- Checking answers after sections
In order to validate assumptions and collect initial feedback, we created prototypes that simulated question sets on various comparison channels.
After a series of usability tests, we found out that not only we need to use the right patterns for the right comparison channels, but we need journey segmentations within the question sets, meaning only the right mixture of these patterns will work on each journey.
Journey spaces
Based on user feedback, we introduced journey spaces within the question sets. The spaces had different characteristics and used the different core principles of the question set patterns. They were represented in different ratio across different journeys – depending on the product and the specific customer expectations.
These spaces were called Emotional, Functional and Transitional.
Emotional
“Give me clarity“
Let’s get to know the customer. Provide space that gives increased focus and also a sense of calmness.
Functional
“Give me control“
This is a lighter, clearer space, where the customer takes action, makes progression and feels in control.
Transitional
“Give me an overview“
This space is all about a clear summary of what answers the customer gave, along with clear ways how to amend them if necessary.
That was the point, where we felt we had made a breakthrough in defining the building blocks and the diverse requirements for various question set journeys.
We knew that finding the right mixture for each comparison channel will take time, but we defined a framework – a giant lego box if you like – to build tailored question set experience for customer expectations within our comparison portfolio.
Did this one-by-one, started with the remortgaging journey.
Remortgaging journey (prototype)
This prototype was used to collect feedback and validate the new journey spaces for that specific comparison channel.
We did qualitative usability tests with diverse customers, who were actively on the market at the time for remortgaging.
The reception was very positive. The journey spaces resonated well with the test audience in usability testing – the largest improvement were reported from previously underrepresented groups i.e. people with special policy needs who required detailed information to choose the right product.
We used their feedback on future iterations and optimizations to find the right balance of the journey spaces for each comparison channel.
Project summary
A/B testing these features in quant on money products such as mortgages, credit cards, and loans resulted in exceptionally positive outcomes. There were significant uplift on question set conversion rate and consistently less drop-offs across all devices with the new question sets compared to the control versions.
up to
+10%
Question-set conversion rate
up to
-20%
Question-set drop-off rate
Question set spaces and diverse use of question set patterns resulted in conversion rate uplift on insurance channels like car, home, travel and life insurance. Customers reported increased engagement and focus on necessary fields while completing the question set. Beyond the short-term KPIs, the optimizations improved long-term metrics as well, such as customer loyalty and our NPS score.
Project year: 2020-2021
Duration: 12 months
Team: 3 UX designers
A revolutionary life insurance journey
Service design
Optimisation
Legal compliance
SaaS
The problem
- Outdated and broken life insurance comparison experience
- Compliance challenges, based on upcoming regulatory standards (GDPR, IDD)
The solution
- A new, streamlined comparison and purchase experience on the price comparison website, considering the customer’s health status and personal needs
- Unified question-set for insurers
Project details
In a significant strategic move, the company has embarked on a bold initiative to revolutionize the life insurance comparison market. Their objective was to provide customers with a true price comparison of life insurance policies, based on their health, personal requirements and needs. Although this may seem evident now, before 2018, this was not the norm and the comparison was tedious and convoluted. Also it failed to comply with upcoming GDPR and IDD standards.
Phase 1
True comparison & Buy Now proposition
In 2016, individuals had the following options to purchase life insurance: visit a price comparison website or directly get a quote from an insurer.
To obtain the most advantageous deals, users preferred comparison websites like MoneySuperMarket because they could easily compare quotes from various insurers.
The old journey
To get quotes, users answered a few questions about cover amounts, personal details, and smoking habits. This a relatively short form, took only a few minutes to answer.
Then they were presented with a list of quotes. However these prices were not necessarily accurate, because it didn’t take an account the customer’s health and lifestyle.
This provided a false expectation for customers, as they believed they had answered all necessary questions to obtain a quote, and the prices displayed are the actual prices they can purchase the policies.
Unfortunately that wasn’t the case as they needed to continue filling out more questions on the selected insurer’s website.
Step 1
Start a new quote by answering 10-12 basic questions
Step 2
Get initial quotes from insurers with indicative prices
Step 3
Continue on the insurer’s site by selecting a quote
This was quite frustrating for the users. They had spend up to 15-20 minutes answering more, detailed questions about their health history, lifestyle, and further policy requirements.
Also, because this happened on the insurer website, there was a disconnect in the user experience and visual design between the insurer’s website and the comparison site during the quoting process. On occasion, the insurer’s website provided a poorer user experience compared to the comparison site.
If the customer persisted through the additional inquiries, they most likely discovered that their prices had been altered and potentially increased. Also, they had no choice to select an alternative insurer.
Step 4
Answer 30 or more questions about your health and lifestyle
Step 5
Get a real prices and full policy details from the selected insurer only
Step 6
Either purchase the policy or go back to Step 2 and try with another insurer
Multiple problems
This posed multiple problems for the customers, the business and also for the financial regulators:
Customers complained about the long and tedious journeys, and the fact that their prices changed during the comparison.
The business was unhappy with large number of dropoffs and customer trust decrease towards their price comparisons services.
Financial regulators (FCA) were less tolerant with comparisons that won’t show true prices that fully reflect the customer’s needs.
In response to numerous customer feedback, my team helped Moneysupermarket to design, validate and implement a streamlined process, disrupting the life insurance market with a compelling “Buy now” proposition.
The new, streamlined journey
The new journey put more questions upfront for the customers, however at this point they expected to answer a lot of questions, so more dropoffs are expected to be balanced out by better conversion rate when buying the policies.
This assumption seemed to be the case as customers appreciated the real policy prices on the comparison page, as those were based on their health and lifestyle factors.
The new journey was made possible by a new integration technology between unified question sets between insurers.
It also enabled the customers to directly purchase policies from the comparison site, thereby eliminating the cumbersome additional steps and potentially subpar user experience on the insurer’s website.
Step 1
Complete a longer question set upfront, including detailed health and lifestyle questions
Step 2
Get quotes with real prices and full policy details from all insurers based on their answers
Step 3
Select the most suitable policy and purchase it from the price comparison website
Phase 1
Summary
Launching a substantial project like this poses risks mainly to commercial performance and KPIs, such as site conversion rate. Nevertheless, the outcomes were promising and tackled our initial challenges:
Customers who committed to complete the longer question set were able to do a fair comparison and make an informed decision before purchase.
The business was happy with less dropoffs and decreased pressure from regulators. However sales volumes dropped requiring further optimizations.
Financial regulators were pleased with a true comparison for now, but stricter regulations were imminent, meant further requirements for MSM.
To tackle decreased sales performance and to comply with future regulations and standards, – along with my team – I designed further optimizations on the life insurance channel.
Project year: 2018
Duration: 9 months
Design team: 3 product designers
Phase 2
Goal and need based life insurance journey
Introducing the MVP of the Buy Now proposition in 2018 still left a lot of areas for improvement. The increasing demands from regulators and the potential for enhanced conversion performance presented us with further opportunities to optimize the user journey.
We identified the following areas of improvement in the question set around conversion rate and sales performance:
Number of questions
Every question presents an additional challenge for the user to overcome, thereby posing a risk of an elevated drop-off rate and a decline in the conversion rate.
Relevance of questions
Are all questions relevant? Can we simplify, combine, or remove certain questions to reduce the effort required to complete the question set?
Order of questions
Did we ask questions in the right order, and did we avoid asking similar questions, where the customer could feel they already answered that?
Clarity of questions
Did we communicate clearly and avoid using jargon or commercial language? Did we provide sufficient information to help answer complex questions?
We also identified additional areas to be mindful of to comply with upcoming regulations and standards by the FCA, such as General Data Protection Regulation (GDPR) and Insurance Distribution Directive (IDD):
Identify customer demands and needs
Did we ask all the right questions to identify the level of cover is needed for our customers?
Results based on customer needs
Did we clearly present results, policy details and cover levels based on our customer’s demands and needs?
Phase 2
Summary
Testing new concepts and optimized question flows resulted a consistent improvement in conversion and sales metrics, while simultaneously enhancing compliance with regulatory standards.
+7%
Conversion rate uplift
-15%
Less questions
-21%
Overall drop-off rate
Project year: 2019-2020
Duration: 6 months
Design team: 2 product designers