Compricer
A/B testing
User testing
Design system
Workshops
CRO
WCAG 2.1
UX Research
Agile development
Wireframing
Hi-fi prototying
Compricer
A/B testing
User testing
Design system
Workshops
CRO
WCAG 2.1
UX Research
Agile development
Wireframing
Hi-fi prototying
Compricer
A/B testing
User testing
Design system
Workshops
CRO
WCAG 2.1
UX Research
Agile development
Wireframing
Hi-fi prototying
Role
Product Designer
Time frame
2021 – 2022
Platform
Web: Mobile and Desktop
Role
Product Designer
Time frame
2021 – 2022
Platform
Web: Mobile and Desktop
Role
Product Designer
Time frame
2021 – 2022
Platform
Web: Mobile and Desktop
The scope
Compricer is Sweden’s largest personal finance comparison site, helping hundreds of thousands of users make better financial decisions each year. Despite attracting over half a million unique monthly visitors, the site struggled to provide a consistent UX and UI experience. With design lacking in many areas, the company relied heavily on its call center to support users. Limited tech resources also constrained new feature development. Although a redesign had been introduced in 2020, much of the site had not yet been updated. My focus at Compricer was therefore on improving, updating, and optimising existing user flows.
Deliverables
Working closely with the product and tech teams, my UX Lead and I developed design concepts through iterative user testing. A/B testing validated our designs and measured improvements in conversion. By continuously evaluating funnels and user flows, we applied Conversion Rate Optimisation (CRO) to simplify processes, further increasing online revenue. As the lead for the design system and Compricer’s digital visual identity, I collaborated closely with frontend and brand teams to ensure seamless sitewide implementation. Accessibility was a key focus, with all designs and system components adhering to WCAG 2.1 standards.
The scope
Compricer is Sweden’s largest personal finance comparison site, helping hundreds of thousands of users make better financial decisions each year. Despite attracting over half a million unique monthly visitors, the site struggled to provide a consistent UX and UI experience. With design lacking in many areas, the company relied heavily on its call center to support users. Limited tech resources also constrained new feature development. Although a redesign had been introduced in 2020, much of the site had not yet been updated. My focus at Compricer was therefore on improving, updating, and optimising existing user flows.
Deliverables
Working closely with the product and tech teams, my UX Lead and I developed design concepts through iterative user testing. A/B testing validated our designs and measured improvements in conversion. By continuously evaluating funnels and user flows, we applied Conversion Rate Optimisation (CRO) to simplify processes, further increasing online revenue. As the lead for the design system and Compricer’s digital visual identity, I collaborated closely with frontend and brand teams to ensure seamless sitewide implementation. Accessibility was a key focus, with all designs and system components adhering to WCAG 2.1 standards.
The scope
Compricer is Sweden’s largest personal finance comparison site, helping hundreds of thousands of users make better financial decisions each year. Despite attracting over half a million unique monthly visitors, the site struggled to provide a consistent UX and UI experience. With design lacking in many areas, the company relied heavily on its call center to support users. Limited tech resources also constrained new feature development. Although a redesign had been introduced in 2020, much of the site had not yet been updated. My focus at Compricer was therefore on improving, updating, and optimising existing user flows.
Deliverables
Working closely with the product and tech teams, my UX Lead and I developed design concepts through iterative user testing. A/B testing validated our designs and measured improvements in conversion. By continuously evaluating funnels and user flows, we applied Conversion Rate Optimisation (CRO) to simplify processes, further increasing online revenue. As the lead for the design system and Compricer’s digital visual identity, I collaborated closely with frontend and brand teams to ensure seamless sitewide implementation. Accessibility was a key focus, with all designs and system components adhering to WCAG 2.1 standards.
Mockup of the car insurance comparison page on mobile.
01
The iterative design process
The creative process is rarely linear, especially when improving a product through a conversion-driven approach with extensive A/B testing. To integrate Design Thinking while staying aligned with KPIs, we followed a four-step design process. Most projects started with discovery and ended with delivery, but the middle steps varied depending on the challenge. Sometimes research needed revisiting after development, while other projects required additional prototyping based on A/B test results. The process functioned more as a feedback loop than a straightforward workflow.
01
The iterative design process
The creative process is rarely linear, especially when improving a product through a conversion-driven approach with extensive A/B testing. To integrate Design Thinking while staying aligned with KPIs, we followed a four-step design process. Most projects started with discovery and ended with delivery, but the middle steps varied depending on the challenge. Sometimes research needed revisiting after development, while other projects required additional prototyping based on A/B test results. The process functioned more as a feedback loop than a straightforward workflow.
01
The iterative design process
The creative process is rarely linear, especially when improving a product through a conversion-driven approach with extensive A/B testing. To integrate Design Thinking while staying aligned with KPIs, we followed a four-step design process. Most projects started with discovery and ended with delivery, but the middle steps varied depending on the challenge. Sometimes research needed revisiting after development, while other projects required additional prototyping based on A/B test results. The process functioned more as a feedback loop than a straightforward workflow.
Discover
Understanding the problem through research.
Define
Using research and findings to map out problems, needs, users, flows, etc.
Develop
Ideating and prototyping in order to converge into the right solution.
Deliver
Developer handoff and following up through A/B testing, data analysis and iteration.
02
Designing with users in mind
Compricer’s user flows were standardised across the site. Users always had to fill out a form, receive offers to compare, select an offer, and then complete another form to sign. Most of the flows revolved around forms, even though the comparison page delivered the most value. Starting with the car insurance service, which had the highest traffic, we conducted user tests and uncovered new pain points. Based on these insights, we redesigned the pages with the main changes focused on:
More compact cards for easier comparison, with at least three cards visible at once on mobile.
More CTAs and important information above the fold.
Stepper for progress tracking.
Less intrusive competition message (in purple).
A sticky search button for swifter search criteria changes on mobile.
02
Designing with users in mind
Compricer’s user flows were standardised across the site. Users always had to fill out a form, receive offers to compare, select an offer, and then complete another form to sign. Most of the flows revolved around forms, even though the comparison page delivered the most value. Starting with the car insurance service, which had the highest traffic, we conducted user tests and uncovered new pain points. Based on these insights, we redesigned the pages with the main changes focused on:
More compact cards for easier comparison, with at least three cards visible at once on mobile.
More CTAs and important information in the fold
Stepper for progress tracking
Less intrusive competition message (in purple)
A fixed search button for swifter search criteria changes on mobile.
02
Designing with users in mind
Compricer’s user flows were standardised across the site. Users always had to fill out a form, receive offers to compare, select an offer, and then complete another form to sign. Most of the flows revolved around forms, even though the comparison page delivered the most value. Starting with the car insurance service, which had the highest traffic, we conducted user tests and uncovered new pain points. Based on these insights, we redesigned the pages with the main changes focused on:
More compact cards for easier comparison, with at least three cards visible at once on mobile.
More CTAs and important information above the fold.
Stepper for progress tracking.
Less intrusive competition message (in purple).
A sticky search button for swifter search criteria changes on mobile.
Before and after of the car insurance comparison page.
03
Optimising user flows
As previously mentioned, Compricer's user flows consisted mostly of forms, although the comparison page was the main reason users visited the site. Using user research and data, we simplified the flows by eliminating several steps, making it 33% shorter, and auto-filling most of the information in the forms. This led users quicker to the comparison page, which reduced bounce rate and increased conversion further.
03
Optimising user flows
As previously mentioned, Compricer's user flows consisted mostly of forms, although the comparison page was the main reason users visited the site. Using user research and data, we simplified the flows by eliminating several steps, making it 33% shorter, and auto-filling most of the information in the forms. This led users quicker to the comparison page, which reduced bounce rate and increased conversion further.
03
Optimising user flows
As previously mentioned, Compricer's user flows consisted mostly of forms, although the comparison page was the main reason users visited the site. Using user research and data, we simplified the flows by eliminating several steps, making it 33% shorter, and auto-filling most of the information in the forms. This led users quicker to the comparison page, which reduced bounce rate and increased conversion further.
Landing page
form
Enter
info
Details
form
Enter
info
Comparison
page
Enter
info
Buy
form
Enter
info
Confirmation
page
Confirm
Thank you
Page
Visualisation of a user flow when buying an insurance, showing which steps and pages were removed.
04
Scanning data easier
Personal finance isn’t always the most engaging topic, but when users’ own money is involved, a transparent and frictionless experience is essential. While Compricer aims to help users with their finances, some services fell short, particularly the interest rate tables for mortgages and savings accounts. These pages were cluttered, non-intuitive, and difficult to compare. We redesigned the interest rate pages to make it easy for users to scan, filter, and sort rates, creating a simple and intuitive comparison experience. The new design led to a 21% conversion rate improvement across all devices during A/B testing.
04
Scanning data easier
Personal finance isn’t always the most engaging topic, but when users’ own money is involved, a transparent and frictionless experience is essential. While Compricer aims to help users with their finances, some services fell short, particularly the interest rate tables for mortgages and savings accounts. These pages were cluttered, non-intuitive, and difficult to compare. We redesigned the interest rate pages to make it easy for users to scan, filter, and sort rates, creating a simple and intuitive comparison experience. The new design led to a 21% conversion rate improvement across all devices during A/B testing.
04
Scanning data easier
Personal finance isn’t always the most engaging topic, but when users’ own money is involved, a transparent and frictionless experience is essential. While Compricer aims to help users with their finances, some services fell short, particularly the interest rate tables for mortgages and savings accounts. These pages were cluttered, non-intuitive, and difficult to compare. We redesigned the interest rate pages to make it easy for users to scan, filter, and sort rates, creating a simple and intuitive comparison experience. The new design led to a 21% conversion rate improvement across all devices during A/B testing.
Before and after of the savings interest rate page.
05
Evaluating funnels and analysing the data
Working on a high-traffic site like Compricer requires fully leveraging data to make informed decisions. As a product designer, this involved A/B testing designs and evaluating funnels and flows. For example, we improved the car insurance flow, but the overall conversion rate remained unchanged due to an outdated design at the final step. Funnel analysis showed that while the redesigned page saw higher completion, drop-off at the end remained the same. This insight was crucial in discussions with stakeholders to highlight the need for improvements across the entire flow.
05
Evaluating funnels and analysing the data
Working on a high-traffic site like Compricer requires fully leveraging data to make informed decisions. As a product designer, this involved A/B testing designs and evaluating funnels and flows. For example, we improved the car insurance flow, but the overall conversion rate remained unchanged due to an outdated design at the final step. Funnel analysis showed that while the redesigned page saw higher completion, drop-off at the end remained the same. This insight was crucial in discussions with stakeholders to highlight the need for improvements across the entire flow.
05
Evaluating funnels and analysing the data
Working on a high-traffic site like Compricer requires fully leveraging data to make informed decisions. As a product designer, this involved A/B testing designs and evaluating funnels and flows. For example, we improved the car insurance flow, but the overall conversion rate remained unchanged due to an outdated design at the final step. Funnel analysis showed that while the redesigned page saw higher completion, drop-off at the end remained the same. This insight was crucial in discussions with stakeholders to highlight the need for improvements across the entire flow.
Number of users
Landing
page
-%
Form
-%
Compare
-%
Buy
-%
Thank
you
How it can look like in Google Analytics when evaluating funnels for a flow. Numbers deleted because of confidentiality.
06
Applying our insights throughout the site
Using the insights gathered from research, user tests, A/B tests, we were able to apply our knowledge onto other services on the site to increase conversion there as well. One such service was the boat insurance as can be seen below. Not only did we improve the UX, but the UI got a facelift as well.
06
Applying our insights throughout the site
Using the insights gathered from research, user tests, A/B tests, we were able to apply our knowledge onto other services on the site to increase conversion there as well. One such service was the boat insurance as can be seen below. Not only did we improve the UX, but the UI got a facelift as well.
06
Applying our insights throughout the site
Using the insights gathered from research, user tests, A/B tests, we were able to apply our knowledge onto other services on the site to increase conversion there as well. One such service was the boat insurance as can be seen below. Not only did we improve the UX, but the UI got a facelift as well.
After the boat insurance redesign.
07
A scaleable design system
As the design system manager, I was responsible for building and maintaining Figma components, ensuring they met WCAG 2.1 standards and aligned with the overall brand. This included creating guidelines for each component, outlining usage and specific considerations. I worked closely with both developers and marketing throughout the design and implementation phases. My goal was to create a cohesive, efficient, and accessible design system that would support the organisation’s needs for years to come.
07
A scaleable design system
As the design system manager, I was responsible for building and maintaining Figma components, ensuring they met WCAG 2.1 standards and aligned with the overall brand. This included creating guidelines for each component, outlining usage and specific considerations. I worked closely with both developers and marketing throughout the design and implementation phases. My goal was to create a cohesive, efficient, and accessible design system that would support the organisation’s needs for years to come.
07
A scaleable design system
As the design system manager, I was responsible for building and maintaining Figma components, ensuring they met WCAG 2.1 standards and aligned with the overall brand. This included creating guidelines for each component, outlining usage and specific considerations. I worked closely with both developers and marketing throughout the design and implementation phases. My goal was to create a cohesive, efficient, and accessible design system that would support the organisation’s needs for years to come.
Snippet of the guidelines created for Compricer's design system.
08
Moving forward
Compricer’s main challenge is providing additional value to users. The site lacks a clear hook to retain visitors and should focus on personalisation and automation. Key questions include: how can the site offer long-term, meaningful value? For example, it could provide an overview of users’ current insurances and finances, along with personalised recommendations. Automation could streamline forms by fetching data instead of requiring manual input. This lack of prioritisation may stem from limited time and resources, but to maintain its position as the market’s leading insurance comparison site, Compricer needs to begin integrating innovation into its development.
08
Moving forward
Compricer’s main challenge is providing additional value to users. The site lacks a clear hook to retain visitors and should focus on personalisation and automation. Key questions include: how can the site offer long-term, meaningful value? For example, it could provide an overview of users’ current insurances and finances, along with personalised recommendations. Automation could streamline forms by fetching data instead of requiring manual input. This lack of prioritisation may stem from limited time and resources, but to maintain its position as the market’s leading insurance comparison site, Compricer needs to begin integrating innovation into its development.
08
Moving forward
Compricer’s main challenge is providing additional value to users. The site lacks a clear hook to retain visitors and should focus on personalisation and automation. Key questions include: how can the site offer long-term, meaningful value? For example, it could provide an overview of users’ current insurances and finances, along with personalised recommendations. Automation could streamline forms by fetching data instead of requiring manual input. This lack of prioritisation may stem from limited time and resources, but to maintain its position as the market’s leading insurance comparison site, Compricer needs to begin integrating innovation into its development.
Sketches from an ideation workshop on how to personalise Compricer.
