ux / ui design
Canopy is a top insurance agency with over 30 years of experience insuring customers. They provide a full range of coverage with more than 350 unique offerings. While Canopy does not offer custom policies, they have optimized their packages to offer the most value to the consumer at some of the best prices available in the industry.
By focusing exclusively on B2B sales up to this point, Canopy is losing pace with competitors in the digital age by not tapping into the direct-to-consumer market online.
We want to know the key things customers consider when shopping for insurance so that we can develop an all-new, easy to use DTC website for the company.
Objectives
Analyze insurance market and understand industry competitors
Determine the user’s most important considerations when selecting insurance
Understand the process users go through when shopping for insurance online
To get a deeper understanding of users’ common experiences with shopping for insurance online, we interviewed 5 subjects who had recently purchased a new insurance product to discuss their thoughts and feelings on the process.
Common User Needs / Motivations
Common User Pain Points
+ Established & trustworthy brand
+ Access to an agent
+ Low monthly cost
+ Reasonable deductible
+ Robust coverage
+ Best value possible
+ Skepticism of the industry
+ Uncomfortable sales pitches
+ General feeling (and fear) of paying too much for too little coverage
+ Loyalty too often feels one-sided
+ Getting the right amount of information
To empathize with our users, we took the findings from the contextual interviews and developed them into the persona Adam - a first time homebuyer looking for homeowner’s insurance.
To develop the IA of the future Canopy website, 5 users participated in a card sorting exercise to with a total of 20 cards.
The exercise helped to illuminate which products or categorizations were obvious to users and which required further consideration and clarification as I developed the site map.
To better understand the user journey through the future website, we looked at 3 possible routes that our persona, Adam, might take to discover Canopy, learn about the products, and get a quote through the on-boarding process.
With the user flow established, I began exploring possible directions for the user interface through quick hand sketches:
The creation of a new direct-to-consumer business model gave us the chance to imagine how to introduce Canopy to a new consumer market. The goal was to communicate a clean and modern approach to insurance. The logo plays off of the idea of a physical “canopy” and aims to communicate a sense of shelter, security and trust.
A cool blue color palette was chosen to inspire a sense of calm during what is often a stressful and confusing experience of shopping for insurance.
A prototype of the landing page and the on-boarding quote tool was developed for usability testing.
With the prototype complete, we recruited 4 test users who fit target demographic, all of whom had purchased a new insurance product within the past 6-12 months. (3/4 had purchased homeowner’s insurance).
Given Task: You are shopping rates for homeowner’s insurance and a friend recommended Canopy to you.
You want to check out their site and get a quote for homeowner’s insurance.
Subtask 1: add additional protection for water back-up
Subtask 2: bundle your new home insurance policy with a life insurance policy
100%
Test Completion Rate
3/4
Expressed Confusion
about Industry Terms
All users responded well to the graphics and “soothing” blue color palette and users universally loved the results page for the homeowner’s policy, with one user commenting “this is exactly what I always want to see when I’m shopping for insurance”. Each user was able to complete the primary and subtasks with no errors.
While all users were able to navigate the site easily, the number one issue that came up was a need for more information. Several users struggled with some of the industry terms and types of coverage. Further explanation will be needed to put users at ease and allow them to feel they fully understand what they’re signing up for.
Key points uncovered from user testing were roughly grouped onto an affinity map until patterns began to emerge.
Based on the affinity map, the key areas for improvement were charted on a prioritization matrix to help determine what revisions would provide the highest feasibility for development and the highest value to users.
Highest priority revisions
adding explanations of confusing industry terminology
Updating the navigation to improve user flow and user control over the flow
To increase user confidence, tooltips were added to give more context to insurance terminology without navigating away from the on-boarding flow
on click, a modal window is revealed explaining coverage terms
on hover, the icon is replaced with a brief explanation of add-ons
This was my first signficant UX project, and I learned a hard lesson about making a solid UX plan before getting lost in the UI.
I did some hand sketching, I created some rather low-fidelity Figma wireframes, and then I rushed into the final prototype before I truly completed the hard problem solving that a product as complex as insurance requires.
Focusing so much on the UI was fantastic for advancing my prototyping skills, but because I didn't spend as much time as I could have on my early wireframes, there were opportunities for creating a better user experience that I missed, and my prototype was too far along to go back to make those improvements.
No matter the medium, one of the most important lessons in design: form follows function. I'll try not to forget that again.
Adding a feature to the Delta app to make airport
wayfinding easier
and more intuitive for travelers
view case study
© , All rights reserved.
