Research
Discovery and Ideation.
First, we needed to understand the problems of the existing pricing page. I've set up sessions recordings, click-map and survey on the pricing page to get insights from customers. Here's some of the responses from customers:
The qualitative research showed us customers found the interface confusing (surveys) and frustrating (lots of rage clicks, sessions recordings). The preliminary research synthesis gave us a clears ideas where e need to investigate moving forward:
I scheduled and conducted a number of customer interviews with our target audience to understand what's the role of the pricing page in their user journey when choosing to purchase a tool like Hotjar.
I discovered that the pricing page is the second page every visitor navigates to. They had different motivations, but they all wanted to see what they'll get and what it would cost. We've also discovered most customers miss entirely seeing the product offering Surveys because the product was hidden below the fold. People didn't find this layout familiar.
What's happening in the market?
I found out 2 wide-spread approaches to packaging and pricing SaaS product - solution based and complexity based approach.
Solution-based model
Simply put, a company that packages a platform and sells different products serving individual customer use cases uses a solution-based approach. Let's take HubSpot as an example; they sell other products depending on how you use their platform. Do you need a marketing automation tool, a CMS for your website, a sales CRM, or all those in 1 place?
Complexity-based model
A complexity-based model implies one base product with different add-ons. Let's take MIxpanel as an example; you pay for 1 product but the price is based on the number of users you want to track per month. Figma packages their add-ons similarly - with the free plan you get access to limited functionality, and with their paid plan, you get unlimited access to some of their features. However, if you want a Single-sign-on as a company and organization-wide design libraries, you have to pay for the highest tier.
Prototyping
A story of UX principles...
Given Hotjar, decided to take the solution-based approach as a company, I was constraint by back-end. To add on that, our team was short on front-end engineers, so I had to scrap up a solution which took that into consideration as well. I
Jakob's Law
Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Users will transfer expectations they have built around one familiar product to another that appears similar.
Progressive Disclosure
Progressive disclosure defers advanced or rarely used features to a secondary screen, making applications easier to learn and less error-prone.
1. Initially, show users only a few of the most important options.
2. Offer a larger set of specialized options upon request.
Experiment 1
Add a hero
The goal of this hero concept is to direct attention to 2 options (decision tree), then if users choose to build a plan - present the following decision tree - pricing plan builder
Free account as main focus at the top of the page to get new visitors through the door and remove friction. Give interested prospects the ability to get in the weeds and build their plan. This hypotheses was scratched because the learnings from our customer interviews were that people come to this page to understand what is the cost of the solution they want.
Experiment 2
Product per use case
The objective of this experiment was to track the user's intent based on their session before they came to the pricing page. Depending on their UTM source and landing page, we wanted to land users in the pricing tab, which reflects their intent. If I googled "heatmaps tool", I'd be landed on the pricing tab Observe etc.
We Mixpanel to track the cohort of users and success of the experiment. Also, I've set up heatmaps and a survey on the page to gather qualitative feedback from users.
Outcomes
What about the impact?
Our users showed us that pricing is a cornerstone in their user journey. After numerous iterations of the layout and information and tight engineering constraints, we've landed a solution that simplifies our pricing experience. As a result, we observed almost entirely positive feedback in surveys limited amount of rage clicks on the page, and we tackled the drop off from new and returning users.
Learnings
What I learned...
It was my first time working under such tight constraints, both tech-wise and scope-wise. Not to worry! The setup helped me develop creative solutions, fostered communication with my engineering and product partners, and wore more of my product hat.
