KAUS is a conceptual B2B insurance company that has covered a broad range of policies for businesses and individuals for over 30 years. Now, instead of going through brokers, they want to bring their policies online and rebrand in order to connect with a growing digital generation. They are particularly interested in promoting their bundled deals to keep prices low and provide easy solutions for customers.
• Responsive e-commerce website
• New logo
UX/UI Designer, Illustrator
80 Hours
FIgma, Illustrator, OptimalSort, Invision
• Get insights to customer needs and preferences when choosing insurance.
• Identify pain points when selecting insurance in the absence of an agent.
• Discover the most common insurance bundles out there vs. users needs.
• Identify all factors that impact the decision process for the customer.
To get an better understanding of what I was building, I began by looking into the industry and competition.
Once I had some ideas about insurance, It’s time to determine who I was designing for. I conducted user interviews with 6 people in their early to late 20s who had experience with insurance and based in the U.S. All 6 participants expressed their pain points to be hidden fees, walking away not fully understanding about their policy and experiencing horrible customer service. There was an overall negative impression tied to insurance and it was time to reframe this type of thinking.
Meet Natalie! She’s our user persona - the amalgam of our user interview participants. Referring back to my persona during the design process helps me to stay aligned with the user goals and remind me of the problems I need to solve.
If you’re interested in getting a deep dive on Natalie, you can check out her empathy map here.
Next, it was time to define how a user will interact with the product.
What belongs in the nav bar? What screens needs to be prioritized? What would make sense and be helpful
for people using the platform?
What belongs in the nav bar? What screens needs to be prioritized? What would make sense and be helpful
for people using the platform?
From the results, the insurance categories have been determined as:
Next, a feature roadmap was defined to prioritize what needs to be on the platform to be functional...
And created sitemap to help me see the breakdown of items that should exist in the global navigation bar.
In this stage, I explored the possibilities of how the user will accomplish their goal(s) using flows.
In this case, how will Natalie purchase travel insurance from our website?
See full user flow here.
I wanted to help the user seamlessly proceed to checkout with or without the bundled policy option and consider how they can get started afterwards. I approached this by including the account creation step during the checkout process so that they may log in soon after checking out to manage their policies and get the information they need.
Next, I created some sketches to create my lo-fi wireframes before digitizing them.
See full lo-fi responsive wireframes here.
Next, it was time to create a brand for KAUS as they did not have an online presence.
The goal of the brand was to build trust with the user in a friendly modern way.
After some sketching, I chose a lilypad to symbolize the support and protection a user can count on
with the company. The typeface () was chosen to add a professional touch to the logo.
Further, I created illustrations emphasizing “roundness” with the appeasing brand colors to build trust.
The UI kit brings the brand and UI together. Elements will stay true to an overall layout grid and
appear modern and friendly.
See full hi-fi responsive wireframes here.
To test these designs, I created a high fidelity prototype using InVision and conducted usability testing over recorded zoom sessions. I have recruited 7 participants between the ages 20-31 who have experience with insurance. I have prepared three scenarios for the participants to complete specific tasks. They were instructed to share their screen and “think out loud” as they navigated through the prototype.
• Test the overall quality and ease of use regarding the navigation and flow to complete a task.
• Test how users prefer to search for their insurance needs.
• Test how easily the user can obtain an insurance quote.
• Identify any areas of frustrations, hesitation or confusion (pain points).
• Observe how the website makes the users feel about the site and quote process
100% completion rate
80% error free
All participants were able to complete the tasks given by the scenarios but not without error.
To sort out the feedback from testing, I’ve created an Affinity Map shown below:
See full affinity map here.
• The UI design (colors & illustrations) was well received.
• Participants noted that the design was clean, straightforward and friendly.
• All participants expected a more detailed breakdown of the insurance.
• Some participants want to know how she qualifies for the discount and why it’s needed.
• The most common method to get a quote was through the nav drop-down menu.
• Most participants were tempted to bundle when the option was available to them.
• All participants wanted to find out more information about the policy before getting a quote.
Based on the feedback from the testing, I’ve created a prioritization matrix to define the key changes to implement for the next design iteration. With each new design iteration, I would continue to re-test until the product creates a good experience.
• What I enjoyed 😁
- Learning how to create a brand for a business and bringing my designs to life with the prototype
• My favorite moments 😊
- Brainstorm sketching (such as the low-fi wireframes, logo and illustrations)
- Having a chat with possible end users through user interviews and usability testing
• My least favorite moment 😭
- Having to document the recorded zoom sessions into a word document because it felt mundane and time consuming… but it was sure worth it!
• Room for Improvement 🤔
- Build out lo-fi wireframes quicker and get feedback sooner
- Practice presenting and don’t solely rely on notes (esp in-person presentations)
- Study the value of other methodologies from each design stage not utilized for this project
Go to the next case study: Responsive Redesign
