Research

Research Goals:

Determine why consumers are motivated to buy insurance online as opposed to buying in person or over the phone.
Conduct research on Breezy’s competitors.
Learn what is most important to consumers when it comes to buying insurance.
Determine any pain points that consumers might have when buying insurance.
Understand how searching for insurance policies fits into the user’s daily life.
Understand the process of buying insurance.

I began my research by trying to understand my objective. I conducted some general research on the insurance industry as a whole. Selecting insurance is a complex process which is why it is stressful for most Americans. Consumers usually struggle with insurance terminology and understanding what they are buying.

‍

Competitive Analysis

Next, I dove into exploring Breezy’s competition by conducting a competitive analysis. This helped me understand other insurance companies and how they display and market their insurance policies. I also created some provisional personas based on the information I gathered.

COMPONENTS

Secondary research
Competitive analysis
Provisional personas
User interviews

Competitive Analysis of Breezy's Competitors

Provisional personas

User Interviews

I chose to conduct interviews to gain further insight into consumers’ needs, motivations, pain points, and how they go about selecting insurance. I talked with five people in the following categories, being sure to include a range of income levels, careers, and ethnicities.

People who currently have an insurance policy.
People who are young in age (16-35).
People who have recently bought insurance.
People who have bought insurance over the phone or in person.
People who have bought insurance online.

Interview Results

Most people struggle with insurance terminology and jargon.
People want to know what exactly their insurance policies cover.
People value the aid of an agent when selecting insurance policies.
People often prefer insurance recommendations from a parent or family member.
People tend to struggle with comparing policies.
People are interested in learning more about insurance.
People have a lot of questions when purchasing insurance.
Selecting insurance policies is a time-consuming and stressful experience for most people.

View Full Document

Define

I created a user persona to help represent the user voices from the interviews. This helped me stay focused on the user goals during the design process.

Next, I made an empathy map, which assisted me in understanding the broader influencers in the user’s life. This exercise enabled me to stay in a human-centered mindset for the remainder of the project.

COMPONENTS

User persona
Empathy map
Card sort
Sitemap
User flow

User Persona

Empathy Map

Open Card Sort

I also conducted an open card sorting exercise to understand better how potential users would categorize the website's content. I gave three participants a handful of cards and then asked them to create their categories and label them as they saw fit.

Open card sort results

Sitemap

Next, it was essential to define how users will interact with and navigate through the website. I asked myself the following questions:

What pages are the most important?
What belongs in the navbar?
How should the content be organized?

Sitemap

User Flows

I then built out some user flows to show how my persona might move through the website. This allowed me to see all of the possible steps and decisions that the user may take to reach their goals.

User Flows

Design

I started the design process by sketching some possible homepage layouts. I explored various ways to organize the content and structure. This helped me figure out what the other page's layouts would be.

COMPONENTS

Lo-Fi sketches
Med-Fi wireframes
Branding
UI kit
Hi-Fi screens

Low-fidelity sketches of the homepage

Mid-Fidelity Wireframes

I created my mid-fidelity wireframes based on elements taken from the home page sketches. I designed wireframes that would assist in completing the following tasks:

Get a quote for an auto insurance policy.
Purchase that auto insurance policy.
Lookup a term in the insurance dictionary.

Mid-Fidelity Wireframes

⚡️ CHALLENGE

Most of the users I interviewed preferred to talk to an insurance agent in person when buying insurance because they could ask them questions whenever they were confused during the process. Being that I was designing a web experience, this proved to be a challenge.

✅ SOLUTION

The solution was to add a Sticky Chat button throughout the website. The placement of this simple button would allow the user to chat with an agent at any point.

‍

I also made the quote process feel like the user was interacting with an actual agent by implementing a one-question per page format. This format was brought to life by including an avatar image at the top of each question/page. These decisions combined were intended to lead to a more relaxed and conversation-like experience.

‍

Branding

The goal for the Breezy brand was to put the focus on a friendly and transparent user experience. I searched for typefaces that would best fulfill that goal during my logo exploration. I picked the typeface, COCON PRO, for my logo as I felt it best resembled the visualization of wind and felt playful.

The breezy logo features smooth terminals for a friendly look and closely resembles the illustrative nature of wind.

I used color sparingly so as not to overwhelm users. However, it is used purposefully, especially for guiding the user through the experience.

The UI Kit assisted in linking the breezy brand with the website design.

These are some of the icons that I created from scratch using Adobe Illustrator.

Here's one of the illustrations I created for the homepage. I styled it in accordance with the iconography I created.

Homepage

Auto Insurance page

As you can see these one-page screens include minimal wording so as to not overwhelm the user.

The inclusion of the avatar image and the live chat button was intended to make the whole experience feel like the user is actually interacting with an actual agent.

⚡️ CHALLENGE

Overall confusion regarding insurance terminology was a common user pain point that I gathered from my user interviews. There needed to be some sort of learning aspect to the website.

✅ SOLUTION

The inclusion of the Chat Button was my original solution, but taking the time to chat with an agent could be a little slow compared to other solutions. The inclusion of an insurance dictionary page would be a more streamlined approach for looking up insurance terms.

‍

Test

I created a high-fidelity prototype in Figma and conducted usability tests over Zoom. Six participants from various backgrounds and profiles were chosen for this test. I presented participants with two tasks and observed their progress.

View Full Document

Task 1: Get an Auto Insurance quote and purchase the policy.

‍

TASK INSTRUCTIONS

Please pretend with me that you want to get an insurance quote for an auto insurance policy. Please try to click on areas you believe will take you to a car insurance quote. After that, please purchase that insurance.

‍

TASK NOTES

All of the users completed the task with relative ease and speed. All of the users thought that displaying the questions one page at a time made the process of getting a quote to feel quicker. One user clicked on the live chat button to chat with an agent. Two users wished there was more detailed information about the insurance policy.

TASK COMPLETION RATE

100%

‍

Task 2: Look up the term “Deductible” in the Insurance Dictionary.

‍

TASK INSTRUCTIONS

For this last task, I want you to look up the term “Deductible” in the insurance dictionary.

‍

TASK NOTES

This task proved to be no trouble for any of the participants. All of the users thought an insurance dictionary would be a helpful feature for consumers. The inclusion of an insurance dictionary seems to be a viable solution to helping users navigate through confusing insurance jargon.

TASK COMPLETION RATE

100%

‍

Iterations

Using an affinity map, I organized the observations and notes from the usability testing. Similarly, as with the empathy map, I looked for patterns and trends to discover insights and related design recommendations.

Affinity Diagram

⚡ Problem

Users requested more detailed information about the insurance policy.

‍

✅ Solution

My solution to this was to add a CTA to the “Your Quote” page that allows users to download a document that covers detailed information about the policy.

⚡ Problem

Some users mentioned that there should be an "Add a Billing Address" section on the Summary page.

‍

✅ Solution

I added a Billing Address section to the Payment Information section.

⚡ Problem

While not a problem, one user mentioned that they really liked the helper link for finding the VIN number. This could be an opportunity to add more helper links throughout the website.

‍

✅ Solution

Since this was a successful feature during the test, I added a helper link, to the “What is your license number?” page explaining how to find your license number.

WEB DESIGN

Breezy Insurance

⚡️ NOTE

Overview

ROLE

TIMELINE

Research

Research Goals:

Competitive Analysis

COMPONENTS

User Interviews

Interview Results

Define

COMPONENTS

Open Card Sort

Sitemap

User Flows

Design

COMPONENTS

Mid-Fidelity Wireframes

⚡️ CHALLENGE

✅ SOLUTION

Branding

⚡️ CHALLENGE

✅ SOLUTION

Test

Task 1: Get an Auto Insurance quote and purchase the policy.

TASK INSTRUCTIONS

TASK NOTES

TASK COMPLETION RATE

100%

Task 2: Look up the term “Deductible” in the Insurance Dictionary.

TASK INSTRUCTIONS

TASK NOTES

TASK COMPLETION RATE

100%

Iterations

⚡ Problem

✅ Solution

⚡ Problem

✅ Solution

⚡ Problem

✅ Solution

What I learned

More Projects