Modernizing & simplifying the insurance buying experience
Responsive web UX/UI Design User ResearchINTRODUCTION
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
It’s your first time buying insurance and you want to learn the basics. Where would you go?
Where would you go to buy renters insurance?
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:
See if users are able to successfully complete the auto insurance quote and checkout process
See if users find the available resources helpful
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