Prudent Pet
Increasing Conversion Rates for a Pet Insurance Quoting Tool
Objective
Increase the conversion rate of Prudent Pet's online quoting tool while also better aligning its style with the rest of the site.
Background
Prudent Pet is a Chicago-based pet insurance company that had recently been acquired by Newins Insurance. I was brought in by Newins to increase the conversion rate of Prudent Pet's online quote and buy tool (OQB). Only about 3% of people who started a quote ended up buying insurance from them, which was well below the industry average of roughly 5%.
I spent a little over 2 weeks on this project, and worked on my own remotely, receiving feedback from the company's VP of Operations every couple of days. Unfortunately, due the the limited scope of this project, I was unable to conduct any user research, user testing, or A/B testing.
Tools
Adobe XD
Skills
User-Centered Design, Interaction Design, Wireframing, Visual Design, Prototyping
Final Deliverable
High-Fidelity Prototype in Adobe XD
Site Evaluation and Competitor Analysis
Since user testing and A/B testing weren't within the scope of this project, I was forced to rely on researching what more successful competitors were doing as well as my ability to evaluate and improve the usability of the current site.
Site Evaluation
When looking at Prudent Pet's quoting tool, I was able to immediately pinpoint the reason why their conversion rate was so low: it was extremely confusing.
​
Once a user inputs some basic info about themself and their pet, they are brought to the "Choose Plan" page shown here. The obvious problem here is that there aren't actually any fully formed plans to choose from and users (many of whom are being introduced to pet insurance for the first time) must now face the arduous task of building their own plan from scratch.
​
Additionally, they aren't even introduced to the second plan option - the Accident-Only plan - until after they scrolled halfway down the page.
​
When it came to the overall look and feel of the page, I disliked how they used this yellow and lighter blue so much when the rest of the site used these only as accent colors and leveraged the brand's darker blue and teal colors more.
Competitor Analysis
One of the first things I noticed from my research was that all pet insurance quoting tools have roughly the same 3 page structure:
Customer enters basic info about themself and their pet.
1
Customer chooses their insurance plan and any add-ons.
2
Customer selects payment method and makes purchase.
3
Pages 1 and 3 had were laid out very similarly on competitor sites, so I focused more of my attention on page 2 where a lot of different approaches were taken. Here are some of these pages from 3 of the 10 or so competitor sites I looked at:
Figo
Healthy Paws
Nationwide
After doing my research, I created a document where I listed out all the things each site did well and not-so-well when it came to usability and UI.
​
My manager was a big fan of Figo's site and told me he wanted to try to emulate it, and I was a big fan of it as well. I liked how they walked the user through every step of the process and made everything easy for any user to understand.
Whiteboarding
Since the layouts of pages 1 and 3 were I focused more of my attention on page 2 where there were a lot of different approaches taken. Once I had a better idea of the issues with the site and what competitors were doing, I took to a whiteboard to start brainstorming. Since not many people are familiar with the ins and outs of pet insurance, I felt that helping people better understand their options was critical in increasing Prudent Pet's conversion rate.
​
Additionally, I was given a document early on that laid out the requirements for everything from the the basic elements to be shown on each page to exactly what plans and pricing options I needed to show. The whiteboarding process was really helpful in helping me decide the best way to lay out all of these elements on the page.
Wireframing
For this project, I started the wireframing process by designing a set of basic black and white annotated wireframes. From here, I was able to ask questions and get feedback from my manager before moving on to the final wireframe/prototype and the mobile version. This project was quite different from most other projects I have worked on in that there were minimal changes between the preliminary and final wireframes.
Page 1 - Gathering Basic Info
This is the page that users see first when the start the pet insurance quote process. The design was fairly simplistic so there were minimal changes that happened between the first and final drafts. Thus, I used this page as my opportunity to nail down the visual design of the project and make it better align with the site's brand than it previously did. Here are some examples of the Prudent Pet website at the time (right) that illustrate the brand language I was trying to capture:
(Click an image to expand)
Page 2 - Choosing the Coverage
Next, I began working on the "Choose Plan" page where users were able to choose their plan, customize it to fit their needs, and add any additional coverage options they wanted.
Pet's Info
At the top of the page was a small section with the basic info about the user's pet that they had just entered. I ended up having to change the style of this between the first and final versions due to how limited the space was when it came to longer pet and breed names.
​
From here, the user could edit this info in a modal and could expand or collapse it if they had multiple pets and only wanted to look at the coverage for one of them.
.png)
Picking a plan
At the beginning of this project, I was given a set of requirements that laid out exactly how the plans, additional coverages, and pricing would work. My job was to lay everything out in a way that made it easy for the user to understand all of their options and entice them to make a purchase.
​
One step I took in order to do this was making the 24/7 Vet Chat feature stand out as much as possible as this was a big selling point for them. Additionally, I wanted to make sure people understood what the plan covered, so I included an expandable box that showed a chart detailing exactly what was covered.
(Click an image to expand)
Customizing the Plan
One big focus of mine was how to replace the rate customization section that had previously been in the form of that confusing table. My goal was to make it as easy as possible for the user to find the rate that was right for them while also educating and not overwhelming users who were unfamiliar with how pet insurance worked. Here are some of the ideas I came up with early on in the process:
(Click image to expand)
I ended up narrowing it down to two possibilities that would provide clear and concise explanation text to educate the user while also making it very simple for more adept users to quickly adjust their rates.
I wanted to do an A/B test to determine whether it was better to have the customization section collapsed on load or to have it permanently expanded. The idea behind this was that by having the section start out collapsed, we would avoid overwhelming first time users with all of this new information while also allowing for full rate customization. Unfortunately, this test was never able to happen for reasons outside of my control, and the company ended up going with Option 1 (Top).
Option 1
Option 2
Adding Additional Coverage
After getting the opportunity to customize their rate, users were then able to choose whether they wanted to add additional coverage. Similar to what I did in the picking a plan section, I added another expandable box here that gave users more details about exactly what this additional Wellness Coverage covered.
(Click an image to expand)
Page 3 - Checking out
The final page I had to design for this project was the checkout page. Here, the customer input their billing info, chose between a monthly or annual billing cycle, and reviewed their purchase. The big challenge here was putting the purchase information into clean digestible format for users. Here is the solution I ended up coming up with:
(Click an image to expand)
Final Design
Here is the final version of the design that I created. You can view the prototype of it here.
