In 2022, VMware had an executive goal to pivot their focus to be SaaS-first and a leader in the Multi-Cloud. With the launch of the newly redesigned SaaS product pages in early 2023, leveraging pricing was the next step. I was the lead designer to research and create a customer-focused pricing template to align pricing across the company portfolio.

CompanyVMwareServicesUX Design, ResearchYear2023

The Challenge

Many business units at VMware hesitate to show pricing on their product pages because they fear that the displayed prices may not accurately reflect the complex and individualized pricing structures for each business, potentially discouraging potential buyers.

In turn, this caused:

  • Only a few products show pricing
  • Products that show pricing are inconsistent
  • Current feature comparisons have too much content
  • Content is not easy to scan for both summary cards and table designs

Goals & Objectives

In order for VMware to be a SaaS-first, customer-centric company, leading in the Multi-Cloud world, showing product pricing is key to gaining customer trust with the brand.

The goals are to:

  • Show Pricing: Be transparent and show pricing, even if it's starting or sample pricing.
  • Compare Offerings: Use simple language so the user can quickly gather information.
  • Standardize Design: Create a template for pricing and feature comparison.

My Role

I led the user experience by:

  • Conducting a thorough competitive analysis and desk research
  • Iterated designs for A/B testing
  • Created final pricing flows and page templates for implementation

Discovery

Competitive Analysis

I completed a competitive analysis on 8 direct competitor companies and 4 other service companies as inspiration.

Key findings & highlights:

  • Product Page: Product pages utilized summary cards for a quick overview.
  • Pricing Page: All products utilized a dedicated, in-depth pricing & feature comparison page.
  • Pricing Visibility: 10/12 of the companies showed pricing.

Desk Research & Analytics

Through reading many articles from prestigious companies that are held in high regard in the UX community, I found a lot of helpful insight.

Key findings:
  • When users are in an early research stage, they are collecting information from multiple companies to compare products.
  • Provide users an easy way to scan the most important features on the product page.
  • Reduce cognitive load by limiting the amount of offerings to compare.
  • Do the work for the user.
  • Show pricing (even for B2B sites).

Ideate

Focusing on best practices and what users want to see when looking at pricing, I created a handful of iterations for what this could look like.

User Flow

I created a user flow while thinking of where the customer is in their journey. When a user is in vmware.com they are in the Consideration Phase where they are weighing different offerings that can solve their problem. This is where we need to give them a rich, concise summary of what the product is, including pricing.

The recommended design is to show pricing summary cards on the product page and to show pricing cards and a feature comparison table on a dedicated child page for pricing.


Test & Iterate

A/B Test

A stakeholder requested the feature comparison table be shown on the product page rather than the pricing cards. We decided to conduct an A/B test on a highly trafficked SaaS product page.

Design A: Summary Cards

  • Easy to scan and compare
  • Introducing color and CTAs
  • Can easily discern more important offerings with color band at the top
  • Short, concise content for each checkmark
  • CTA below cards is intended to view the full pricing page

Design B: Comparison Table

  • Easy to scan and compare
  • Can easily discern more important offerings with color band at the top
  • Limited amount of text for label which causes more information to live in a tooltip
  • Limited to a max of 6 rows of information when on the product page*

*Because of our new anchor menu tabs, all information is on one page. If a table has too much content, this can elongate the page significantly.

Test Results

Based on the A/B test run on the vSphere product page, results showed in favor of Design A: Summary Card over the Comparison Table on the product page.

Highlights:
  • 42.08% lift in action-based engagements for the enhanced card design.
  • 300%+ lift in Product line comparison CTR from the former design.
  • 176% lift in the ‘Talk to an Expert’ CTR from the former design.

Analytics

I also used FullStory to look at click maps to see the click rank of “Pricing” and “Compare Editions” in the secondary anchor navigation in our new SaaS product pages. The click rank is the most clicked element on the page overall.

FullStory Click Map


Design

With initial design recommendations validated by testing, designs for summary cards and the feature comparison table were handed off to IT to develop enhancements. The summary cards would be used on the product page and the feature comparison table would be used on the dedicated pricing page. 

I collaborated with a content strategist and handed off the designs to another UX designer to fill in pricing information into the new templates for SaaS products with existing pricing.

Company Impact

Aside from redesigning the SaaS product pages, adding and redesigning the pricing experience was the next big milestone in creating VMware to be a SaaS-first, customer-centric company and leader in the Multi-Cloud world.

By showing prices and simplifying the features shown to a user, VMware can gain the user’s trust and are more likely to convert into a sale.

Privacy Preference Center