WEB DESIGN

Breezy Insurance

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

View Prototype
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.
Research Debrief 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
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

My user research revealed that a significant number of individuals prefer speaking to an insurance agent in person when purchasing insurance. The reason being, they simply prefer conversing with an actual person where they can get their queries resolved instantly. However, as I am designing a web experience, I need to devise a solution that can cater to this preference while ensuring a smooth and hassle-free online experience.

✅ SOLUTION

I incorporated a sticky live chat button throughout the website so that users can connect with an agent at any point during the process. Additionally, to mimic a conversational experience, I implemented a one-question-per-page format during the quote process, along with an avatar image at the top of each question/page. This simplifies form-filling by minimizing inputs, reducing cognitive load, and streamlining the process.

‍

Solution Wireframe

Branding

The goal for the Breezy brand was to put the focus on a friendly and transparent user experience. During my logo exploration, I searched for typefaces that would best fulfill that goal. 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

My user interviews revealed that users often experience confusion with insurance terminology, which creates a significant pain point. To address this issue, I concluded that the website needs to include a learning aspect that could educate users about insurance to better help them build confidence.

✅ SOLUTION

I created an insurance dictionary page that users can use as a resource to find clear and concise definitions of insurance terms, making it easy for them to navigate the complex world of insurance. To find a specific term, users can simply select the corresponding first letter of any term in the button group located at the top of the page.

In addition I also provided links to related content on the website, so they can continue to expand their knowledge of insurance and make informed decisions when purchasing insurance policies.

‍

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.

Usability TestView Full Document
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%

‍

‍

‍

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.

Prototype
Affinity Diagram
View more info

⚡ 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.

Add billing address

⚡ 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.

Licence Plate

⚡ 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.

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

Decimal-Main Thumbnail
Decimal
NFTY pets thumbnail
Nfty Pets
google maps thumbnail
Google Maps
Footer Logo
©2024 Devin Gordon