Price Plans

UX/UI Design | UX Research | Design System | Figma | Adobe XD

At first glance, displaying price plans may seem simple, but there are many intricate factors that affect purchasing behavior.

Overview

EdTech is a company that provides online education resources for teachers to use.

Problem

There were indications that their pricing page was not well understood. Users seemed to get lost, and the UI was quite dated.

Solution

I designed the UX/UI for the pricing page, following best practises and a methodical design thinking process. The solution facilitated easier understanding of the content and changes to the UI allowed for easier navigation.

Design thinking

Process

Discover – Research
Define problem
Ideation – Wireframes
Ideation – Hi-Fi Mockups
Prototype
User Testing
Design Revisions
UI Style Guide
Developer Handover
Implementation Review

Tools

  • Figma
  • Adobe XD
  • Dovetail
  • Userbrain

Team

  • UX/UI Designer
  • Developer
  • Product Manager
  • Head of Design

My role

  • Leading UX/UI design
  • UX Research
  • User Testing
  • Design System
  • Developer handover

Discover – Research

I started off the project by looking at the various data points where I could discover what the issues could be. These included:

  • Usability studies
  • Customer service chats
  • A/B tests
  • Analytics
  • Survey feedback

Customer service chats and survey feedback

Customer service chats and survey feedback revealed that users often asked what items in the pricing table meant.

A/B tests

Previous A/B tests revealed that FAQs were particularly important in the purchasing decision, however FAQs contained information that was incorrect or not related to the plans which the user was viewing.

Usability studies

I used Dovetail to analyse existing user testing videos and correlate pain points for users and usability issues. These studies revealed that users were generally confused by differences between plans, feature information, and pricing structure.

Accessibility issues

Analysis of the UI revealed there were accessibility issues regarding the contrast ratio of the buttons.

 

Best practises

I researched what the best practises are for pricing tables and pricing plans. This research revealed a number of important factors that are important to users and also UI patterns that influence user behaviour.

These are some factors that can affect a user’s decision to upgrade or purchase

  • Pricing model
  • Clarity and data density – How much information are we giving the user? Is it causing analysis paralysis?
  • Price anchoring – discounting
  • Ordering of pricing tiers – High to Low or Low to High
  • Call to action – highlighting tier, CTA button contrast
  • Center stage effect – middle tier is perceived as the most value for money
  • Charm pricing – ending is a ‘9’. $4.99 is read as $4 as opposed to $5
  • Social proof
  • Trust signals
  • FAQ

SaaS pricing models

I researched what the possible SaaS pricing models were to better understand where the current pricing model fitted and whether it could be causing confusion.

The most common models are:
●      Flat-rate pricing
●      Freemium model pricing – EdTech personal plans
●      Tiered pricing – EdTech personal & school plans
●      Per feature pricing
●      Per user pricing (inactive) – EdTech school plans
●      Per user pricing (active)
●      Usage-based pricing

For teachers, EdTech had a freemium model that was closer to a trial as well as tiered pricing. While for schools, the pricing model was per user (inactive). There seemed to be indications from survey results that the freemium model that acted like a trial was confusing and frustrating to users.

Competitors and other organisations

I researched competitors’ pricing information to learn about their UX and UI approach. To get ideas, I analyzed how companies like Netflix, Monday, and Slack showcased their pricing plans.

The toggle switch concept. Is it a problem?

The monthly / annual toggle switch concept enables users to switch between monthly and annual pricing. The annual price is shown with the equivalent monthly value.

I have come across this pricing toggle switch pattern on the pricing pages of numerous organisations. Because of the prevalence of its use, it could lead one to think that this is a UI pattern that users are familiar with, find useful and understand. However, I had some hunches that this pattern was not user friendly.

Heuristics

From a heuristics standpoint, you are requesting that the user retain multiple numbers in short-term memory. While doing that, they need to compare them with each other, and then make a purchasing decision. That is a lot of work for the user.

Research

While there were a number of articles that suggested using the toggle switch. I could not find any actual UX research that validated this UI pattern. 

User flows

From analytics, I could document some flows a user takes to the price plans page.

What was interesting is that most traffic did not come from the visitors entering directly to the homepage, but from Google searches that landed the user on activity pages and category pages. Some users may never see the homepage or the features page before landing on the price plans page. They may also never have created an activity or fully understand what an activity is. The knowledge that a user has about the features and product could vary greatly.

I was mindful of creating UX copy that didn’t assume user knowledge of features. And using UI elements that allowed for deeper discovery of terms if the user needed more understanding.

Define

Defining the problem helped me to focus on what the goal of the user was instead of what the possible solutions were. This is an important factor as the solution that the user needs could be entirely different from the current implementation.

The Problem

Users cannot understand the various data points (information) presented to them in order to make an easy decision regarding purchasing.

User needs statement

A teacher needs to quickly and easily understand why she should subscribe in order to spend more time on things that matter for her lesson preparations.

Ideation

Using the insights I gained from the research and problem definition, I was now in a position to ideate on possible solutions. I created lo-fi wireframes of a number of different ways of displaying the pricing plans table.

Refining ideas and wireframe

I then discussed the various options with other members of the team. One idea was picked to focus on and I integrated feedback into further iterations.

Ideation – Hi-Fi Mockups

The wireframes served as a basis for designing hi-fi mockups. The iteration process continues with the UX and UI being further refined.

Internationalisation

EdTech provided their application in multiple languages and variations with other foreign languages and RTL flows were created.

Design reasons

There are many subtle reasons why I choose certain UX and UI design elements and patterns. Here is a snippet of a few of those reasons.

Rule of Three

The rule of three is a common technique used in communication. It makes it easier to take in information and compare options. I applied this technique in the following ways:

  • Three introductory benefits – bullet points prior to pricing table to relay concerns and highlight ease of use.
  • Three columns – Odd numbers allow for centre stage effect Three rows
  • Three FAQ groupings

Round corners

We perceive round corners as softer and friendlier. Round corners also move the users’ focus to the centre – thereby bringing focus to the content or button label. In contrast, Sharp/hard corners are more abrupt and cause a user to stop and think.

Table layout

The horizontal lines help the user scan similar features across the plans. Vertical columns help users group features for specific plans, with the “Who is this for” text below the price to assisting the user in choosing the right plan that fits their needs.

Price amounts

Price is the important information a user looks for first. This is the most prominent information other than the upgrade button.

Annual price per month is not shown by default as the prices have decimal values which make it harder for a user to parse and compare.

To draw the users’ attention, the yearly saving of 10% is highlighted in red.

Info icon

The [i] icon provided a tooltip with a more in-depth explanation of the feature.

See more features

Anything that is part of the table becomes part of the analysis. To remove cognitive load in the decision process, features that were common across all plans where move to a “See more features” toggle panel.

Bulk pricing

The price structure was focused on individuals, so I moved the bulk pricing for schools to the bottom left corner of the table, a less prominent place. 

Before

After

Prototype

A protoype was created so that it could be used for user testing.

User Testing

Test scripts

I wrote tests scripts that could be used in the user testing.

These scripts outlined:

  • The purpose of the testing
  • Who the intended audiences were
  • What tasks they were required to perform
  • How the tasks correlated to anticipated insights

Running user tests

The test script was implemented on Userbrain, the unmoderated user testing platform. Demographic criteria were chosen and qualifying questions set.

User testing results

After running the tests, I analyzed them in Dovetail to see what insights could be discovered.

Toggle switch problem confirmed

One of the tasks in the user testing script was for the user to get the annual price for a plan. During the session a user actually got their calculator out to work out the value. They didn’t use the toggle button even though it had 10% discount in red next to it.

This confirmed my early hunch that there were usability issues with the toggle switch pattern.

Design revisions

Taking into account the insights gained from the user testing, a revision of the designs was created.

The problematic toggle switch

Annual pricing was now shown alongside the monthly pricing.

The annual price was represented as the equivalent monthly price with the discount. This allowed the user to compare plans and pricing without needing to hold multiple numbers in short-term memory.

The toggle switch pattern was removed. This removed the need for the user to understand the concept, and the need for them to click back and forth between the pricing levels. The visual noise on the page was reduced.

Style Guide

Style guide library

There were many UI inconsistencies across EdTech’s site. Using Figma, I created style guides and a multi-variant component library. I published the library and it was used across design projects. These style guides formed the basis for UI guidelines given to developers and formalised what the design elements should look like.

Implementation

Handing over to developers

From conversations with the developers, I could understand what they needed to implement the designs. I prepared design assets, an inspectable Figma file, and wrote up design notes.

On Github I replied to questions developers had about the implementation.

Reviewing implementation

Once the developer had implemented the design, I reviewed the staging environment and gave feedback on changes that needed to occur before it could go out to production.