HSBC
HSBC
HSBC
Plan Comparison
Plan Comparison
Plan Comparison
I designed a plan comparison feature within the mobile insurance sales journey. It helps customers understand and choose from multiple insurance plan options with ease and confidence. The goal was to improve the decision-making process during plan selection and reduce user drop-off.
I designed a plan comparison feature within the mobile insurance sales journey. It helps customers understand and choose from multiple insurance plan options with ease and confidence. The goal was to improve the decision-making process during plan selection and reduce user drop-off.
I designed a plan comparison feature within the mobile insurance sales journey. It helps customers understand and choose from multiple insurance plan options with ease and confidence. The goal was to improve the decision-making process during plan selection and reduce user drop-off.
Time
Time
Time
10 weeks
10 weeks
10 weeks
Team
Team
Team
1 designer (me)
1 PM
1 Business analyst
3 Developers
1 designer (me)
1 PM
1 Business analyst
3 Developers
1 designer (me)
1 PM
1 Business analyst
3 Developers
Focus
Focus
Focus
Customer
Customer
Customer
Method
Method
Method
User research
Prototype testing
Competitive Analysis
UX & UI
User research
Prototype testing
Competitive Analysis
UX & UI
User research
Prototype testing
Competitive Analysis
UX & UI
↓9%
Drop-off rate
5+
Market applied
USD 40K+
Growth Written
Premium in 1 month
↓9%
Drop-off rate
5+
Market applied
USD 40K+
Growth Written
Premium in 1 month
↓9%
Drop-off rate
5+
Market applied
USD 40K+
Growth Written
Premium in 1 month
PROBLEM OVERVIEW
PROBLEM OVERVIEW
PROBLEM OVERVIEW
Starting from a insurance journey
Starting from a insurance journey
Starting from a insurance journey
When I was designing the travel insurance sales journey. The product itself offers several plans for customer to choose. In day 1 phase, because of limited development resources, for each plan’s detail coverage, it is presented in a very straight-forward way, showing detail coverage under a tab with a lot of text.
When I was designing the travel insurance sales journey. The product itself offers several plans for customer to choose. In day 1 phase, because of limited development resources, for each plan’s detail coverage, it is presented in a very straight-forward way, showing detail coverage under a tab with a lot of text.
When I was designing the travel insurance sales journey. The product itself offers several plans for customer to choose. In day 1 phase, because of limited development resources, for each plan’s detail coverage, it is presented in a very straight-forward way, showing detail coverage under a tab with a lot of text.
Click on this prototype to view the travel insurance flow ↓
Click on this prototype to view the travel insurance flow ↓
Interactive prototype in Figma (you can press "R" to refresh the prototype)
Interactive prototype in Figma (you can press "R" to refresh the prototype)
User problem
User problem
PROBLEM
PROBLEM
PROBLEM
Need to switch, no direct compare
Need to switch, no direct compare
Need to switch, no direct compare
Unable to spot the key differences
Unable to spot the key differences
Unable to spot the key differences
Easy to forget about the detail coverage when switching
Easy to forget about the detail coverage when switching
Easy to forget about the detail coverage when switching
Long scroll of content
Long scroll of content
Long scroll of content
Resulted in long reading time and increased cognitive load
Resulted in long reading time and increased cognitive load
Resulted in long reading time and increased cognitive load
IMPACT
IMPACT
IMPACT
☹︎
“Not able to know which plan is a best-fit for me”
“Not able to know which plan is a best-fit for me”
“Not able to know which plan is a best-fit for me”
Customer not able to have a confident decision-making process, and results in hesitation in purchase
Customer not able to have a confident decision-making process, and results in hesitation in purchase
Customer not able to have a confident decision-making process, and results in hesitation in purchase
Business problem
Business problem
Business problem
From Day 1 release, we have some data and request showing the current problem from business perspective. There are:
From Day 1 release, we have some data and request showing the current problem from business perspective. There are:
From Day 1 release, we have some data and request showing the current problem from business perspective. There are:
High drop-off rate during plan selection phase.
High drop-off rate during plan selection phase.
High drop-off rate during plan selection phase.
From business perspective, it was also planed that the design would be used for other products in multiple market, so the current design is:
From business perspective, it was also planed that the design would be used for other products in multiple market, so the current design is:
From business perspective, it was also planed that the design would be used for other products in multiple market, so the current design is:
Lack of scalability, not able to apply it for other markets with more complex products.
Lack of scalability, not able to apply it for other markets with more complex products.
Lack of scalability, not able to apply it for other markets with more complex products.
Design goal
Design goal
Design goal
To create a clear and intuitive plan comparison experience that empowers customers to confidently select the right insurance plan, while reducing drop-off at the selection stage and making it scalable and reusable for different product types.
To create a clear and intuitive plan comparison experience that empowers customers to confidently select the right insurance plan, while reducing drop-off at the selection stage and making it scalable and reusable for different product types.
To create a clear and intuitive plan comparison experience that empowers customers to confidently select the right insurance plan, while reducing drop-off at the selection stage and making it scalable and reusable for different product types.
COMPETITOR ANALYSIS
COMPETITOR ANALYSIS
COMPETITOR ANALYSIS
What is the market trend?
What is the market trend?
What is the market trend?
We started from competitor analysis, most of the competitor actually follow these two ways of comparing format:
We started from competitor analysis, most of the competitor actually follow these two ways of comparing format:
We started from competitor analysis, most of the competitor actually follow these two ways of comparing format:
Limit to 2-3 itms to compare
Limit to 2-3 itms to compare
Limit to 2-3 itms to compare
Compare all using scrollable table
Compare all using scrollable table
Compare all using scrollable table
IDEATION
IDEATION
IDEATION
Initial exploration
Initial exploration
Initial exploration
Follow the market trend I start initial exploration
Follow the market trend I start initial exploration
Follow the market trend I start initial exploration
Compare 2 plans only
Compare 2 plans only
Compare 2 plans only
Select plan from dropdown
Select plan from dropdown
Select plan from dropdown
Directly choose two plans
Directly choose two plans
Directly choose two plans
Visual and table exploration
Visual and table exploration
Visual and table exploration
Compare ALL plans
Compare ALL plans
Scrollable table with highlight card
Scrollable table with highlight card
Scrollable table with highlight card
Highlights variation
Highlights variation
Highlights variation
Tabs for highlights
Tabs for highlights
Tabs for highlights
TESTING
TESTING
TESTING
#1: How many plans would user prefer to compare?
#1: How many plans would user prefer to compare?
I ended up on these two versions to do a testing: one allowing comparison of two selected plans, and another showing all available plans.
I ended up on these two versions to do a testing: one allowing comparison of two selected plans, and another showing all available plans.
I ended up on these two versions to do a testing: one allowing comparison of two selected plans, and another showing all available plans.
Version A: Compare 2 plans
14 votes - 40%
14 votes - 40%
14 votes - 40%
Version A: Compare 2 plans
Hustle to switch back and forth
Hustle to switch back and forth
Hustle to switch back and forth
Most participants mention would compare at least 3 plans if there are 4 or more plans
Most participants mention would compare at least 3 plans if there are 4 or more plans
Most participants mention would compare at least 3 plans if there are 4 or more plans
Version B: Compare all plans
Version B: Compare all plans
Version B: Compare all plans
21 votes - 60%
21 votes - 60%
21 votes - 60%
Meet with most participants’ mental modal of comparison, having a table.
Meet with most participants’ mental modal of comparison, having a table.
Meet with most participants’ mental modal of comparison, having a table.
Most participants would like to compare all plans at once, so they can know more about each plan at once
Most participants would like to compare all plans at once, so they can know more about each plan at once
Most participants would like to compare all plans at once, so they can know more about each plan at once
#2: Which is the best way to show the details?
#2: Which is the best way to show the details?
#2: Which is the best way to show the details?
Though the design provides the highlights of plans to simplified the information, it is still needed to show the details of each coverage
Though the design provides the highlights of plans to simplified the information, it is still needed to show the details of each coverage
Though the design provides the highlights of plans to simplified the information, it is still needed to show the details of each coverage
Collapsable table
Collapsable table
Collapsable table
Version 1: compare 2 plans
Version 1: compare 2 plans
Version 1: compare 2 plans
Version 2: compare ALL plans
Version 2: compare ALL plans
Version 2: compare ALL plans
Participants prefer to view all details together
Participants prefer to view all details together
Participants prefer to view all details together
Hiding information is a red flag as most participants would think it might not showing some important term and conditions
Hiding information is a red flag as most participants would think it might not showing some important term and conditions
Hiding information is a red flag as most participants would think it might not showing some important term and conditions
Details on modal/new page
Details on modal/new page
Details on modal/new page
Version 1: compare 2 plans
Version 1: compare 2 plans
Version 1: compare 2 plans
Version 2: compare ALL plans
Version 2: compare ALL plans
Version 2: compare ALL plans
Supporting data from real customer segmentation
Supporting data from real customer segmentation
Supporting data from real customer segmentation
From testing, it shows most of participants leaning toward the design of “ Compare ALL plans”, is driving by the insight that:
From testing, it shows most of participants leaning toward the design of “ Compare ALL plans”, is driving by the insight that:
From testing, it shows most of participants leaning toward the design of “ Compare ALL plans”, is driving by the insight that:
How much customer knowing about the insurance product would affect how many plans they would like to compare.
How much customer knowing about the insurance product would affect how many plans they would like to compare.
How much customer knowing about the insurance product would affect how many plans they would like to compare.
If customer know the product well they might only compare 2 plans and some coverage they card about. If customers don’t know much about the product, they tend to compare all the plans.
If customer know the product well they might only compare 2 plans and some coverage they card about. If customers don’t know much about the product, they tend to compare all the plans.
If customer know the product well they might only compare 2 plans and some coverage they card about. If customers don’t know much about the product, they tend to compare all the plans.
This insight actually aligned with the customer data from business. Therefore our solutions is also supported by real customer segmentation.
This insight actually aligned with the customer data from business. Therefore our solutions is also supported by real customer segmentation.
This insight actually aligned with the customer data from business. Therefore our solutions is also supported by real customer segmentation.
ITERATION
ITERATION
ITERATION
Refine design through feedback
Refine design through feedback
Refine design through feedback
From the testing result, I moved forward with the “Compare ALL plans” solution. I actually got a few more feedback on this design.
From the testing result, I moved forward with the “Compare ALL plans” solution. I actually got a few more feedback on this design.
From the testing result, I moved forward with the “Compare ALL plans” solution. I actually got a few more feedback on this design.
Before
Before
Before
After
After
After
Option 1: Radio button
Option 1: Radio button
Option 1: Radio button
Option 2: button at table bottom
Option 2: button at table bottom
Option 2: button at table bottom
Option 3: sticky header with selection button
Option 3: sticky header with selection button
Option 3: sticky header with selection button
Before
Before
Before
After
After
After
ITERATION
Refine design through feedback
From the testing result, I moved forward with the “Compare ALL plans” solution. I actually got a few more feedback on this design.
FINAL SOLUTION
FINAL SOLUTION
FINAL SOLUTION
Offering plan highlights to quickly identify key differences
Offering plan highlights to quickly identify key differences
Offering plan highlights to quickly identify key differences
Plan highlights on the top to do a quick compare
Plan highlights on the top to do a quick compare
Plan highlights on the top to do a quick compare
Scrollable table with pinning feature to easy compare
Scrollable table with pinning feature to easy compare
Scrollable table with pinning feature to easy compare
Pinning allows to compare 1 plan with multiple plans
Pinning allows to compare 1 plan with multiple plans
Pinning allows to compare 1 plan with multiple plans
More information available to view
More information available to view
More information available to view
For clarity and simplicity, detailed coverage information is collapsed. If is always available to view for avoiding customer uncertainty.
For clarity and simplicity, detailed coverage information is collapsed. If is always available to view for avoiding customer uncertainty.
For clarity and simplicity, detailed coverage information is collapsed. If is always available to view for avoiding customer uncertainty.
OTHER CONSIDERATION
OTHER CONSIDERATION
OTHER CONSIDERATION
Scalability
Scalability
Scalability
From the beginning, the design considered to apply to multiple insurance products and markets. There are more variations that I created, and proved that the design is scalable and reusable for different cases.
From the beginning, the design considered to apply to multiple insurance products and markets. There are more variations that I created, and proved that the design is scalable and reusable for different cases.
From the beginning, the design considered to apply to multiple insurance products and markets. There are more variations that I created, and proved that the design is scalable and reusable for different cases.
One plan only: show one plan’s detail
One plan only: show one plan’s detail
One plan only: show one plan’s detail
Table content variations
Table content variations
Table content variations
RESULT
RESULT
RESULT
Launched in 5 markets and achieved business goal
Launched in 5 markets and achieved business goal
Launched in 5 markets and achieved business goal
This design is first launched in the Travel Insurance and Home Insurance in Malaysia and Singapore. And later would applied to HK, Australia, UK for more insurance products. For in total it will applied to 5 markets and 6 different insurance products.
First launch in Malaysia and Singapore, there was over USD40K+ Growth Written Premium in 1 month. The average drop-off rate lower by 9%.
This design is first launched in the Travel Insurance and Home Insurance in Malaysia and Singapore. And later would applied to HK, Australia, UK for more insurance products. For in total it will applied to 5 markets and 6 different insurance products.
First launch in Malaysia and Singapore, there was over USD40K+ Growth Written Premium in 1 month. The average drop-off rate lower by 9%.
This design is first launched in the Travel Insurance and Home Insurance in Malaysia and Singapore. And later would applied to HK, Australia, UK for more insurance products. For in total it will applied to 5 markets and 6 different insurance products.
First launch in Malaysia and Singapore, there was over USD40K+ Growth Written Premium in 1 month. The average drop-off rate lower by 9%.
Thank for viewing! You can reach out to me at:
janicezlx@outlook.com
