Modernizing & simplifying the insurance buying experience

Responsive web UX/UI Design User Research

INTRODUCTION

Truth be told, when I started this project, I knew far less about property insurance than the average adult should know, because 1) my parents haven't kicked me off their auto insurance policy yet 🙏 and 2) because frankly, it confused me.

But my prior aversion to insurance was precisely why I chose the topic—it represented a challenge to create a design for a domain I had little prior knowledge about, and an opportunity to turn something notoriously difficult to understand into something more digestible and exciting.

*Disclaimer: This is a theoretical project done for DesignLab.

 
MY ROLE

UX/UI Designer
UX Researcher

TEAM

Solo project

TIMELINE

Nov 2021 - Jan 2022 (10 weeks)

PROBLEM ⚡️ 

People who are new to auto insurance need an easier, faster and more engaging way to learn about and buy it.

Secur Insurance wants to create a website to sell its products directly to customers, particularly to the young, tech-savvy generation. However, buying insurance can be daunting for young people—it requires an understanding of the different insurance terminology, how much coverage they need, and tons of research to make sure they’re getting the best price and coverage for them.

SOLUTION

A beginner-friendly way to buy auto insurance online

A responsive website (available on desktop, mobile and tablet) that’s perfect for users on the go

 

A fast & easy quote & checkout process

  • Upfront checklist so users know what info they’ll need before starting

  • Only 3 steps to get a quote and 6 steps to purchase auto insurance

  • Auto-filled vehicle information (from public DMV records) to save the users time

 

Easily accessible resources for beginners

  • How-to guides and FAQ’s available for each insurance type

  • Definitions & explanations provided for each item on quote page

  • Help available via live agent at every touchpoint


SECONDARY RESEARCH

Scoping out the competition 👀

I began the project by conducting secondary research to understand how the different coverages and deductibles worked, read reports on consumer behavior, and analyzed competitor websites to learn about industry standards and offerings.

Putting myself in the users’ shoes

Having never personally bought auto insurance before, another key part of my secondary research was putting myself in the users’ shoes by completing the quote process for myself (unknowingly subjecting myself to dozens of spam emails and calls).

Key Takeaways💡

  • There’s little product differentiation between the insurance companies, which all offer similar insurance types, services, roadside coverage, etc. The variation comes from the price, brand recognition, convenience, and quality of customer service.

  • Website IA seems to be standardized amongst the different insurance company websites. They all have prominent CTA’s to “get a quote” and their main navigations typically include insurance, account, about us, resources, and claims. Their quote processes are all very similar as well.

  • As a result, there are lots of 3rd party websites and services that help consumers compare the different insurance companies, such as J.D. Power, Forbes, Zebra, etc.

 
USER INTERVIEWS

Understanding insurance customers

To learn about how potential users choose their insurance plans what their pain points are, I conducted user interviews on 6 participants between the ages of 18-42 that have purchased some form of property insurance (e.g. auto, renters, homeowners, etc.) in the past.

Insights Gathered💡

When buying insurance, convenience is #1
Users tend to choose the most convenient option when choosing their insurance rather than trying to find the lowest price or best coverage.

Reliance on recommendations

4/6 users chose to rely on recommendations from others or continue with the plans their parents chose for them without doing much research independently.

Set it and forget it
Users seem complacent with learning the “bare minimum” and only look into it when the situation requires it. Users who haven’t had to use their insurance in the past often claim to know the least.

Having a real person to talk to
Users who do put in the effort to do independent research find it important to have a real person to talk to when needed.

Pain Points

PERSONA

Meet Lisa, the insurance newbie

I created a persona that embodies some of the qualities, goals, and frustrations of some of the users I interviewed, which will help keep me attuned to the users’ needs throughout the rest of the design process.

INFORMATION ARCHITECTURE

Following industry standard information architecture

As I had discovered in my secondary research, many of the competitor websites had very similar IA. The Secur website will offer the same products and content as these competitors, so I decided to use that same structure for Secur’s sitemap rather than trying to reinvent the wheel.

Keeping the user in mind, I also made sure to include and emphasize beginner-friendly resources in the IA.

Secur Sitemap

 Navigation elements in the final homepage design

TREE TEST

Verifying the information architecture with users

While the industry-standard looked intuitive to me, of course we never want to assume. To test whether or not the IA was actually intuitive to users, I conducted a virtual tree test on 5 users in the target demographic.

Tasks Given

  1. It’s your first time buying insurance and you want to learn the basics. Where would you go?

  2. Where would you go to buy renters insurance?

  3. You’re in the process of choosing your home insurance and want to talk to a live agent about the different options. Where would you go to find a live agent?

Results

  • 5/5 users were able to successfully navigate to the correct pages for the given tasks 🎉

  • In the post-study survey, 5/5 users indicated that they found the website structure clear and easy to navigate.

BRANDING & STYLE GUIDE 

Making the insurance experience more fun & modern

To make the insurance experience feel less daunting and to appeal to the younger demographic, I chose to use sans serif fonts, a warm color palette, and playful illustrations. I created the logo in Adobe Illustrator—a modern rendering of a shield, which traditionally symbolizes security and protection.

SOLUTION #1

Delivering value to users on the homepage

As the homepage would be the first thing users see, I wanted to make sure to communicate Secur’s value proposition and provide easy access to beginner-friendly resources.

Homepage

  • Make get a quote and view resources the primary CTA’s

  • Communicate trustworthiness by including customer reviews, as interviews had revealed that users tend to rely on others’ recommendations for social proof when choosing

  • Make it easy for users to navigate to different sections of the website

SOLUTION #2

Emphasizing beginner-friendly resources

Auto Insurance Page

The auto insurance page helps the user get an overview of what they need to know when evaluating and buying car insurance.

  • How-to guide—instructs users on how to find the right car insurance linking to resources such as Insurance 101 and Coverage Calculator tool

  • FAQs—contains common questions that first-time car insurance buyers ask

  • Talk to an agent—made easily discoverable (located on 3 different parts of the page). As discovered in user interviews, users like being able to talk to a real person when buying insurance.

Quote Page

The quote page includes the following features that make it easier for users to choose the right plan for them:

  • Coverage information & definitions—helps define and details what’s covered for each coverage type in layman terms

  • Badges that indicate the “top pick” for the user and which coverages are required by state, which makes the plans easier for the user choose

  • FAQs—to help answer frequently asked questions customers have when reviewing their quotes

  • Talk to agent—for users to ask a real person questions on their quote

SOLUTION #3

Expediting the quote & checkout process

As convenience was the most important factor to most of the users I interviewed, I aimed to make the quote process as quick and convenient as possible.

Reducing users’ cognitive load

The insurance quote and checkout process generally requires the user to answer a long series of questions. To avoid overwhelming the user, I broke out the process into 7 different steps.

Managing expectations

Before the quote process begins, users are told how much time and what information they will need to have on hand to complete the process. This way the user will be less likely to abandon the process if they realize they don’t have the time or information required.

Saving user’s time

To save users the time and trouble of entering their vehicle information, the users’ vehicle details will be automatically populated by referencing the users’ name and mailing address against public DMV records.

Error prevention

Before checking out, the user will be given the chance to review for errors and edit any details if necessary.

 

 USABILITY TESTS

Getting user feedback on the prototype

I conducted a usability test on 5 users within the target demographic.

Test Objectives:

  1. See if users are able to successfully complete the auto insurance quote and checkout process

  2. See if users find the available resources helpful

  3. See how users feel about the Secur website experience and identify areas of improvement

Overall, the results of the usability test were mostly positive.

 
ITERATION

Making priority changes based on user feedback

While the majority of user feedback was positive, there were a few issues that the usability test had uncovered. I prioritized fixing the issues that came up the most.

Improving the “confusing” quote page

After usability testing

  • Added descriptions to the coverage amounts (e.g. $100k/person)

  • Added columns for the different plan amounts

  • Added more detail to the coverage descriptions so users would better understand what’s covered

  • Hid coverage descriptions in the “?” icon

  • Added FAQ’s to answer common questions may have regarding the quote (since users found the FAQ’s on the auto insurance page helpful)

Before usability testing

  • 4/5 users were unsure how to interpret the coverage amounts (e.g. “$50k/$100k”)

  • 3/5 users wanted to be able to compare all the plans more easily

  • 3/5 users still wanted more detailed information on what’s covered and what’s not

  • One user said the coverage details & definitions “looks more like a resource than it does my numbers”

Improving information scent

Before Usability Testing

3/5 users said they expected the link in the “Compare auto insurance quotes” section to take them to a page that will allow them to compare quotes from competitors, not to “Get a Quote.”

After Usability Testing

I updated the header to be more clear that users should be getting quotes from the individual companies (including Secur’s).

“How did it get my car information?”

Before Usability Testing

4/5 users initially expressed an confusion as to where the website would’ve gotten their vehicle information from, but figured out that it probably came from public records (and appreciated the time it saved them from having to fill out the information themselves).

After Usability Testing

I added in a “?” icon so users can quickly learn where the information was coming from.

HIGH FIDELITY PROTOTYPE

The Final Solution ✨

FINAL THOUGHTS

What I learned

This project taught me a lot about design and about my personal strengths and weaknesses. It has challenged me to think critically about how the prescribed steps fit into the big picture, and to deviate from those steps when they seemed unnecessary or when more effective methods were available. Looking back, I would’ve sought feedback from users in the low fidelity stage to allow for quicker iterations, and prioritize better so I’d spend less time on steps that had less of an impact on the project overall.

With this being my first project with DesignLab and my first complete project using Figma, I was happy to have received positive feedback from my peers, my mentors and from users. I even showed this project to an old classmate who’s the lead UX designer at Sown To Grow (an edtech start-up), which led to me working with Sown To Grow on their website redesign.

If I had more time on this project, I would…

  • Conduct another usability test to validate the effectiveness of the latest revisions

  • Incorporate more “beginner-friendly” content to the quote and auto insurance pages, starting by conducting user interviews and secondary research to identify any gaps/missing information

  • As users also found the process of comparing quotes amongst the different insurance companies to be the most time-consuming part, consider adding a quote comparison tool