Designing a responsive e-commerce website for an insurance company looking to expand its services online.

Overview

KAUS insurance has covered a wide range of policies through brokers for over 30 years. They now want to rebrand and make their policies accessible to a growing digital generation. They aim to extend their services online and promote their bundled deals to keep prices low while providing easy solutions for their customers.

The Challenge

KAUS insurance offers a wide range of products which poses the challenge of sorting them into their respective on top of understanding what bundles make the most sense. The website must cater to those who bundle and those who chose not to. Furthermore, the quote process must be executed in a way that users understand what they are signing up for while ensuring success even after checkout.

Solutions

• Implement a scheduling and reminder system
• Recommend daily mindfulness reminders to meditate
• Create a mindful product that puts users at ease upon use

  • Make a responsive e-commerce website for easy access
  • Create a smooth and easy checkout process
  • Design an appealing brand to the target users

Role

UX/UI Designer
Illustrator

Duration

80 Hours

Scope

Responsive Website
Visual Design
Branding

Tools

Figma
Illustrator
Optimal Sort
InVision
Pen & Paper

Process

Button that scrolls to Empathize PhaseButton that scrolls to Define PhaseButton that scrolls to Ideate PhaseButton that scrolls to Prototype PhaseButton that scrolls to Test Phase
Empathize Phase
Define Phase
Ideate Phase
Prototype Phase
Test Phase

Research

Before jumping straight into a solution, it is crucial to understand nature of the problem by gathering data through market research and empathizing with our target demographic. The scope will include desk research on insurance industries, an analysis on KAUS’ competitors and a deep dive into the needs and desires of the end-users.

The research goals include:

  • Getting insights to customer needs and preferences when choosing insurance
  • Identifying pain points when selecting insurance in the absence of an agent
  • Discovering the most common insurance bundles out there vs. user needs
  • Identifying all factors that impact the decision process for the customer

Methodology:

  • Market Research
  • Competitive Analysis
  • User Interviews

Secondary Research

Market Research was carried out to gain insights of the target markets of insurance companies offering their services online and to uncover trends and opportunities within the market.

About Insurance

  • The most common types of insurance are auto, property/ casuality, commercial and life/annuity insurance.
  • The main indicators of how customers choose an insurance provider revolved around the discoverability of the provider, word of mouth and how quickly they can be serviced insurance; Medical apps gain value through remote approaches.

The Market Landscape

  • Majority of IT are maintaining legacy systems as budgets starts to shift away from advanced functionality to enable more flexible, customized products and enhance customer experience.
  • How well insurers overcome the integrating innovative technology, talent, and business models into change-resistant legacy environments may be the biggest success factor in the industry.

Consumer Demographics

  • Younger generations like gen Y and Z will expect a streamlined process and a high-tech, efficient user experience. In contrast, Baby Boomers prefer a face to face transaction when purchasing insurance. Gen X are more familiar working with an insurance broker but are open to digital means.
  • Insurers should be upgrading not only their technology systems and operating models but also focus on talent capabilities and workplace policies to resolve an expected exodus in baby boomers and a widening digital gap skills.

Primary Research

User Interviews

User Interview participants with the below criteria were recruited online for user interviews:

  • 6 survey participants were interviewed
  • 3 Females and 3 Males
  • Age in their early to late 20s
  • Are currently insured by one or more policies

All participants held a negative impression of insurance and admiitted that they don’t make the most out of their policies:

“Insurance is such an overwhelming concept."
"Customer service was so horrible."
“I want full disclosure about what I'm getting."
Define Phase

Turning Data into Insights

It was now time to condense our research data with empathy to understand the end-user’s common goals, needs and behaviors.

Persona

Hello Natalie! She is the amalgam of the user interview participants. Natalie will guide us through the design process so our decisions along the way are aligned with the end-user’s goals and tackles the problems that need to be solved.

The Problem

Although understanding Natalie’s goals and needs is important, turning them into actionable problems statements is a crucial step to creating the right solutions for her needs:

“Natalie wants wants affordable insurance that fits her needs."
“Natalie wants wants to know exactly what she's paying for."
“How might we help Natalie get the insurance she needs and know that she is in good hands?”

Now that our problem statement has been defined, it was time to determine the requirements.

Defining the Requirements

Starting with the pieces

During research, I have accumulated a list of common insurance policies and asked 7 participants to do an unmoderated open card sorting exercise online. In other words, each participant was asked to sort out all the insurance from the list provided and give each category a name that made the most sense to them.

Based on the results, the categories have been determined as:

Determining the Features

To ensure that the product not only makes consumers happy but continues as a sustainable business, I made sure to identify the business, user and technical goals to create a something that benefits everyone. Based on those project goals, I have created a feature roadmap to establish the Must-Have Features to make a reliable website fully functional to do what its meant to do.

Defining the Structure

Now that the insurance categories and site features have been decided, I created a sitemap to get a bird’s eye view of how the pages will be prioritized, linked and labeled.

Ideate Phase

To quickly come up with layouts that made sense, I started out by roughly sketching out a few patterns before proceeding to digitizing them. After receiving some feedback, I have dissected the parts of each pattern from the sketches to create a starting point for my responsive low fidelity wireframes shown below:

Further, I’ve annotated my wireframes to provide the context behind my design decision and you can find the full details here.

Brand Guidelines & UI Kit

Staying true to the brand attributes, I’ve chose the brand color to be a deep blue. The color blue is well-accepted for both female and male users and promotes the feeling of peace, stability and trust. I have chosen orange as a secondary color as it pairs greatly with blue and symbolizes optimism and freedom.

As for the Logo, I wanted to create a sense of trust for the company and sketched out as many until I felt that there was a good amount of potential to choose from.

I experimented with a few symbols that show protection and support such as umbrellas, a turtle’s hard shell, a shield and so forth. The roundness lilypad with the heart in the middle expressed a sense of sincerity and protection so I decided to move forward with this logo design.

To promote a friendly and welcoming feeling, I sketched and made some original illustrations.

On top of illustrations, I have created the category icons as well to tie in the overall look of the brand and ended up with the below UI kit:

Prototype Phase

High-Fidelity (Limited) Prototype

Applying the brand guidelines and UI kit to build my high fidelity wireframes (shown below), I put them together into a limited prototype in preparation for usability testing.

Check out the prototype here.

Test Phase

Usability Testing

Once the prototype was ready, I prepared for usability testing in order to determine whether the website works as intended with our target demographic. The test was conducted with 7 participants over a recorded Zoom call where they were given scenarios to complete specific tasks.

The test objectives include:

  • Testing the overall quality and ease of use regarding the navigation and flow to complete a task
  • Testing how users prefer to search for their insurance needs
  • Testing how easily the user can obtain an insurance quote
  • Identifying any areas of frustrations, hesitation or confusion (pain points)
  • Observe how the website makes the users feel about the site and quote process

Tasks:

Task 1: Give your first impression of the website and what you would do
Task 2: Show how you would purchase car insurance
Task 3: Show how you would purchase a bundled insurance for your car and home

Wins:

  • Some participants enjoyed the colors and illustrations
  • Some participants noted that the design was clean, straighforward and friendly

Observations

  • Most participants used the drop-down navigation menu to get a quote for a specific insurance
  • 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

Key Insights:

  • All participants expect a more detailed breakdown of the insurance (with real numbers)
  • Some participants want to know how they qualify for the discount and why it’s even necessary in the first place

Recommendations:

  • Provide a detailed breakdown during the quote process
  • Create a password confirmation form
  • Revise the car insurance page

Next Steps

There are still things that can be tested and improved on, including but not limited to:

  • Conducting usability test on the revised prototype to see if it improved and find out weaknesses
  • More testing, iterating and covering more features that were not implemented due to time constraints

Conclusion

Doing this project was interesting because I started out not being too familiar with insurance myself and learning that other people had a similar view towards it made me feel like this project was worthwhile.

What I enjoyed 😁
I enjoyed learning how to tackle real people’s concerns and backing them up gives me confidence as a designer.

My favorite moments 😊
As a doodler in my spare time, some of my favorite moments would be whenever I had the time to sketch things out such as the low fidelity wireframes, logos and illustrations.

My least favorite moment 😭
Documenting the recorded zoom sessions felt a bit tedious but I always find my future self thanking me at the end of the day!

Room for Improvement 🤔
I spent a lot of time perfecting the low fidelity wireframes and made few more versions before receiving feedback. Next time, I would budget my time more wisely and work on other tasks since I’ll be making changes after getting feedback anyways.