HSBC
HSBC
HSBC
Insurance Application
Insurance Application
Insurance Application
This is a tablet-based insurance application journey designed for use in bank branches by staff and customer together. The design includes the end-to end application journey that staff lead customer to fill out information required for buying insurance product. The goal was to create a reusable, cross-platform-compatible experience that reduces cognitive load, supports regulatory needs across markets, and enables both staff and customers to complete applications collaboratively and efficiently.
This is a tablet-based insurance application journey designed for use in bank branches by staff and customer together. The design includes the end-to end application journey that staff lead customer to fill out information required for buying insurance product. The goal was to create a reusable, cross-platform-compatible experience that reduces cognitive load, supports regulatory needs across markets, and enables both staff and customers to complete applications collaboratively and efficiently.
This is a tablet-based insurance application journey designed for use in bank branches by staff and customer together. The design includes the end-to end application journey that staff lead customer to fill out information required for buying insurance product. The goal was to create a reusable, cross-platform-compatible experience that reduces cognitive load, supports regulatory needs across markets, and enables both staff and customers to complete applications collaboratively and efficiently.
Time
Time
Time
12 weeks
12 weeks
12 weeks
Team
Team
Team
1 designer (me)
1 PM
2 Business analyst
5 Developers
1 designer (me)
1 PM
2 Business analyst
5 Developers
1 designer (me)
1 PM
2 Business analyst
5 Developers
Focus
Focus
Focus
Staff & customer
Staff & customer
Staff & customer
Method
Method
Method
Journey mapping
Prototype testing
UX & UI
Journey mapping
Prototype testing
UX & UI
Journey mapping
Prototype testing
UX & UI
65
NPS score
↓20%
Completion time
65
NPS score
↓20%
Completion time
65
NPS score
↓20%
Completion time
CONTEXT
CONTEXT
CONTEXT
How to buy a insurance in branch?
How to buy a insurance in branch?
How to buy a insurance in branch?
Buying insurance in branch are usually follow three steps, “ Quotation”, “Application” and “Signature and document”, and it can be totally by paper or by staff digital channel. For project, the scope focus on the application phase only, it is where staff will help customer fill out information required for buying this insurance, such as personal information, medical history and beneficiary. This project reimagined the digital channel for application.
Buying insurance in branch are usually follow three steps, “ Quotation”, “Application” and “Signature and document”, and it can be totally by paper or by staff digital channel. For project, the scope focus on the application phase only, it is where staff will help customer fill out information required for buying this insurance, such as personal information, medical history and beneficiary. This project reimagined the digital channel for application.
Buying insurance in branch are usually follow three steps, “ Quotation”, “Application” and “Signature and document”, and it can be totally by paper or by staff digital channel. For project, the scope focus on the application phase only, it is where staff will help customer fill out information required for buying this insurance, such as personal information, medical history and beneficiary. This project reimagined the digital channel for application.
PROBLEM OVERVIEW
PROBLEM OVERVIEW
PROBLEM OVERVIEW
From the old system
From the old system
From the old system
Since this is a bank branch digital journey, it is stereotypical very out-dated. The system design focused more on completion not on experience, most staffs need to take a long time to train to work on this system without any guidance from others.
Since this is a bank branch digital journey, it is stereotypical very out-dated. The system design focused more on completion not on experience, most staffs need to take a long time to train to work on this system without any guidance from others.
Since this is a bank branch digital journey, it is stereotypical very out-dated. The system design focused more on completion not on experience, most staffs need to take a long time to train to work on this system without any guidance from others.
Existing branch digital journey
Existing branch digital journey
Pain points for staff and customer
Pain points for staff and customer
Pain points for staff and customer
Low visibility
Low visibility
Staff usually asked customers questions and fill everything for them on the tablet. For customer, they do not know what staff is filling and why these information is needed.
Staff usually asked customers questions and fill everything for them on the tablet. For customer, they do not know what staff is filling and why these information is needed.
Lack of transparency
Lack of transparency
To customer everything is handle by agent and they do not know what is the expecting next step.
To customer everything is handle by agent and they do not know what is the expecting next step.
Low flexibility on navigation
Low flexibility on navigation
The current app journey is sequential and doesn’t give the user the flexibility to move or jump between steps.
The current app journey is sequential and doesn’t give the user the flexibility to move or jump between steps.
Low automation
Low automation
Data capture is all manual and doesn’t have much automation. Some data is even unnecessary.
Data capture is all manual and doesn’t have much automation. Some data is even unnecessary.
Low system stability
Low system stability
The design is a decade old and doesn’t work well on the staff tablet / touch interfaces.
The design is a decade old and doesn’t work well on the staff tablet / touch interfaces.
Business problem
Business problem
Business problem
The existing sales process across Insurance markets offer little standardization and flexibility required to drive rapid product onboarding across multiple channels (staff, agents, brokers) and products. Furthermore, scaling across markets is hindered by:
The existing sales process across Insurance markets offer little standardization and flexibility required to drive rapid product onboarding across multiple channels (staff, agents, brokers) and products. Furthermore, scaling across markets is hindered by:
The existing sales process across Insurance markets offer little standardization and flexibility required to drive rapid product onboarding across multiple channels (staff, agents, brokers) and products. Furthermore, scaling across markets is hindered by:
Increased costs due to bespoke setup across disparate systems
Limited re-use when new products are configured.
Slow time to market adversely impacting sales.
Disconnected omni-channel experience for customers.
Increased costs due to bespoke setup across disparate systems
Limited re-use when new products are configured.
Slow time to market adversely impacting sales.
Disconnected omni-channel experience for customers.
Increased costs due to bespoke setup across disparate systems
Limited re-use when new products are configured.
Slow time to market adversely impacting sales.
Disconnected omni-channel experience for customers.
Design goal
Design goal
Reduce workload and make adoption easy
Reduce workload and make adoption easy
Reduce workload and make adoption easy
Design intuitive and outcome predictable journeys and reduce cognitive load
Design intuitive and outcome predictable journeys and reduce cognitive load
Design intuitive and outcome predictable journeys and reduce cognitive load
Reusable and cross-platform compatible journey
Reusable and cross-platform compatible journey
Reusable and cross-platform compatible journey
Design a journey that could apply to multiple products and can configure based on requirements.
Design a journey that could apply to multiple products and can configure based on requirements.
Design a journey that could apply to multiple products and can configure based on requirements.
Build a journey that meets the needs of customers, staffs, business and regulatory across markets
Build a journey that meets the needs of customers, staffs, business and regulatory across markets
Build a journey that meets the needs of customers, staffs, business and regulatory across markets
Design for the best experience with flexibility and scale in mind
Design for the best experience with flexibility and scale in mind
Design for the best experience with flexibility and scale in mind
UNDERSTANDING THE BUSINESS
UNDERSTANDING THE BUSINESS
UNDERSTANDING THE BUSINESS
Auditing current process
Auditing current process
Auditing current process
Based on the existing journey, I started to do a careful review & evaluate the current solution. Therefore O found out that the application steps can be grouped by information type, and I proposed a new flow.
Based on the existing journey, I started to do a careful review & evaluate the current solution. Therefore O found out that the application steps can be grouped by information type, and I proposed a new flow.
Based on the existing journey, I started to do a careful review & evaluate the current solution. Therefore O found out that the application steps can be grouped by information type, and I proposed a new flow.
IDEATION
IDEATION
IDEATION
How to group steps ?
How to group steps ?
How to group steps ?
Based on the new application flow, I created three different way follow the flow but have different grouping.
Based on the new application flow, I created three different way follow the flow but have different grouping.
Based on the new application flow, I created three different way follow the flow but have different grouping.
Version 1
Version 1
Version 1
Stage based - side menu
Stage based - side menu
Stage based - side menu
Pro
Pro
Pro
Simple step tracker
Simple step tracker
Simple step tracker
Flexible navigation
Flexible navigation
Flexible navigation
Con
Con
Con
Too many steps for complex cases
Too many steps for complex cases
Too many steps for complex cases
Nav may break on certain cases
Nav may break on certain cases
Nav may break on certain cases
No grouping
No grouping
No grouping
Break on smaller screen
Break on smaller screen
Break on smaller screen
Version 2
Version 2
Version 2
Role based - grouped side menu
Role based - grouped side menu
Role based - grouped side menu
Pro
Pro
Pro
Show current status
Show current status
Show current status
Flexible navigation
Flexible navigation
Flexible navigation
Clear indication on owner
Clear indication on owner
Clear indication on owner
Con
Con
Con
Only work for basic use cases
Only work for basic use cases
Only work for basic use cases
Nav might break on certain cases
Nav might break on certain cases
Nav might break on certain cases
Some steps can not be defined under a role
Some steps can not be defined under a role
Some steps can not be defined under a role
Might break for smaller screens
Might break for smaller screens
Might break for smaller screens
Version 3
Version 3
Version 3
Action based - hub & spoke
Action based - hub & spoke
Action based - hub & spoke
Pro
Pro
Pro
Works for all use cases
Works for all use cases
Works for all use cases
Focused detail page
Focused detail page
Focused detail page
Flexible navigation
Flexible navigation
Flexible navigation
Con
Con
Con
Might require some learning
Might require some learning
Might require some learning
Need to go to the hub page to jump multiple steps
Need to go to the hub page to jump multiple steps
Need to go to the hub page to jump multiple steps
In the end, I chose the version 3 to move forward because it has the most potential to scale up and being flexible for different cases.
In the end, I chose the version 3 to move forward because it has the most potential to scale up and being flexible for different cases.
In the end, I chose the version 3 to move forward because it has the most potential to scale up and being flexible for different cases.
DEEP DIVE
DEEP DIVE
DEEP DIVE
Mapping out the content
Mapping out the content
Mapping out the content
After deciding on the overall navigation, it is time to learn about the real business requirements and content.
After deciding on the overall navigation, it is time to learn about the real business requirements and content.
After deciding on the overall navigation, it is time to learn about the real business requirements and content.
Low-fi: the overall flow
Low-fi: the overall flow
Low-fi: the overall flow
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.
ITERATION
ITERATION
ITERATION
Re-imagine the navigation
Re-imagine the navigation
Re-imagine the navigation
One of the key challenge in this project is how user navigate through the steps and between hub and detail page. The first thing that I confirmed is the navigation part for the detail page
One of the key challenge in this project is how user navigate through the steps and between hub and detail page. The first thing that I confirmed is the navigation part for the detail page
One of the key challenge in this project is how user navigate through the steps and between hub and detail page. The first thing that I confirmed is the navigation part for the detail page
#1: How to navigate between steps
#1: How to navigate between steps
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
Navigation on secondary detail page
Enable to move directly to the next step or previous step
Avoid moving back and forth between hub and detail page
Enable to save and back to hub
Solve the staff problem that customers might not have all information ready, so allow to move on to other steps and meanwhile save the information filled.
#2: How to show the current step
#2: How to show the current step
Version 1
Version 1
Version 1
Expand step tracker
Expand step tracker
Expand step tracker
On hub page
On hub page
On hub page
On detail page
On detail page
On detail page
Version 2
Version 2
Version 2
Expand step tracker
Expand step tracker
Expand step tracker
On hub page
On hub page
On hub page
On detail page
On detail page
On detail page
Final design
Final design
Final design
Hub page
Hub page
Hub page
Detail page
Detail page
Detail page
FINAL SOLUTION
FINAL SOLUTION
FINAL SOLUTION
Step by step guided flow with flexibility in navigation
Step by step guided flow with flexibility in navigation
Step by step guided flow with flexibility in navigation
One of the key challenge in this project is how user navigate through the steps and between hub and detail page. The first thing that I confirmed is the navigation part for the detail page
One of the key challenge in this project is how user navigate through the steps and between hub and detail page. The first thing that I confirmed is the navigation part for the detail page
One of the key challenge in this project is how user navigate through the steps and between hub and detail page. The first thing that I confirmed is the navigation part for the detail page
Automation in filling and saving
Automation in filling and saving
Automation in filling and saving
System links to the CRM system to auto-filled existing customer information, and also auto-save while filling.
System links to the CRM system to auto-filled existing customer information, and also auto-save while filling.
System links to the CRM system to auto-filled existing customer information, and also auto-save while filling.
Reusable and scalable design
Reusable and scalable design
Reusable and scalable design
The overall design is very scalable in terms of fitting for more complex cases involving more steps. From component level, the design of hub card covers different cases and can be reuse for other new cases in the future.
The overall design is very scalable in terms of fitting for more complex cases involving more steps. From component level, the design of hub card covers different cases and can be reuse for other new cases in the future.
The overall design is very scalable in terms of fitting for more complex cases involving more steps. From component level, the design of hub card covers different cases and can be reuse for other new cases in the future.
RESULT
RESULT
RESULT
Launched in 2 markets and applied to 3 products
Launched in 2 markets and applied to 3 products
Launched in 2 markets and applied to 3 products
This design is first launched for Saving Plan and Linked-Investment Plan in Macau and Hong Kong. This project collected NPS score from staff, and got pretty high overall score, over 90% staff put a NPS score of 8 or above. The completion time before is about 30 mins, for the new design, it is usually around 20 mins, decreased about 20% of the time to complete application.
This design is first launched for Saving Plan and Linked-Investment Plan in Macau and Hong Kong. This project collected NPS score from staff, and got pretty high overall score, over 90% staff put a NPS score of 8 or above. The completion time before is about 30 mins, for the new design, it is usually around 20 mins, decreased about 20% of the time to complete application.
This design is first launched for Saving Plan and Linked-Investment Plan in Macau and Hong Kong. This project collected NPS score from staff, and got pretty high overall score, over 90% staff put a NPS score of 8 or above. The completion time before is about 30 mins, for the new design, it is usually around 20 mins, decreased about 20% of the time to complete application.
Thank for viewing! You can reach out to me at:
janicezlx@outlook.com
