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 - 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").
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.
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.
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.
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.
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.
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.
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.
Slides in collaboration with PM Sarah Seaton
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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 plan excerpt
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).
This centered toggle was the most noticeable to all our testers.
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.
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.
This led to the most successful understanding of how the savings is calculated due to the "original" price vs. "your price" positioning.
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.
You can review the final prototype on InVision below.
© Kim Kiser Ramirez 2018