Revamping
FWD insurance
e-commerce website
My role
Lead UIUX Designer
- User research
- Competitor analysis
- Wireflow
- UI/UX design
- Usability testing
The team
Working with local business team, compliance team, 1 project manager, 2 designers and developers
Platform
Web (Mobile, PC)
Background
FWD insurance is a young and fast growing company in the insurance industry, aiming to cater to the young generation by becoming a digital first platform. Towards this goal, there has been a sustained rebranding effort being carried out across the company. It opens up an opportunity for us to improve the FWD's Hong Kong e-commerce website, where customers visit to understand our products as well as purchase them online.
​
Due to the tight deadline for the project, 3 UIUX designers are working together on this project, with me leading the initiative.
Problem in current design
The design of the current website is quite old-fashioned and text heavy. It's not very intuitive when customers want to quickly understand our various products and find what they need.
Business team also showed us the data and the drop-off rate is very high on each stage in the process. The new design should aim to improve that.
Old website design screenshots
Goal
After discussing with the stakeholders, we aligned our vision of this project.
Redesign a platform that:
-
Effectively increase conversion rate
-
Customers can intuitively browse, learn and purchase insurance products
-
Apply new branding design guideline
Process
The following framework was used to guide us through the project. First, we researched the market and understood the project background, then built user profiles and use cases. The insights from this research was used to create the experience. The mobile design was created first, then was expanded to desktop.
Framework of the project
Competitor Analysis
We analysed our competitors websites including established insurance companies such as AIA, and new virtual insurance such as Bowtie, Za. A few points that made the most difference to an online insurance purchasing experience were:​
-
Simple to understand products
-
Quick application process with guidance
-
Being transparent - no hidden terms/fees
Screenshots from Bowtie, Asurionhome and AXA
User Interview
In total, 9 people were interviewed with questions regarding their experience of purchasing insurance. It helped us understand what are the most important criteria that a potential customer considers, and how we can emulate and create a platform that encourages people to purchase online.
​We found out 3 key insights from the interview:
1.
People trust their agents. We need to build that trust online
2.
Important aspects for the website: Credibility, Simple & Fast, Personalised
3.
Incentives eg. special discounts encourage people to buy online
Persona
After the user interviews, we summarised and narrowed down our findings to 2 main groups of users. We’ll call these 2 persona “Jenny” and “Marcus”. Jenny is a young professional who needs more guidance about insurance. Marcus is a new father who is looking for a plan for his family.
With these profiles in mind, we brainstormed our persona's key tasks when using our product, and then prioritised them by red routes exercise. It helped us to focus on the most critical user tasks during our design.
-
Find product information (coverage, price etc.)
-
Learn the types of plans or protection
-
To find out the right coverage and plans
-
Spend less time in the application process
-
Be able to make decisions easier
-
Find personalised plans
-
Be able to change plans in a flexible way
Most important tasks and goals:
Ideation
We started sketching the key pages, such as home page, product listing, product page and application flow for a policy. With 3 designers working together, we adapted a fast sketching exercise - each of us sketching one design for each screen in 1 min. Then we discussed and decided on the final layout. It's an easy and efficient method that helps us to communicate ideas and make decision on the spot.
Left: Brainstorming on key pages (home page, product list, product page)
Right: Sketching the application flow of buying insurance
Lost focus in UI design
After we discussed and agreed to the wireframe and basic flows, we jumped into the hi-fi prototype using the new branding style guide immediately. The first prototype was built. When we tested it internally, we realised it was not ready.
We were in a hurry and had focused too much effort on creating individual screens, but the intuitiveness of the journey was lost. I learnt that if there are a few designers working on the same project, someone needs to keep an eye on the big picture to make sure the completeness of the whole experience.
​
The design is very confusing and obviously cannot help users to find what they want. We need to figure out the proper user flows before jumping into UI designs.
Scenarios and User needs
Therefore, I initiated to use these 3 scenarios to run through our prototype. Based on their different needs, the design has to help them complete their tasks on our website.
I don’t know what I want
- need some guidance
- need education about insurance
I want to buy Health insurance, but don’t know which one is for me
- want to compare the plans
- want to see if the benefit fits me
I want to buy CANsurance plan
- want to see how much it cost for me
- want to see the benefits
Back to the basic
A good old wireflow saves the day. I created low-fi wireframes and make it an interactive prototype. We used it to run through all 3 scenarios above, it was so much more clear compared to before and all the tasks could be completed. Using wireflow was definitely an effective way to communicate with the team and stakeholders, and most importantly, to get approval.
Low-fi wireframes
Interface Design
We restarted on the interface design. The new rebranding guideline is adapted on the UI design to create a consistent experience. But the branding didn't include all elements that we need eg. promotional countdown, we created those UI elements based on the overall style guide.
We turned the insights from user interviews into design. Here are the 3 key points we addressed:
1. Trust and credibility
To build trust like an insurance agent, we added a few details that helps increase credibility of our brand. For example, we show awards and testimonials from real customers on home page. Along the application flow, customer can always get help from us through live chat.
2. Simple & Fast application process
We offer fast and clear quick quote function for customers to know if the plan fits their budget. Comparing to our competitors, most of them requires customer to read a lot of information and provide their details before getting a quote.
​
For the application process, we segmented the information into easily digestible format. For example, declaration used to be very discouraging. We made it much easier to understand with categories and simpler copy. We also reduced the whole process into 3 main steps. A lot of small improvements were made along the process.
OCR function
Another example is that user can scan their HKID card to fill in some fields in personal details page. We also added more tooltips to help user understand the steps or reason behind. Live chat on the navigation bar also helps user whenever they have any questions.
3. Incentive
Increasing conversion rate is the key to success in this project. Incentive is the biggest reason for user to choose online purchase instead of through agent.
“
If it's cheaper to buy online, then i will consider buying it online instead of from agent.
- from user interview
Marketing components play an important role in encouraging purchase. Here are some examples of how the promotions applied.
Usability Testing
We tested with 2 internal employees so far. The purchasing journey is overall easy to understand and they both completed the task. There are some comments and expectation differences from users that help us to iterate the design. Our target is to interview 5 more users and get more concrete feedback.
Impact
The time taken for the application process is greatly reduced. However, since I left the company before it's launched, there is no data about the actual impact I could reference on. I do believe our design can improve significantly on the drop-off rate and convension rate.
Lesson Learnt
This project is the first project I took led on and It was not as easy as I thought it would be. There are a lot of improvements and exploration I wish to do, but I am limited in both time and resource. There needs to be delicate balance to be maintained between focusing on fine tuning each UI screen or improving the UX as a whole. Hence, it has been a very good learning for me in prioritising my work and conquering them one by one.
Another challenge is how to apply the branding guideline in the e-commerce context. With limited colours and patterns allowed to use, it's not easy to create the 'wow' effect of promotional signals. Instead, I used shapes and icons to make it stand out.