Zooming in, I originally intended to allow the user to "Explore Products" in case they preferred browsing in favor of using the recommendation tool.
Later on, I changed it to a simple "Insurance" drop down (navigation bar) that lets the user go directly to the type of insurance they're interested in.
Empathize - Research
Goals:
-
Identify pain points and unmet needs in the current user experience of buying insurance
-
Determine what users like and dislike about purchasing insurance online
-
Understand how competing companies sell their insurance policies and identify areas of opportunity
Competitive Analysis
Key takeaways:
1) Lack of live support from competing companies. Buying insurance is an intimidating purchase, so I was surprised to see the lack of live support that online shoppers are used to.
2) A lot of personal information must be given up in order to give customers a quote. In this digital age, younger generations like gen Z have witnessed countless privacy breaches, they are more cautious about giving personal information. I saw this as an opportunity to change the model. Instead of getting so much personal information upfront, I could ask for it towards the end of the questionnaire.
3) If insurance bundles were offered, they weren’t customizable to the customer’s specific needs, which often means bundling a plan that isn’t needed. Generally, the industry seemed to lack a simple, fast way to get a quote and easily compare bundles.
Introduction
Originally a B2B business for the past 30 years, KAUS is looking to become a B2C corporation by offering simplified insurance bundles online and regain market share. Younger insurance buyers are familiar with online shopping and are thus more inclined to buy insurance online. KAUS is seeking to modernize their insurance selling experience and appeal to younger customers who are easily overwhelmed buying insurance online, especially first-time buyers.
Problem
How might we simplify the confusing experience of purchasing insurance bundles online that meets the customer’s specific needs?
Goals
-
Create an online website for KAUS that offers insurance bundles, is easy to understand, and appeals to the younger demographic.
-
Modernize logo and branding
Creating a website for a B2B insurance company to become B2C and appeal to Millennials and Gen Z purchasing insurance online.
TIMELINE
Dec. 2022 - Jan. 2023
PLATFORM
Responsive Website
MY ROLE
UX Designer
UX Researcher
Empathy map
Findings:
1) Users are overwhelmed and confused when buying insurance, especially first-time buyers.
2) Most people research insurance online and compare different plans before purchasing.
3) Users value simplicity, transparency, convenience, and tailored bundles
4) Users want better customer support and a simpler comparison tool.
User Interviews
Number of participants: 5
Ages: 23-42
User interviews were conducted via Google Meet for a week to understand what the current insurance buyers' needs, motivations, and frustrations are.
Some of the questions that I asked were:
-
How can the insurance website be more accessible to you? What features should it have?
-
How do you feel about your current plan(s)?
-
What do you consider important when looking for insurance?
-
Can you walk me though how you went about selecting your insurance plan?
"When you're online shopping, it's fun! But insurance is such a headache. It's always confusing and there's too much to look at. It's like a chore. I wish someone could do it for me."
Feature Roadmap
I created a feature roadmap to incorporate what I learned from my research such as an AI-powered recommendation tool and live chat support. One interview I conducted expressed interest in having a "fun shopping experience" so I used that lens to see what other features to add.
Originally, I wanted the website to have both a recommendation tool and page for tutorial walkthroughs that explained the basic terminology of insurance while describing how it relates to the target audience. However, the further I got into the project, I realized that including an educational component to the website would have exceeded the scope of this project. The main focus is the new AI-powered recommendation tool.
Define - Project Goals
Before we get into the methods that helped me with the information architecture, I first had to define the business and user goals with technical considerations.
Key Goals:
-
Simple, easy-to-use-and-understand experience similar to online shopping
-
Recommendation Tool
-
Responsive design for desktop and mobile since younger generations do a lot of their online shopping via mobile devices
Ideate - Task and User Flows
A task flow analyzed the user's interaction with the website upon starting on the landing page and traced how they would proceed to complete one task. In this case, I outlined how the user could find an insurance bundle that suits their specific needs.
Beginning with the landing page, the users have two options: explore products or get a quote. This helped divide users who have no knowledge in insurance from those that already knew what they wanted to buy.
Sitemap
A sitemap helped determine the structure of the website's content while establishing logical navigational patterns.
Starting on the home page, the users are presented with three options: browse insurance plans (ie: auto, renter's, etc.), explore products (recommendation tool, create a bundle), or get a quote.
I also made sure that there was a "Help" option in the navigation (later titled "Contact Us" since the research revealed that all users wanted a clear, direct way of getting support.
User Persona
A user persona was created to detail a user's needs, pains, motivations, and goals. Aashi represents a multi-cultural gen Z-er who has bigger aspirations than living the 9-5 life. Thus, she prioritizes her time and creativity. The proposed solution (with the AI-powered recommendation tool) below hopes to help her get an insurance bundle that covers everything she needs while respecting her time.
Lo-Fidelity Wireframes
Below are annotated wireframes outlining my thought process of what the user would be presented with on the homepage and at the recommendations page. Of note, on the homepage the user would immediately see an image that leads their eyes to the "Let's Go" button taking them to the questionnaire that will inform the recommendation tool. "Let's Go" was later revised to "Get Started" for clarity. Of the three recommended bundles, one would be a "Staff Pick" (later revised to "Our Choice") to highlight the top choice. The "Search" changed to a "Glossary" bar in order for users to look up unknown terms.
Prototype - Moodboard and Logo
Pastel teal, yellow, and purple were chosen for their calming and welcoming effect while reflecting the brand's values of trust and simplicity
In addition to the alliteration between KAUS and kangaroo, much like Geico, an animal was used as a memorable mascot.
Brand Style Guide
A brand style guide helped establish the user's first impression of the company and maintain a consistent "mood". I wanted the user to feel playful since buying insurance is usually a tedious task. Sans serif fonts were chosen for their easy readability. Children books generally use sans serif fonts since they have a friendly and approachable feeling.
UI Kit
The UI kit helped to determine the website's elements and style, matching the brand identity from above, to give the user a consistent experience. Royal blue was used to accent clickable links.
UI Design Highlights
I highlighted the features that are part of the solution in resolving our problem of simplifying the experience of selecting and purchasing insurance bundles online. There's a "Top Choice" that is in the center and has drop shadows with a yellow banner to set it apart from the other bundles. Below the navigation bar, there's a progress bar and an "Insurance Details" fold down that allows users to see their information and make quick edits.
On the homepage, there's a glossary in the navigation bar that gives the user a quick way to look up a term they don't understand and see it used in context.
Underneath, the "Get Started" is accompanied by the "View Demo" button to allow users to understand what to expect when using the AI-powered recommendation tool.
Lastly, there's a live chat that pops up every five minutes of inactivity to provide users real-time support.
UI Design Highlights - Responsive Hi-Fidelity Wireframes
The design looks very similar across different viewports, however, the bundles page differs slightly with a hamburger menu on mobile screens instead of a navigational bar and a carousel for the bundles.
Test - Usability Testing
Once UI was finished, it was time to put the design to the test and observe how users reacted to the product, how they navigated, what were their frustrations/points of confusion, and identify areas of improvement.
Number of participants: 5
Ages: 20 - 30
Background: Little to zero experience buying insurance or seeking to buy multiple plans
All testing was conducted online via Google Meet.
Some of the questions that I asked were:
-
Are the questions easy to answer? Is the wording/selection(s) confusing?
-
At what point(s) of selecting insurance needs clarification or support?
-
On a scale of 1-5 with 5 being extremely difficult, how would you rate your experience selecting an insurance bundle?
Usability Testing Findings
In general, there were some minor edits to be made regarding the wording of a few CTAs, the design of the "Our Choice" bundle, and the functionality of the "Choose Bundle" button since some users expected to see the whole insurance bundle in detail while others expected to go to the checkout. The findings were summarized in the following affinity map.
Affinity Map
What I Learned
1. Let go of all assumptions:
There were a number of things I thought was obvious and assumed was easy for the user to understand, but ran counter to their expectations ie: "Choose Bundle" button.
2. Define the problem and scope the project:
Especially building a design from scratch, it's easy to get lost in the weeds and add features just because it seems useful or could be of use in the future for some forecasted problem. And while it's important to consider next steps on how to improve the functionality of a design, for MVPs, it's crucial to keep the project as simple as possible while providing real value to the user.
3. UX design/research is REALLY difficult, but so worth it:
From this case study, I learned the basics of UX design. I learned how to implement responsive design and understand how accessibility across different platforms affects UX. I also learned how to analyze competitor websites and ideate on areas of improvement. I had to really question what I was doing and why at every step. I saw how much intentionality is required for good design and how long the path to becoming a good designer is. Most importantly, as cheesy as it sounds, I realized the power UX design yields in creating a better, more inclusive world by bringing more accessible products to life. I'll keep working hard to become a UX designer! 💪
Next Steps
1. Make adjustments
Implement wording and design adjustments from user feedback. This includes replacing confusing icons and clarifying wording.
2. Add tutorials/video walkthroughs
Further expand the website's accessibility to nervous, first-time buyers who need more information before choosing an AI-recommended plan with educational videos. Users need more education to inform their decisions. They want to fully understand the details of their insurance plan(s). After the interviews concluded, a number of users stated that they prefer video explanations over reading articles or looking up unknown terms. Thus, the glossary will change into a search bar to serve as a quick way to look up videos.
3. Higher fidelity prototype
Prototype in InVision to test other interactions like the pop-up live chat box.
4. Test
With the edits, conduct more usability tests and gather feedback for further improvements.
Solution
After synthesizing the research, I came up with a solution with four elements to the problem of simplifying buying insurance bundles online:
1) Recommendation tool: In order to reduce decision fatigue and the paralysis of comparing multiple plans from various insurance websites, an AI-powered algorithm will give customers only three recommendations to choose from based on their needs from the questionnaire and the plans others, who have similar needs, chose.
2) Live chat: Live customer support that allowed younger users to chat directly to their local agent.
3) Customizable bundles: Customers can add/remove plans as they wish, only including what the customer needs and nothing more.
4) Fold down: Not only for quick viewing of insurance details, but also a way to get back to a specific part of the questionnaire to make corrections/changes.
I created a user flow to outline the user's interaction with the website starting on the landing page. Expanding on the task flow above, I added the option to "Learn" via "Tutorial videos" if the user needed some guidance while browsing. For those who knew exactly what they needed, they could go directly to the quote with "Get a Quote" and fill in their details. Before the checkout page in all scenarios, users would be given the option to speak/chat with their local agent for any unanswered questions or concerns.
Based on user research, I originally wanted to delay having the user create an account and give their personal information at the beginning of the questionnaire, like most insurance companies do. However, upon further research, I realized that personal information (specifically, email address) is required for the "Save my Quote" feature and affects the quote's total price (including discounts).
During the interviews, four users stated that they wanted to see more details on the bundles page as well as the exact details of their chosen policy. However, they also liked how clean and simple the bundles page was. In addition, the majority of users were confused by the functionality of the "Choose Bundle" button, expecting it to take them to a page that detailed their bundle, not the checkout page. Just like reviewing what's in your cart, the users I interviewed wanted an itemized breakdown of their (bundle) purchase. To maintain simplicity and clarify the "Choose Bundle" button, I added a modal before my fifth (and final) interview that displayed the details of their chosen bundle while giving users the option to download a pdf version of their bundle(s) and accompanying policies. From the modal, the user can checkout and purchase their insurance bundle.
UI Design Changes
There were a number of changes I made that were different from the original wireframes, including the: price toggle, select bundle radio button, pop-out information icon, and payment CTA.
I combined the "Select Bundle" with the "Pay Now" button into one "Choose Bundle" button. I also got rid of the customer reviews to simplify this page. "Save My Quote" changed from a link to a button.
The checkout was originally separate from the summary page. I combined the two by creating the "View PDF" link, users could click in to see a detailed printout of their selected bundle.
In addition, the layout of the checkout page changed to look similar to that of Amazon's. This helped user's recognition (over recall) and is consistent with the "fun online shopping" experience the website hopes to achieve.