WEB DESIGN

Breezy Insurance

A responsive website that strives to make the process of buying insurance easy-breezy.

Breezy Header Image

⚡️ NOTE

This is one of the projects I completed for Designlab's UX Academy. Despite not being a real app, the research is genuine, as well as my mentor's and student's feedback. I'm proud of this project and just wanted to be transparent with you.

Overview

Breezy is one of the largest insurance companies in the country. They have been in the business for over 30 years. They are a bit behind the competition with regards to having a strong digital presence. For this reason, they want a responsive eCommerce website that is pleasing to use and that allows customers to browse through all products and easily filter by relevant data.

ROLE

UX Researcher
UX/UI Designer

TIMELINE

80 Hours

Breezy Hero Image

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

Competitor Analysis
Competitive Analysis of Breezy's Competitors
Provisional Personas
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.

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
User Persona
Empathy Map
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 1
Open Card Sort 2
Open Card Sort 3
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
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
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

SKetches
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.
Wireframes
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.

Solution Wireframe

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.

branding exploration
breezy logo
The breezy logo features smooth terminals for a friendly look and closely resembles the illustrative nature of wind.
Brand colors
I used color sparingly so as not to overwhelm users. However, it is used purposefully, especially for guiding the user through the experience.
Homepage Sketches
The UI Kit assisted in linking the breezy brand with the website design.
breezy logo
These are some of the icons that I created from scratch using Adobe Illustrator.
Brand Drawing
Here's one of the illustrations I created for the homepage. I styled it in accordance with the iconography I created.
Responsive screens
breezy logo
Homepage
Brand colors
Auto Insurance page
Quote Image 1
As you can see these one-page screens include minimal wording so as to not overwhelm the user.
Quote 2
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.

Prototype

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%

Prototype
Affinity Diagram

What I learned

Coming from a graphic design background, this project taught me the importance of user-centered design and how to create better products by listening to and understanding my users. I gained valuable insights that ultimately led to a favorable user experience just by listening to my user's needs. I also learned a great deal about the complex process of buying insurance and what matters most to people when selecting insurance.

More Projects