Elevating WordPress Hosting

The 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

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 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.