Sagar Patil

Browserstack

Evolution of a pricing page.

challenge Design and refine the pricing page of a tech start-up, to improve the UX and boost sales, over a period of four years.

role Lead UX and Visual Design, User/Data research, Front-end coding.

2012: Introduction

BrowserStack’s initial pricing pages were designed by Sarah Parmenter in 2012. At the time, BrowserStack had only one product - Live Testing, and offered 5 subscription plans, the price of which varied according to the number of user licences required.

BrowserStack - Pricing page designed by sazzy.co.uk in 2012 BrowserStack's initial pricing page in 2012 designed by Sarah Parmenter.
BrowserStack - Subscriptions could be managed from the account management modal Subscription plans could be purchased, upgraded or downgraded within the account management modal UI.

Initial feedback suggested that users were confused by which plans to buy and which plan was right for their team, since many users would often share the same log in credentials, thus negating the need for a multi-licence plan.

2012 - 2014: Multi-product pricing

Between 2012 and 2014, BrowserStack added 3 new products - Automate, Screenshots, and Responsive each, with their own pricing plans based on their USP, for example, concurrency, screenshots, users, etc.

This resulted in 15 unique pricing plans, which became very confusing for users who wanted to buy plans on multiple products.

BrowserStack - Multi-product pricing
BrowserStack - Implementation of the 3 plan pricing plans. An additional Freelancer plan was also created to add value for single users, while also making the other offerings look more lucrative Implementation of the 3 plan pricing plans. An additional Freelancer plan was also created to add value for single users, while also making the other offerings look more lucrative

2014: Simplifying pricing plans

User feedback told us that having 5 plans for each product was very confusing, particularly since many users were interested in purchasing team plans across different products, for multiple different teams.

We scaled down the five plans to three, focussing on the difference between Live, Automate and Enterprise users and usage habits.

I also ran A/B tests to experiment with the names of the plans, to determine which names users associated with most. Using the product name directly in the plan name (Live, Automate) lead to higher conversions and fewer sales questions.

BrowserStack - Green Automate plan was visually overpowering. Users also missed/ignored the features below the plans BrowserStack - Green Automate plan was visually overpowering. Users also missed/ignored the features below the plans Green Automate plan was visually overpowering. Users also missed/ignored the features below the plans.
BrowserStack - Design was tedious and relied on users to remember/look up the features of the Basic plan frequently BrowserStack - Green Automate plan was visually overpowering. Users also missed/ignored the features below the plans Design was tedious and relied on users to remember/look up the features of the Basic plan frequently.
BrowserStack - Tabular design allowed users to quickly identify the right plan, while displaying costs above and below the fold BrowserStack - Green Automate plan was visually overpowering. Users also missed/ignored the features below the plans Tabular design allowed users to quickly identify the right plan, while displaying costs above and below the fold.
BrowserStack - Naming the plans according to the products simplified users’ purchasing decision BrowserStack - Green Automate plan was visually overpowering. Users also missed/ignored the features below the plans Naming the plans according to the products simplified users’ purchasing decision.

2015: Adding a 3-step checkout

To reduce the barrier to purchase, I changed the traditional 3-page purchase workflow into a single page, 3-step workflow. Users could now review their chosen subscription plan, sign in and complete payment in under a minute.

Benefits:

  • Faster transaction time due to loading modules instead of the whole page.
  • Modular design allowed for faster iterations and learning.
  • Allowed us to enable HTTPS, a requirement by many enterprises.
  • Uses secure API calls.
BrowserStack - Green Automate plan was visually overpowering. Users also missed/ignored the features below the plans Green Automate plan was visually overpowering. Users also missed/ignored the features below the plans.
BrowserStack - Design was tedious and relied on users to remember/look up the features of the Basic plan frequently Design was tedious and relied on users to remember/look up the features of the Basic plan frequently.
BrowserStack - Tabular design allowed users to quickly identify the right plan, while displaying costs above and below the fold Tabular design allowed users to quickly identify the right plan, while displaying costs above and below the fold.

2015 - 2016: Brand Redesign

Between 2015-2016, I led BrowserStack’s brand and product redesign, which included creating a new style guide, UI component library and a design language that tied the entire product family together.

Part of the redesign included updating the UI for the shopping cart, pricing, and subscription pages for users on the old multi-product pricing plans.

BrowserStack - Redesigned pricing page with shopping cart collapsed Redesigned pricing page with shopping cart collapsed.
BrowserStack - Redesigned pricing page with shopping cart expanded Redesigned pricing page with shopping cart expanded.

2016: Optimizing the checkout experience

BrowserStack - 2016: Optimizing the checkout UX
BrowserStack - Pricing page plan selection UI
BrowserStack - Pricing page checkout UI

Acknowledgements

Over the course of four years, I worked with a growing team of designers, front-end developers and product owners. I learned much about product pricing strategy from the co-founders of BrowserStack, Ritesh Arora and Nakul Agrawal. I also worked with, and learned from a talneted team of growth hackers including Ganesh Mahalingam, Snehal Patel and Arpit Rai.

Case studies