Pricing Landing Page Case Study
Improve CR/New Registrations % via Redesigning Pricing Landing Page
Goals
The goal is to demonstrate how targeted adjustments – ranging from design tweaks to content restructuring – can lead to better user engagement, higher conversion rates, and ultimately, increased business outcomes.
The case study also emphasizes the importance of data-driven decisions, using metrics and user feedback to guide the optimization process.
MY ROLE
UX/UI Designer
Prototyping
THE TEAM
1 UX/UI Designer
1 Developer
2 Stakeholders
1 Product Manager
TIMELINE
1 Week
The initial state of the existing page
Landing page structure
The pricing pages of Alegra had a similar layout across all products: A Navigation Bar - Hero section - Pricing Table with four plans along with their key features, for every single one.
Below the pricing table, the landing page continues with the rest of the section like: The enterprise banner, social proof, FAQs, and a complementary section to promote other Alegra’s products such as: Payroll, Billing, POS and Online Store.
Identifying areas for improvements
From the customer support area, different user insights were documented and repeated over approximately 2 months.
Thus, the need arose to take on the case from the design area of the Growth team and to be able to carry out a more
in-depth investigation of each of these user insights.
Features
“Where can I find more details about the plans? Do they contain anything extra?”
Recommendation
Which plan would you suggest? Why?
Call to Action
How can I get started for free if the plan is priced at $X.xx?
User behavior Analytics - Microsoft Clarity | Heatmaps and Sessions recordings
This investigation helps us understand how users are interacting with our website through session replays and heatmaps.
This tool gave us the following insights:
Recording sessions 📹
Recording sessions show us that:
👎🏻
Users compare a lot between monthly and annual pricing
👎🏻
We see many users clicking in the Prices category in the main menu when they are already on the pricing landing page. This user gets lots of confusion and therefore we see lots of frustration clicks
👎🏻
Clarity Ai summarizes also gives us the following conclusion: The website could benefit from providing clearer and more accessible information about pricing plans to keep users interested.
Heatmaps 🔥
👎🏻
We see clicks on breadcrumbs in particular, which although not a significant percentage, over time this can lead to frustrated clicks.
From a UX perspective, these breadcrumbs also don't make much sense as they don't represent links that users can return to.
👎🏻
We also see that the button that displays the longer table with all the product features does not have as many clicks as we expected.
This was one of the insights we also received from user comments.
The Solution
Implementing design changes
According to our research and investigation with data tools and user’s insights, we gather a to-do list to focus on the main user concern in the landing page.
To-do list:
Target our value proposition on hero’s title
Support our value with social proof
Resaltar our most recommended Pricing Plan with a clear button and tag
Find a way to visually separate the cards from the prices and make their structure useful for better visualization in the table with all the features of each plan.
Highlight the button that takes users to the table of all the features
Modernize the Look & Feel of the landing page.
Our value proposition:
Boost your business with with you Alegra Accounting Plan
Social Proof:
We point out that we have over 40.000 pymes, and we feature a quote from a 5-star review.
Pricing options:
4 pricing options are shown, with the most popular plan highlighted, features a green CTA button.
Below each plan, we have a list of key features, so customers can make sure they’re choosing the best plan for their needs.
We came with the solution of separate each plan with a color, which helps us give visual continuity to each plan in the following table where all the features of each plan are included. We also add a bright green CTA button to help user to identify it more quickly
Now, our pricing plan tables have a refreshed modern look & feel empowering by Alegra’s design system.
Measuring the results
Variant A
Current Price Cards
Variant B
Design adjustments and price hierarchy
New Users
Variant A
Variant B
%
New Users
4,000
4,570
+14.25%
Sing-Ups
262
273
+4.20%
CR Singups/New users
6.56%
6.67%
+1.68%
Clics en CTA
501
518
+3.39%
CTR
12.54%
12.65%
+0.87%
Conclusions
The redesign of the pricing landing page had a positive impact on conversion and engagement with the CTA. The improved conversion rate to sign-ups and the increase in clicks on the CTA suggest that the new structure and visual hierarchy made it easier for users to compare and make decisions.
Victoria Goya
This project was worked on with the product and growth teams,
as well as with our back and front-end developers.