top of page
Blue gradient.bkg_tiny@2x.png
Goldie_Logo_white@4x.png.png

Pricing Redesign

Refreshing a pricing page to improve clarity and to meet new standards

Tooltips - 3 cards.png

Goals

Relaunch the pricing page to better showcase our offerings while increasing our conversion rates.

SurveyMonkey Pricing Page

SurveyMonkey is a company that provides a survey platform for users to ask their customers, organization, and peers, for feedback. A company 20 years running that recently launched a refresh of their brand, I was tasked with continuing the initiative of improving and innovating their product, starting with the pricing page.

 

The pricing page was long neglected and now needed the attention to fit with the new brand. This was an opportunity to re-evaluate if our offerings were clearly promoted on the pricing page, considering the layout, the features, and the content.

Role

Product Designer, Growth

Previous pricing page

Mobile pricing- existing with phone-tiny

Problem

Our initial assumption was that there was just too much content on the pricing page, making it hard for the user to choose a plan; also the hard grid lines further distracted from the content of the page.  

Existing pricing page_2x-tiny.png

User testing results

After recruiting some users for testing we discovered our assumption was correct. The page required a high cognitive load and it was hard to see the differentiation of the plan packages.  While users had several different ways to make a decision, the one thing that all users agreed on was that they liked the ability to compare across plans and the anchor helped them make a decision. 

Here’s what we discovered:

  • Users wanted a plan that worked for them, but they didn’t want to sift through all the features. 

  • User valued the ability to compare features across plans

  • New users needed to read the tooltips to understand what the features were and tended to err on not needing the features they didn’t understand. 

  • Users who were familiar with survey software had specific features in mind that they use in their surveys and searched for them. 

Results

+5%  conversion increase

The 5% increase in conversion did not affect our annual package purchases negatively. This held steady for 6 weeks and became our new default page.

Hypothesis

We hypothesized that by improving the pricing page,  providing more visual clarity and comprehension across plans we could increase the conversion of unpaid users to paid users.  We conducted several tests isolating layouts, feature language, the order of plans, and readability before we converged on a clear winner. 

What we changed

The new pricing page was refreshed with our new brand scheme and structured with a card layout that showed the most important features in each plan. Users were able to read the features in each plan card and still compare across the plans. More drastically, we reduced the prominence of the free plan which did not decrease the number of users signing up for the free plan as we expected.

The comparison factor

Keeping the user studies in mind, we allowed users to compare across plans by highlighting the feature across all plans and opening a tooltip on the hover. This allowed the user to quickly see which plan the feature was offered in and they could quickly see what the feature did. This eliminated an extra click to view the tooltip.  

Winning Experiment

Tooltips - 3 cards.png

Experiment 1

Pricing - 4 cards.png

Experiment 1 Results

+2% conversion increase

-18% in annual package rates

What we learned

The new card layout and refreshed look was increasing our conversion, but didn't have the desired plan package mix that we would have hoped for. 

Experiment 2

Pricing- Short summaries.png

Experiment 2 Results

-7% conversion decrease

What we learned

In this experiment, we merged multiple elements together, adding illustrations, breaking up the content, added marketing text, and more substantially, we listed features in an additive fashion.

Ex: If the user chose the Advantage plan, they would also receive features in the lower tiered plan.

 

We discovered in qualitative testing:

  • Users have a hard time reading the features in a left-to-right horizontal fashion

  • Users couldn't compare feature-to- feature across the plans

  • Users tended not to scroll down, which indicated that the cards were too high above the fold and there was no signifier for the user to scroll downward.

Redesigned Pricing Details Page

Apple iMac@2x_TINY.png

Results

+2.2%  conversion increase

The 2.2% increase in conversion showed that users were purchasing the Advantage plan.

Pricing Details Page Redesign

Knowing that the main factor of a successful pricing page is the ability to compare, we also experimented with our pricing details page. With so many features, we kept the pricing grid because it was the best layout for seeing all the features across all plans. The goal was, again, to update the UI to match the brand, but also to provide functionality for users to easily find what they are looking for, such as collapsible sections and cleaner UI.

What we learned

After several small experiments adjusting color and copy, we finally landed on a pricing details page that converted users to paid users. We ran several rounds of user testing and discovered that the colored column on the Personal Advantage plan helped users anchor to a plan and make a choice.

Experiment: Features By Category

Final Features by category_tiny.png

Experiment: Teams Additive Pricing

Team Additive Pricing_tiny..png

Next Steps

On our Growth team, we are always looking for the best way to optimize our pricing pages, as we add more features and try to make it easier for users to understand. Experiments like the above, are examples of how small changes make big impacts on our pricing page and it's extremely important to understand our users as we improve and move our initiatives around. 

bottom of page