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 comparison site for personal finance, helping hundreds of thousands of people to make better personal finance decisions every year. Despite attracting over half a million unique monthly visitors, Compricer struggled to deliver a consistent UX and UI experience. With an online service lacking in terms of design, the company heavily relied on its call center to assist their users. Due to a small tech team, the resources for developing new features was limited. Although a new design had been introduced in 2020, most of the site had not yet been updated to it. Therefore, focus during my time at Compricer was centred on updating, improving, and optimising existing flows
Deliverables
Working with the product and tech teams, my UX Lead and I created design concepts for the site through user testing and an iterative design process. Via A/B testing, we verified our designs and measured the improved conversion. Through continuously evaluating funnels and user flows, we worked with Conversion Rate Optimization (CRO) and simplified the different user flows, leading to a further increase in online revenue. Being responsible for the design system and Compricer's digital visual identity, I closely collaborated with frontend and brand to ensure a streamlined implementation of new designs sitewide. I emphasised accessibility, ensuring that the design system and all new designs would adhere to WCAG 2.1.
The scope
Compricer is Sweden's largest comparison site for personal finance, helping hundreds of thousands of people to make better personal finance decisions every year. Despite attracting over half a million unique monthly visitors, Compricer struggled to deliver a consistent UX and UI experience. With an online service lacking in terms of design, the company heavily relied on its call center to assist their users. Due to a small tech team, the resources for developing new features was limited. Although a new design had been introduced in 2020, most of the site had not yet been updated to it. Therefore, focus during my time at Compricer was centred on updating, improving, and optimising existing flows
Deliverables
Working with the product and tech teams, my UX Lead and I created design concepts for the site through user testing and an iterative design process. Via A/B testing, we verified our designs and measured the improved conversion. Through continuously evaluating funnels and user flows, we worked with Conversion Rate Optimization (CRO) and simplified the different user flows, leading to a further increase in online revenue. Being responsible for the design system and Compricer's digital visual identity, I closely collaborated with frontend and brand to ensure a streamlined implementation of new designs sitewide. I emphasised accessibility, ensuring that the design system and all new designs would adhere to WCAG 2.1.
The scope
Compricer is Sweden's largest comparison site for personal finance, helping hundreds of thousands of people to make better personal finance decisions every year. Despite attracting over half a million unique monthly visitors, Compricer struggled to deliver a consistent UX and UI experience. With an online service lacking in terms of design, the company heavily relied on its call center to assist their users. Due to a small tech team, the resources for developing new features was limited. Although a new design had been introduced in 2020, most of the site had not yet been updated to it. Therefore, focus during my time at Compricer was centred on updating, improving, and optimising existing flows
Deliverables
Working with the product and tech teams, my UX Lead and I created design concepts for the site through user testing and an iterative design process. Via A/B testing, we verified our designs and measured the improved conversion. Through continuously evaluating funnels and user flows, we worked with Conversion Rate Optimization (CRO) and simplified the different user flows, leading to a further increase in online revenue. Being responsible for the design system and Compricer's digital visual identity, I closely collaborated with frontend and brand to ensure a streamlined implementation of new designs sitewide. I emphasised accessibility, ensuring that the design system and all new designs would adhere to WCAG 2.1.
Mockup of the car insurance comparison page on mobile.
01
The iterative design process
The creative process is seldom linear, especially when continuously improving a product through a conversion-driven approach involving a lot of A/B testing as in this project. To better incorporate the Design Thinking framework into our workflow while still aligning towards established KPIs, we employed a four-step design process. While most projects began with discovery and ended with delivery, the inbetween steps could vary depending on the specific challenge. Sometimes, it was necessary to revisit to the research phase after development, while other projects required additional prototyping after seeing A/B test results. Therefore, the design process were rather to be seen as a feedback loop rather than a straightforward workflow.
01
The iterative design process
The creative process is seldom linear, especially when continuously improving a product through a conversion-driven approach involving a lot of A/B testing as in this project. To better incorporate the Design Thinking framework into our workflow while still aligning towards established KPIs, we employed a four-step design process. While most projects began with discovery and ended with delivery, the inbetween steps could vary depending on the specific challenge. Sometimes, it was necessary to revisit to the research phase after development, while other projects required additional prototyping after seeing A/B test results. Therefore, the design process were rather to be seen as a feedback loop rather than a straightforward workflow.
01
The iterative design process
The creative process is seldom linear, especially when continuously improving a product through a conversion-driven approach involving a lot of A/B testing as in this project. To better incorporate the Design Thinking framework into our workflow while still aligning towards established KPIs, we employed a four-step design process. While most projects began with discovery and ended with delivery, the inbetween steps could vary depending on the specific challenge. Sometimes, it was necessary to revisit to the research phase after development, while other projects required additional prototyping after seeing A/B test results. Therefore, the design process were rather to be seen as a feedback loop rather 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 flows were standardised across their site. They always required users to fill out a form, get offers to compare, choose an offer, and lastly sign the offer by filling out another form. As such, the user flows consisted mostly of forms, even though the comparison page provided most value to the users. Beginning with the car insurance service, which had the most traffic, we conducted user tests and discovered new pain points. Using our findings, we redesigned the pages with the main changes being:
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 flows were standardised across their site. They always required users to fill out a form, get offers to compare, choose an offer, and lastly sign the offer by filling out another form. As such, the user flows consisted mostly of forms, even though the comparison page provided most value to the users. Beginning with the car insurance service, which had the most traffic, we conducted user tests and discovered new pain points. Using our findings, we redesigned the pages with the main changes being:
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 flows were standardised across their site. They always required users to fill out a form, get offers to compare, choose an offer, and lastly sign the offer by filling out another form. As such, the user flows consisted mostly of forms, even though the comparison page provided most value to the users. Beginning with the car insurance service, which had the most traffic, we conducted user tests and discovered new pain points. Using our findings, we redesigned the pages with the main changes being:
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
For many, personal finance might not be the most engaging topic. When the users' own finances is involved, it's incredibly important to be able to offer a transparent and painless user experience. Although Compricer builds its services around helping users with their personal finances, they fell flat in a few areas. Two such services were the interest rate tables for mortgages and savings accounts. Being a comparison site, Compricer did not facilitate an easy comparison for these services. Instead, users were presented with cluttered and non-intuitive pages consisting of long blocks of texts. We set out to simplify the interest rate pages with the goal of providing users with a place where they could effortlessly compare different interest rates. To achieve this, we focused primarily on making it easier to scan, filter and sort the rates. The new design showed a CR improvement of 21% across all devices during the A/B test.
04
Scanning data easier
For many, personal finance might not be the most engaging topic. When the users' own finances is involved, it's incredibly important to be able to offer a transparent and painless user experience. Although Compricer builds its services around helping users with their personal finances, they fell flat in a few areas. Two such services were the interest rate tables for mortgages and savings accounts. Being a comparison site, Compricer did not facilitate an easy comparison for these services. Instead, users were presented with cluttered and non-intuitive pages consisting of long blocks of texts. We set out to simplify the interest rate pages with the goal of providing users with a place where they could effortlessly compare different interest rates. To achieve this, we focused primarily on making it easier to scan, filter and sort the rates. The new design showed a CR improvement of 21% across all devices during the A/B test.
04
Scanning data easier
For many, personal finance might not be the most engaging topic. When the users' own finances is involved, it's incredibly important to be able to offer a transparent and painless user experience. Although Compricer builds its services around helping users with their personal finances, they fell flat in a few areas. Two such services were the interest rate tables for mortgages and savings accounts. Being a comparison site, Compricer did not facilitate an easy comparison for these services. Instead, users were presented with cluttered and non-intuitive pages consisting of long blocks of texts. We set out to simplify the interest rate pages with the goal of providing users with a place where they could effortlessly compare different interest rates. To achieve this, we focused primarily on making it easier to scan, filter and sort the rates. The new design showed a CR improvement of 21% across all devices during the A/B test.
Before and after of the savings interest rate page.
05
Evaluating funnels and analysing the data
When working with a high-traffic website like Compricer, it’s important to fully utilise the data and make data driven decisions. As a product designer, this mainly meant A/B testing designs and evaluating funnels and flows. For instance, we improved the car insurance flow, but the total conversion rate remained unchanged due to an old design at the final step. By looking at the funnels, we could see that the new designs improved completion on the page we redesigned, but that the drop off in the end was the same as before. This insight was important in discussions with stakeholders to advocate why improvements in the entire flow was necessary.
05
Evaluating funnels and analysing the data
When working with a high-traffic website like Compricer, it’s important to fully utilise the data and make data driven decisions. As a product designer, this mainly meant A/B testing designs and evaluating funnels and flows. For instance, we improved the car insurance flow, but the total conversion rate remained unchanged due to an old design at the final step. By looking at the funnels, we could see that the new designs improved completion on the page we redesigned, but that the drop off in the end was the same as before. This insight was important in discussions with stakeholders to advocate why improvements in the entire flow was necessary.
05
Evaluating funnels and analysing the data
When working with a high-traffic website like Compricer, it’s important to fully utilise the data and make data driven decisions. As a product designer, this mainly meant A/B testing designs and evaluating funnels and flows. For instance, we improved the car insurance flow, but the total conversion rate remained unchanged due to an old design at the final step. By looking at the funnels, we could see that the new designs improved completion on the page we redesigned, but that the drop off in the end was the same as before. This insight was important in discussions with stakeholders to advocate why improvements in the entire flow was necessary.
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, my responsibilities included building and maintaining Figma components, ensuring their compliance with WCAG 2.1 standards, and aligning them with the overall brand. This also involved creating guidelines for each component, specifying usage and any specific considerations or rules. All this was done in close communication with both developers and marketing, both early in the design phase and during the implementation of new components. My goal was to create a cohesive, efficient, and accessible design system that supported the needs of the organisation many years ahead.
07
A scaleable design system
As the design system manager, my responsibilities included building and maintaining Figma components, ensuring their compliance with WCAG 2.1 standards, and aligning them with the overall brand. This also involved creating guidelines for each component, specifying usage and any specific considerations or rules. All this was done in close communication with both developers and marketing, both early in the design phase and during the implementation of new components. My goal was to create a cohesive, efficient, and accessible design system that supported the needs of the organisation many years ahead.
07
A scaleable design system
As the design system manager, my responsibilities included building and maintaining Figma components, ensuring their compliance with WCAG 2.1 standards, and aligning them with the overall brand. This also involved creating guidelines for each component, specifying usage and any specific considerations or rules. All this was done in close communication with both developers and marketing, both early in the design phase and during the implementation of new components. My goal was to create a cohesive, efficient, and accessible design system that supported the needs of the organisation many years ahead.
Snippet of the guidelines created for Compricer's design system.
08
Moving forward
Compricer's main struggle is that they're not providing additional value to users. They lack a clear hook to retain users on their site and should focus on personalisation and automation to address this. They need to ask themselves: how can we provide long-term, additional value to our users? Imagine if the site could provide the users an overview of their current insurances and economy, followed by personalised recommendations. Automation could also be applied to the site's forms, allowing data to be fetched instead of manually entered. The lack of prioritisation may stem from a shortage of time and resources, but if Compricer wishes to maintain its position as the market's top insurance comparison site, they need to start incorporating innovation in their development.
08
Moving forward
Compricer's main struggle is that they're not providing additional value to users. They lack a clear hook to retain users on their site and should focus on personalisation and automation to address this. They need to ask themselves: how can we provide long-term, additional value to our users? Imagine if the site could provide the users an overview of their current insurances and economy, followed by personalised recommendations. Automation could also be applied to the site's forms, allowing data to be fetched instead of manually entered. The lack of prioritisation may stem from a shortage of time and resources, but if Compricer wishes to maintain its position as the market's top insurance comparison site, they need to start incorporating innovation in their development.
08
Moving forward
Compricer's main struggle is that they're not providing additional value to users. They lack a clear hook to retain users on their site and should focus on personalisation and automation to address this. They need to ask themselves: how can we provide long-term, additional value to our users? Imagine if the site could provide the users an overview of their current insurances and economy, followed by personalised recommendations. Automation could also be applied to the site's forms, allowing data to be fetched instead of manually entered. The lack of prioritisation may stem from a shortage of time and resources, but if Compricer wishes to maintain its position as the market's top insurance comparison site, they need to start incorporating innovation in their development.
Sketches from an ideation workshop on how to personalise Compricer.
