Evolution of a pricing page.
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.
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.
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.
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.
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.
2016: Optimizing the checkout experience
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
-
zealth ai
UX Design for reporting and managing cancer symptoms.
-
hdfc bank
Redesigning HDFC Bank’s consumer banking app.
-
sauce labs
Designing a unified, web and app testing UX.
-
browserstack
Redesigning the Live user experience.
-
browserstack
Rebranding and building a design system.
-
jawe
A website builder for everybody.