PANTHEON  |  New Plans Launch and Purchasing Experience

To support Pantheon's updated pricing and packaging for the first time in company history, we updated the product to proactively communicate the value of the platform while minimizing the perception of commodity web hosting, redesigned the entire checkout experience to align with expected e-commerce patterns, and designed a new annual billing option. These product improvements contributed to the company's accelerated revenue growth year over year and the company's increased sales efficiency.

before-how do I buy

BEFORE - Purchasing Experience

Users don't know how to buy a site

When a potential customer is ready to launch their site and needs to purchase a plan, they will find no obvious way to do this from their site dashboard. In one user test, all 5 testers had difficulty locating the area to buy a plan, with 1 tester giving up (it's under "Settings").

before – blocker

Purchasing experience creates friction

Once a user found the purchase area under site settings, they were blocked from even being able to see the offers available by this modal asking them to first add a credit card. This is unusual and creates friction for customers used to making purchases online, wherein they select the items they want to buy first and then give their billing information.

before – select plan

Offers are unclear

If users added their credit card and returned to this screen, they would find a minimal presentation of the offers available, which doesn't communicate the value Pantheon can bring them, or help the user understand which plan was the best choice for their site requirements.

OBJECTIVES
 

To improve the user experience and meet revenue goals


1  /  Improve value communication in order to help the customer choose a plan.

2  /  Create a more intuitive checkout experience and a more obvious means to buy the site.

3  /  Minimize pre-existing perceptions that the customer is buying commodity web hosting.

 

USER RESEARCH

What product capabilities do our existing customers find most valuable?

We started with user research and conducted several surveys to learn directly from customers what they found most valuable about Pantheon. 

new plans research plan

Research plan excerpt

In order to put our best foot forward in the new plans presentation, we needed to learn what our differentiators are from our customer's point of view. We asked which product capabilities did customers most value and were most willing to pay for. 

feature pref – results

Slide in collaboration with PM Sarah Seaton

We learned the feature alone doesn't describe the benefit

We discovered customers valued features lower when the benefit wasn't clear. For example, only stating the feature name like "Redis" often does not make the benefit obvious, especially to customers who may be site owners but not developers themselves.

 

redis ex

During later testing of the plans, we iterated on the copy to improve the value communication.The next iteration of "Improve load time", describes what Redis does but there was no improvement from testers.

Only when focusing on the end benefit "Increase engagement and conversion of your users through quick site load times" resonated much more with testers, who reported their clients will care a lot about anything that has a chance at increasing their business metrics.

value comm 2

Slides in collaboration with PM Sarah Seaton

USER RESEARCH

What should we name the new plans?

Names handle a lot of heavy mental lifting

Since user testing showed us that customers rely heavily on the name of a plan to help make a selection, we invested in brainstorming and testing the names of our new offers, which will replace our legacy plans. We tested the names in a survey.

For what ended up as the Performance plan as our main value prop, we looked a name that tested positive across the board. For the less robust Basic plan we looked for a name that tested neutral, in order to make Performance look more attractive.

name survey example

Purple is most recommended, blue is least recommended. In this result, our working name "Essentials" tested into the top slot as the most appropriate name for the website type. We ended up choosing "Basic" as the more neutral option, in order to make our main value prop look more attractive.  

DESIGN ITERATION

How should we present the new plans in order to most effectively communicate the value?

I iterated and tested several presentations of the new plans. I paid special attention on the copy to highlight differentiators identified by our customers, and emphasized what the customer will be able to do once they've bought the plan.

For example. a customer buying a Performance plan for a site integral to their business's revenue stream cares about uptime, conversions, and being able to handle traffic spikes.

highlights
round 2 layouts1
round 2 layouts2

Several layouts were tested to learn which variation was most readable and communicates our intended purpose.

The Performance plan, as our main value prop, is available in many size specifications to support nearly every site. Size refers to the amount of traffic and storage a site needs.  This presents an additional challenge, felt especially for site owners who are not developers.  Since many services offer pageviews and storage for cheap, we had to find a way to minimize pre-existing notions of commodity hosting. Pantheon does indeed host the site, but we also offers benefits and tools that other services do not so that development productivity increases and the site performs better for customers' end users. 

I tested variations of how much information to display up front to learn how that affected users' perceptions of the offers.

info extremes

And I tested at what stage in the user flow the customer should select the Performance plan size - should they select a size from the beginning, or should they select it later?

We hypothesized that customers would feel like they receive more value when selecting the size later, which user tests confirmed.

flow arrangement

Interactive Prototypes on InVision

These are just two of the many prototypes used to test the Performance plan size selection as the first step or second step of the purchasing experience.

Through user testing, we learned too much emphasis on technical specifications can lower the perceived value.

For this user test, I gave testers an example site and asked them to buy the plan they would choose for that site. After they bought the plan, I asked them to rate the value they received for the price.  

This tester rated the value a 4/5 in this example not displaying the specs with the Performance Plan.

new plans value test

The same tester who chose the exact same plan in a later question decreased the value they received to a 3/5 in the example displaying the specs.

new plans lower value

In another user test, value actually increased to 5/5 for a tester who chose the Performance plan when they selected the size later, compared to 4/5 when they selected the size first.

2nd step value up

We concluded that showing numbers testers associated with a commodity good distracted from our main value prop. We decided to save the size specification choice for later and focus on use cases and benefits up front.

This approach encourages testers to first consider their goals for the site (such as how important it is to their business), reduces distraction, and communicates value according to what the customer receives, all of which resulted in testers ultimately feeling more confident about their choice. 

upgrade with popover

AFTER - Purchasing Experience

More obvious how to buy a site

We added a prominent "Upgrade" button to unpaid site dashboards. During re-testing, 100% of testers easily knew how to buy a plan (compared with all testers having difficulty before).

plans page

Focused plan selection experience

The Upgrade button launches a new full screen experience. The plans page now presents the offers without obstruction, communicates what customers receive in a way that is relatable, reflects their goals, and helps them choose the best option for their site.

all plans include

A new top section communicates benefits customers will receive, no matter which plan they choose. Here, we highlighted differentiators according to our customers, but also included features that customers considered to be tablestakes (such as free HTTPS) in order to reduce doubt about what is included in their purchase.

new plans – performance size

Commodity is minimized

If the Performance plan is chosen, the customer selects the size they need on the next step. This positions pageviews and storage numbers as more of an afterthought, and reduces the perception of buying a commodity.

enter billing empty

Payment flow aligns with expectations

We redesigned the remaining checkout steps to now ask for the customer's billing information, and added a confirmation screen.

This ordering aligns with e-commerce patterns users expect, in order to reduce friction during the purchasing experience. 

add cc
billing info
new plans – confirm

The confirmation steps adds the opportunity for customers to review their purchase before they commit. Testers felt more confident throughout the experience, even from the very beginning because they saw they would have a chance to review their order. 

Pantheon released the new plans as scheduled in April 2018.  We launched with confidence due to our investment in identifying ways to improve our value communication, testing design iterations to more proactively sell the benefits and differentiators users care most about, and minimizing the pre-existing perception of commodity web hosting through the plans presentation and purchasing experience.

We later iterated on this experience to add an annual billing option.

ANNUAL PLANS
 

After the new plans launched, we integrated a new annual billing option with an incentive of up to 2 months free in order to capture a year's worth of revenue immediately, and reduce risk of churn as we moved existing customers over to the new plans by providing a lower price.

 

Add annual plans

We led with the annual plan in the revised plans presentation, since most of our customers buy websites that will stay up for years and it's the best deal for the customer since they can get up to 2 months free.

plans – preferred – annual

User testing

I planned multiple rounds of user testing to make sure it is straightforward for customers to buy an annual plan, and understandable to customers that they now have an annual or monthly option to choose from. I also made sure I did not introduced usability problems into the existing experience.

test

Test plan excerpt

Toggle iteration

Customers could switch between an annual or month-to-month plan selection, so I iterated and tested several versions of a toggle to ensure it is noticeable. In the earlier versions, many testers overlooked the toggle and didn't notice they had bought an annual plan (don't worry, it was a fake purchase).

toggle iteration

This centered toggle was the most noticeable to all our testers.

centered toggle

Make sure customers know the money they save

I invested time in redesigning and testing the confirmation step to display the annual savings to the customer.

In the first try, the savings was completely unclear to testers and it forced them to do the math if they wanted to know.

savings v1

This iteration does the math for them so the dollars saved was more obvious, but testers were confused at what their actual cost per month was because there was too much information packed into the subtotal line.

savings v2

This led to the most successful understanding of how the savings is calculated due to the "original" price vs. "your price" positioning.

savings v3

This is the final version adding the List price to show customers an even bigger savings for those who qualify for preferred pricing as part of our agency partnership program.

savings v4

You can review the final prototype on InVision below.

© Kim Kiser Ramirez 2018