Say hello
  • Values
  • Portfolio
  • About me

Problems solved

Explore how designs have been brought to life, with testimonials showcasing their business impact

Moneysupermarket logo
Barclays logo
JD sports logo
Moneysupermarket logo

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.

Design system CMS
The design system already had a well-defined structure

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.

MSM brand guidelines
Component definitions

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.

Zeroheight analytics – source: zeroheight.com
Zeroheight heat maps – source: zeroheight.com

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


Moneysupermarket logo

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. These spaces had different characteristics and used the different core principles of the question set patterns. These spaces 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.

Remortgaging journey prototype

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


Moneysupermarket logo

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


Barclays logo

The Pingit app redesign

Motion design

Interaction design

UX design

Mobile app

The problem

  • Outdated design & UX on the Pingit mobile app
  • Convoluted customer journeys (e.g. onboarding experience)

The solution

  • Redesigned user journeys (UX)
  • New interactions & design principles (IxD)
  • Support the app’s brand refresh and motion design
Pingit app mockup 1
Pingit app mockup 2
Project details

The Barclays Pingit app was a mobile payment app that allowed users to send and receive money instantly, using just a mobile number. It offered a simple and secure way to make payments, split bills, and manage finances, without needing to share bank account details. While it was a standalone app (2015), the design team was involved in redesigning the mobile application to provide better user experience.

Pingit received a major UX overhaul and a new look & feel in 2015. As a UX/interaction designer, I did motion design, involved in the redesign of the UX journeys and prototyped/validated meaningful interactions for the mobile application.

Motion design

The app has undergone a visual transformation, featuring a redesigned logo. I have contributed to the motion design of the logo’s animation, which is displayed during the loading screen. The image above shows the initial storyboard. The animation was crafted using Adobe After Effects.

Motion design prototypes

Here are two versions of the final motion design – with different sound effects (turn on speakers to hear the difference).


Scope of the UX work

Beyond motion design, I helped the UX team to rework almost every aspect of the mobile app journey including:

  • user onboarding
  • main navigation
  • main hub page
  • payment methods
  • payment flows
  • accounts view
  • app settings

User flows and wireframes

Some of the early flows and wireframes developed during workshops, based on feedback from user research sessions, served as the foundation for navigation concepts, user journeys and prototypes.

Interaction design

Visual prototypes were used to validate navigation patterns and meaningful interaction concepts.

The project was quite complex, because at the same time of the UX overhaul, the app received many additional features. On top of the brand new look & feel, this project was the biggest update of the Pingit app, since its original launch in 2012.

Pingit iOS mockup
Payment to a mobile number (iOS app)
ping.me web service
Payment to Pingit users using a browser (pingit.me)
Pingit for Android
Auto-topup for non-Barclays accounts
(Android app)
Pingit for Android
Pingit jars
(Android app)
Pay a contact
(Android app)

Project summary

The revamped user interface, redesigned customer journeys, and enhanced interactions provided a rejuvenated experience for Pingit. The app received further features in the following years. Later in 2021, Pingit and its features were subsequently merged with the Barclays’ Mobile Banking app, where they contributed to the continued success and popularity of the unified app.

Project year: 2015-2016

Duration: 9 months

Design team: 6 designers


JD sports logo

Coming soon…

Design system

Service design

IA

Product strategy

Product optimization

JD sports logo
User Smart logo
Say hello

  • Values
  • Portfolio
  • About me
  • Articles
  • Privacy Policy
  • X
  • LinkedIn