HSBC
HSBC
HSBC
Sales Journey Template
Sales Journey Template
Sales Journey Template
A reusable and scalable sales template for mobile insurance sales journeys, built to unify the design across various insurance products that have similar flows. The goal was to reduce design and development redundancy by creating a componentized system in Figma that supports easy configuration based on product-specific needs. The template includes well-documented variations, interactions, and product applicability. By enabling faster implementation and improved consistency, it became a building block for designers and developers, contributing to a development cost savings of 2 million.
A reusable and scalable sales template for mobile insurance sales journeys, built to unify the design across various insurance products that have similar flows. The goal was to reduce design and development redundancy by creating a componentized system in Figma that supports easy configuration based on product-specific needs. The template includes well-documented variations, interactions, and product applicability. By enabling faster implementation and improved consistency, it became a building block for designers and developers, contributing to a development cost savings of 2 million.
A reusable and scalable sales template for mobile insurance sales journeys, built to unify the design across various insurance products that have similar flows. The goal was to reduce design and development redundancy by creating a componentized system in Figma that supports easy configuration based on product-specific needs. The template includes well-documented variations, interactions, and product applicability. By enabling faster implementation and improved consistency, it became a building block for designers and developers, contributing to a development cost savings of 2 million.
Time
Time
Time
4 months
4 months
4 months
Team
Team
Team
3 designer
1 PM
2 Business analyst
4 Developers
3 designer
1 PM
2 Business analyst
4 Developers
3 designer
1 PM
2 Business analyst
4 Developers
Focus
Focus
Focus
Design components
System design
Design components
System design
Design components
System design
Method
Method
Method
User research
Prototype testing
UX & UI
User research
Prototype testing
UX & UI
User research
Prototype testing
UX & UI
6
Markets
10+
Insurance products
$2M
Cost saving
6
Markets
10+
Insurance products
$2M
Cost saving
6
Markets
10+
Insurance products
$2M
Cost saving
CHALLENGE
CHALLENGE
CHALLENGE
Similar flow, but different design
Similar flow, but different design
Similar flow, but different design
In the world of insurance, most of insurance products shared highly similar user flows, but current website journey each journey was being designed and built from scratch—resulting in duplicated effort, inconsistent user experiences, and high maintenance costs.
In the world of insurance, most of insurance products shared highly similar user flows, but current website journey each journey was being designed and built from scratch—resulting in duplicated effort, inconsistent user experiences, and high maintenance costs.
In the world of insurance, most of insurance products shared highly similar user flows, but current website journey each journey was being designed and built from scratch—resulting in duplicated effort, inconsistent user experiences, and high maintenance costs.
Existing web insurance journey
Existing web insurance journey
Existing web insurance journey
Travel Insurance
Travel Insurance
Travel Insurance
Critical Illness
Critical Illness
Critical Illness
Home Insurance
Home Insurance
Home Insurance
PROPOSAL
PROPOSAL
PROPOSAL
A unified template summarized from all products
A unified template summarized from all products
A unified template summarized from all products
Started from analyzing current insurance products journey, it started from the contetng and flow first
Started from analyzing current insurance products journey, it started from the contetng and flow first
Started from analyzing current insurance products journey, it started from the contetng and flow first
Design goal
Design goal
Design goal
To have a unified template to support faster delivery, reduce costs, and ensure design consistency across markets and products
To have a unified template to support faster delivery, reduce costs, and ensure design consistency across markets and products
To have a unified template to support faster delivery, reduce costs, and ensure design consistency across markets and products
Testing
Testing
Testing
Started from some specific products, the first thing I need to design and validate is about the flow. So I did testing of the overall structure based on Term Life Insurance. Therefore decided the structure steps of the sales journey, and made sure it could apply to every insurance.
Started from some specific products, the first thing I need to design and validate is about the flow. So I did testing of the overall structure based on Term Life Insurance. Therefore decided the structure steps of the sales journey, and made sure it could apply to every insurance.
Started from some specific products, the first thing I need to design and validate is about the flow. So I did testing of the overall structure based on Term Life Insurance. Therefore decided the structure steps of the sales journey, and made sure it could apply to every insurance.
Template flow
Template flow
Template flow
After testing, some changes made. Here is the overall flow of a generalized sales journey.
After testing, some changes made. Here is the overall flow of a generalized sales journey.
After testing, some changes made. Here is the overall flow of a generalized sales journey.
PROCESS
PROCESS
PROCESS
Building the building block
Building the building block
Building the building block
After confirming the design, I started to build the template in Figma. First most of insurance sales journey can be define by 4 steps. In each step, there are sub-steps. For the template, each sub-step is being numbered. If dive deeper, each page of a sub step is being divided by component groups. We have the detailed numbering for each component and it’s vairaiont
After confirming the design, I started to build the template in Figma. First most of insurance sales journey can be define by 4 steps. In each step, there are sub-steps. For the template, each sub-step is being numbered. If dive deeper, each page of a sub step is being divided by component groups. We have the detailed numbering for each component and it’s vairaiont
After confirming the design, I started to build the template in Figma. First most of insurance sales journey can be define by 4 steps. In each step, there are sub-steps. For the template, each sub-step is being numbered. If dive deeper, each page of a sub step is being divided by component groups. We have the detailed numbering for each component and it’s vairaiont
Taking “ Plan creation” as an example
Taking “ Plan creation” as an example
Taking “ Plan creation” as an example
Figma file
Figma file
Figma file
Numbered sub-step
Sub-step and product applicability
Sub-step and product applicability
Sub-step and product applicability
Taking “ PC06 Your Premium” as an example
Taking “ PC06 Your Premium” as an example
Taking “ PC06 Your Premium” as an example
FINAL SOLUTION
FINAL SOLUTION
FINAL SOLUTION
The “lego piece” that makes building journey easy
The “lego piece” that makes building journey easy
The “lego piece” that makes building journey easy
For all 4 steps of the insurance journey, in the end, 58 main components and 100+ sub-components were created and numbered.
For all 4 steps of the insurance journey, in the end, 58 main components and 100+ sub-components were created and numbered.
For all 4 steps of the insurance journey, in the end, 58 main components and 100+ sub-components were created and numbered.
FUTURE CONSIDERATION
FUTURE CONSIDERATION
FUTURE CONSIDERATION
Scaling and maintenance
Scaling and maintenance
Scaling and maintenance
As the template is being used for more products and markets, it often required updates, changes and scaling. Now what we do it to log changes carefully, and also showing the changes reasoning, date and who was the owner.
As the template is being used for more products and markets, it often required updates, changes and scaling. Now what we do it to log changes carefully, and also showing the changes reasoning, date and who was the owner.
As the template is being used for more products and markets, it often required updates, changes and scaling. Now what we do it to log changes carefully, and also showing the changes reasoning, date and who was the owner.
Change log for maintainance
Change log for maintainance
Scaling to web components
Scaling to web components
IMPACT
IMPACT
IMPACT
Save cost, ensure consistency and improve efficiency
Save cost, ensure consistency and improve efficiency
Save cost, ensure consistency and improve efficiency
This template has now being used for over 10 products in 6 markets, and have saved development cost for $2M . This template also got very possible feedback from developers and designers.
This template has now being used for over 10 products in 6 markets, and have saved development cost for $2M . This template also got very possible feedback from developers and designers.
This template has now being used for over 10 products in 6 markets, and have saved development cost for $2M . This template also got very possible feedback from developers and designers.
Thank for viewing! You can reach out to me at:
janicezlx@outlook.com
