Designing Pricing Pages as UX Designer

By May 25, 2020 Practical

A lot of the time UX designers have to work in the middle of a business and the customer we want to keep the business goals in mind while still trying to create an experience that best suits our user. One of these situations arises when we’re trying to design pricing Pages for service-based businesses something like slack or Netflix where the user have to pay a monthly or quarterly or in a yearly subscription and they have to choose between three tier of services or features that they want to take so that they can choose the right product for the right price.

Before we actually dive into how you should create the pricing page or the table itself we need to look at and understand the user’s journey  while they’re buying a subscription or a service. It always starts with educating your customer or your user first your user need to know what your product or service is and why is it useful for them Close lead I do not step is the state where you show them why your service is really important and what is different about it compared to other services what is that crucial problem that you try to solve with your product or your service. Then the users choose the kind of pricing plan or service that suits them the most out of all the options presented to them. Right after that the user is going to sign up they’re going to give you their crucial data. This is a state where we ask the user for signing up to our website if they’re not an existing user or maybe login back to the account if they already have one. No transaction is complete without the user actually paying so this is the step where we ask them to take out their cards from their wallets and fill in those encrypted forums. Some websites or apps will try to use this point to  cross-sell or up-sell their product and services to the user because this is the time where they might be most inclined to spend more money. Typical eBay user is taken to a thank you page or they are sent a notification on the email or the phone saying that they have for charged and what they can do with the newly purchased service. Basically giving them the next step of the process that they can take further creating a reasoning and making them feel better about  their purchasing decision.

Let’s break down the pricing table itself cuz that’s the one that gets the most attention throughout the process and the one that could make or break the deal. So what is a pricing page or table? Pricing pages are pages that help the user see all the features and pric es corresponding to each type of product or service package. In a typical call them a lot of features or Services would be bundled together in this case because subscription-based pricing generally relies on a monthly, quarterly or yearly cycle.

The three-box strategy. While researching and using over 20 apps for the purpose of this article I noticed how many of them have bundled their services into three pricing plans. It may not be very obvious at first but you might be surprised to know that if that user has too many options the longer they take to make a decision. Six pricing options may be too many and one or two maybe two less so in that case 3 fits really well right in the sweet spot. If you’re unfamiliar with Hick’s Law, you might be interested in reading this article on the Guide to Hick’s Law – why are users do not convert. It is a in-depth article where I go into the details of why the more options your user has the longer it takes to make a decision or maybe they get overwhelmed and not make a decision at all. 

Ux designers are not sales people,  however we still need to make sure that the business goals are met while the user feels least frustrated while completing their journey. While designing  Uprising page or Uprising table we are not trying  do push the business goals on to the user rather than the Hue X bushing and making decisions for the business itself this is a very good example of when the user experience directly affects the way the business tries to sell making it the most easy for the user to meet their goals on the website or app.

The three-box strategy. 

I first came across this strategy while I was studying how Apple comes up with their iPhone models and why some iPhones sell more than others. If you take a look at recent iPhone models and releases you’ll notice a pattern. There are 3 models each time since the launch of iPhone X. there are some other versions available at a cheaper price but those aren’t marketed as heavily as the three main contenders.

The “Cheap” one

This option is the one that has the lowest value and definitely has the least number of features or benefits available.

The Prime product

This option has the most value for money and also showing the most popularly needed/used features of benefits.

The expensive product

This option is the most expensive and usually caters to the 20% of your users who have specific needs and are willing to pay for their very specific problems to be solved.

We can clearly see a similar pattern in some of the most popular subscription based apps and websites.

#Name of App/WebsiteNumber of Pricing Options
1Slack3
2Netflix3
3Figma3
4Mailchimp3+Free
5Hubspot3
6Intercom4
7Shopify3
8Microsoft Azure3
9SemRush3
10Amazon Web Services3
11Hotjar3
12Miro3+Enterprise
13Monday.com3+Enterprise
14Google Firebase2
15Squarespace4
16Asana3+Enterprise
17Airtable3+Free
18Webflow2

How to design the pricing page?

Let’s take a look at how the masters do it. Did you notice any pattern here? Most of them have one of the columns looking different from others. For this we need to understand the Von Hestorff Effect. The Von Restorff Effect, also known as the “isolation effect”, predicts that when multiple homogeneous stimuli are presented, the stimulus that differs from the rest is more likely to be remembered. In that case we let the user’s attention easily drawn the column that is the most likely to benefit a majority of your users. Typically this is done using brand colors to accent the column or buttons, adding shadows, making the size of the column bigger than other columns.

Squarespace Pricing table highlights Business Plan.

When to avoid Restorff Effect?

You can totally avoid using this principle in your pricing tables. There’s always a reason behind what we design and create. You add shadows, colors and other effects into one of the three columns to draw your user’s attention to one of the few options presented to them. However when your website or app is offering a high priced service the designer wants the users to read through each and every column carefully before making that purchase. This happens so to avoid the user from making the wrong purchase. In the instance of slack. Slack keeps all of their pricing  columns as identical as possible, forcing the user to read through them all carefully before making a purchase. This is also useful when the user can’t upgrade or downgrade their subscriptions.

Slack’s pricing page.
Ashish

Author Ashish

More posts by Ashish

Leave a Reply