We redesigned the most vital, information rich screen in Pumpkin’s checkout flow to optimize it for where it’s experienced most often﹣on mobile devices.
company
Pumpkin Pet Insurance
role
Product Designer
collaborator
Steven Abraham
background
To purchase a pet insurance policy from Pumpkin, a user must navigate through a quote flow experience where they are asked about their pet and location. They land on a plan page, where they can toggle through different pricing options and read more about the details of a Pumpkin insurance plan.
The plan page is the first place a user will see the pricing for their policy, and it is where they make the decision about whether or not pet insurance seems like a good value for them. It is the most vital screen in the checkout flow, so my team spent a quarter looking at the plan page as a whole, finding opportunities to evolve and improve the experience of the page. Optimizing the page for mobile screens was our first project in this multi-phase endeavor.
A Miro board with some of our early brainstorming on how to optimize the plan page for mobile
research
For our comprehensive audit of the quote flow and plan page, we looked at user behavior data on FullStory, administered a round of moderated user testing, and performed an exhaustive competitive analysis of 12 competitors in the pet insurance space.
hypothesis
If we optimize the plan page to make it shorter, more scannable, and easier to navigate on a mobile device, then more users will see and digest the information on the page, which will increase their perceived value of pet insurance.
simplifying language
Copy that worked well on a desktop layout was not working on a mobile layout. While the headings were full of brand personality, they were long and not easily scannable. We simplified copy to make it easier for users to quickly scan down the page and find the information they are looking for.
Simplifying the copy for each section heading made the page shorter and more scannable
re-designing modules
While some modules translated well to the mobile layout, there were a few modules that needed a complete over-haul. Many modules on the plan page had been added disparately over time, so this project was a good opportunity to create more visual cohesion on the page as a whole. We combined modules where it made sense, and eliminated some elements that had become redundant.
We altered the layout to be more conducive to a mobile screen
We contextualized the user’s vet hospital within the module
We simplified the calculator component
mid-page navigation
A navigation module below the pricing module acts as a table of contents for the rest of the page and allows the user to navigate to the content that matters to them
A sticky top bar allows for easy navigation to the different content modules on the page, and assures that the key CTA is always on screen
project status
We designed a page that is 31% shorter and much easier for users to scan and navigate through. The page launched in December of 2023 and metrics are being collected to determine if the mobile-optimized page increases the percentage of users who make it to the bottom of the page and decreases the percentage of users who drop off before the checkout page.
challenges
Pet insurance is a pretty complex product, and there is often a large knowledge gap for users who are new to it. It is difficult to strike the right balance between providing users with helpful information and overwhelming them with too much content. I think it might have been worthwhile to do a few quick tests using different combinations of the existing modules: what would happen if we cut all of the auxiliary educational content? What would happen if we only kept one module? I think it would’ve been valuable to see if there was a right amount of content to show users before we tackled the re-design. That said, I am excited to see what other avenues of learning that may open up as we see the results of this launch.