Elevating WordPress Hosting

Website Design
View the live design here
Note: The live design may differ slightly from what is written here as we have continued to iterate based on ongoing research on the page.
Project Overview
WP Engine is a WordPress hosting company that offers hosting options for individuals, small businesses, agencies, and enterprise companies. As the company has grown, the need for a plans and pricing page that reflects the expansive nature of their offerings grew.

The goals for this project were threefold:
1. Better expose the multiple product lines WP Engine offers
2. Reduce buyer confusion regarding these offerings
3. Clarify the best available options to meet customer needs
Project Results
Based on A/B testing performed upon completion of development, we saw massive improvements with our new design. Most importantly we saw a 22% increase in transactions, a 19% increase in MRR, and a 101% increase in ARPU.

Upon accessibility testing, we were alerted to issues with our layout, especially surrounding the sliders and the comparison tables at the bottom which we tackled in the second phase of this redesign.
A laptop mockup of the design described below
WP Engine
Web Designer
Aug 2021 - Nov 2021
WP Engine is a WordPress hosting platform that offers elevated hosting options for small businesses, eCommerce stores, enterprise businesses, and more. Over the company's 12 year history, their product offerings have expanded exponentially. When I joined the company, the company's product offerings had outgrown the plans and pricing page currently in use. In August of 2021, we were assigned the monstrous task of completely redesigning the page with 3 objectives in mind:
1. Better expose the multiple product lines WP Engine offers
2. Reduce buyer confusion regarding these offerings
3. Clarify the best available options to meet customer needs

The Research

Prior to the formation of our team, WP Engine lacked a UX Research presence in the marketing department. We determined that, for projects of this magnitude, it would be irresponsible to not do whatever research we could. Though none of us are trained UX Researchers, we were able to set aside time and resources to set up both one-click testing and unmoderated usability testing for this project.

With one-click testing, we determined whether our first prototype had the basic functionality required. With so much information on the page, we wanted to ensure that users wouldn't get lost or overwhelmed before we fully fleshed out the design. We saw a 71% success rate with this test, with problems that we felt we could address in the second phase of the project.
13 different testing questions that span 5 different products as well as 5 comparison questions
Each tester answered 7 questions that were randomly selected from this list
With our usability testing, we aimed to discover whether our prototype had any lasting pain points or confusing functionality so that we could further iterate before development. We saw a 100% success rate with our eCommerce questions and personalized plan questions, but only a 20% success rate with our standard plan question. Upon investigation into the specific sessions, a lot of this issue was related to the UI of the slider functionality contained in the tiles. These results forced us to go back to the drawing board with the slider, where I was able to come up with a good, recognizable design.
10 tasks for testers to complete that cover product, plan size, and add-ons. There are also 5 follow up questions for users to answer.
Usability Test Questions

The Design

To begin our design phase, we took a look at the existing plans page and identified what we believed to be the main three flaws in the current design:
1. There was so much information that users get overwhelmed
2. Most of the products remained relatively hidden behind tabs
3. Users were not offered add-ons until checkout, making the products appear less customizable than they actually were
The plan tiles as they appeared before this project
The plan tiles as they appeared before this project
With these issues in mind, we got started on our wireframes. To tackle the second identified issue, we created a single-page layout with all of the available products visible. In order to do this, the plan sizes were changed from individual tiles to sliders on the product tile. This both ties the plan size in with the product it supports and decreases the visual information load that users have to contend with. We were also able to remove some of the product inclusions from the tiles themselves and place them in a different section, reducing redundancy. Lastly, we added a section in each tile that outlined the available plan add-ons, including the additional monthly price.
The wireframe we used for testing
The wireframe we used for testing
Following our click testing results, we identified a few main issues we needed to solve for during the high-fidelity phase:
1. Users had trouble identifying the slider as a slider
2. The add-ons did not stand out enough
3. The different sections on the tile required more differentiation

During our high-fidelity design phase, we made significant adjustments to the UI of the tiles in order to tackle the issues identified during testing, as well as solve other potential problems. We used the functionality of the slider to break up the information within the tile, helping differentiate the sections. We then placed the add-ons directly between the plan size information and the "buy now" button, ensuring it stays in view of users ready to purchase.

One of the most important additions we made was to double the price inside of the plan size section. These plan tiles are all taller than a standard screen viewing height, and we didn't want users having to scroll up and down the page to be able to maintain contextual understanding of what they were purchasing.

Lastly, we color-coded each plan, and used those colors to highlight important features in each tile, such as the annual discount callout, the slider, the "best value" banner located on the professional plan sizes, and the "buy now" button. Using color to distinguish important elements while also contextualizing each plan helps draw users' attention to different aspects of the tiles without being overwhelming. Notably, this was also my team's first foray into the use of intentionally accessible colors, a process we continued to expand upon.

Our plan tiles as we delivered them to developers
The plan tiles we delivered to developers

Our Results

Upon completion of development, the new plans page was tested against the old one in an A/B test where 50% of users were shown the old version and 50% were shown the new version. After a week of data collection, we got the results:

With our new design we saw a 22% increase in overall transactions, a 19% increase in MRR, and a 105% increase in purchased add-ons, blowing our goals out of the water. We also saw increases in on-page sales chats, and a 101% increase in sales-assisted ARPU.

While we were pleased with these numbers, we felt like we could do even better. With whispers of more product lines being added to the page, we took the opportunity to run an accessibility research study on the page, to help shape our next design. We found that, while nothing about the design was unusable (a low bar) it was still a very information-heavy design, and the slider functionality was not as recognizable as we believed. Taking this information, we began iterating on the second redesign, which I cover in my project, Restructuring the Plans Page.

Return to the top of the page