WP Engine Plans
.png)
Project Overview
WP Engine is a WordPress hosting platform that offers hosting to individuals, agencies, and businesses. As the company has grown, its product and plans lines have also expanded. In return, this caused a need to redesign WP Engine's plan page in order to accommodate new plans, and overall improve our buyer journey experience.
Three main reasons for the redesign:
-
Reduce cognitive overload – simplify the process of selecting a plan and reduce friction as well as clutter to increase conversion rate.
-
Bring forward products that are hidden – improve user visibility
-
Re-position our solution options & expose available add-ons per plan – highlight additional products before user goes to checkout.
UX Research & Testing
Before joining the Digital Experience team at WP Engine, project timelines did not take into consideration UX research and testing. Thus, big website redesigns were done without any user research from conceptualization all the way to development. Upon joining the team, I expressed my interest regarding UX research and the importance of adding it into our design process.
​
Fortunately, my team embraced my idea and dedicated time for research and iteration. In addition brainstorming ideas, creating wireframes, and conceptualizing high-fidelity designs, I individually lead the UX research portion of this project. With our limited resources, I set up multiple unmoderated tests in usertesting.com.
​
Below are screenshots of the tasks we asked our users to complete during our two rounds of testing:
-
First Click testing using a low fidelity prototype to gauge if users are able to find what they’re looking for quickly and easily.
-
Usability testing using a high-fidelity interactive prototype in order to gain valuable insight on any pain points or user confusion centered around our design, and additional in depth feedback and improvement suggestions.
First Click Test Tasks
(Tasks were randomized to ensure each user only had to complete 7 tasks)
Usability Testing Tasks
Both tests utilized usertesting.com's panel selection feature that recruits a panel of participants comprised of real people in their natural environment who have been screened to meet the criteria we have set for them through audience selections and screening questions. This ensured that the users we tested were familiar with WordPress hosting, and website development, and in return met our target audience/customer base.
​
After each round of testing, I compiled a miro board in order to summarize the findings of each test while highlighting user frustration points, the time it took to complete each task, task success rate, as well as any feedback and comments that the users had. This affinity map served as a basis for the team to reference while iterating our design.
UX Design
While redesigning the Plans page, our team went through multiple design iterations (wire-framing all the way to final prototyping) before creating our final design that is now live on our website and can be viewed here.
​
Below are some screenshots of a couple iterations with notes detailing our thinking moving from step to step.
Previous Plans Page
Problem 1: These plan tiles included a lot of repetitive information and very little visual contrast between each plan. This makes it difficult for users to identify key differences between each product and plan, and creates decision fatigue.
Problem 2: Not all Products are visible upon first glance. This can cause potential customers to assume that the right hosting plan for them is unavailable through WP Engine, which in return hurts company sales.
Problem 3: Additional plan customization and add ones are not visible until a user checks out. This can cause drop off among users who do not feel like they found a right solution for themselves.
Wire-frame
Products are condensed into 3 tiles, where each tile allows the use of a slider to select the product plan size. This helps reduce the information on the page, move away from using tabs that hide other available products, and introduces an idea of "swim lanes" where users can identify which product is right for in the beginning before moving into deciding which plan to buy.
An all plans feature area below the product tiles helps condense information on each product tile, making comparing each product much easier with less information overload.
According to previous research, our customer base is split 50/50 between users who pay annually vs. monthly. Thus, visibly displaying this toggle on top of the product tiles ensures users can easily compare different prices upon page load.
Add ons and additional features are clearly visible and configurable under each product.
Compare all features button will open up a table that compares different product sizes and their differences.
After conducting first click testing on this wire-frame, it was evident that there were some areas our team had to work on improving in our next design iteration including:
-
Designing a more intuitive plan selection slider, with a UI that is understandable and familiar to visitors.
-
Working on UI elements for the add ons to stand out more on each tile.
-
Creating a better visual separation between each section on each tile.
-
Polishing up our design with the use of colors and visuals.
Final Prototype
Increase visibility as to whether or not an annual discount is applied, which can also drive more annual subscriptions.
Slider has an enhanced design that was tested to ensure that users understood how to use it. Arrows on the slider button were added for an extra subtle visual showing increase/decrease capabilities.
Total plan pricing is included twice on the page to ensure that it is always in view as the user scrolls down the page.
Call out added for our Enterprise plans as requested by our Enterprise team to increase sign ups.
Color is used to establish visual contrast between each product.
Tool tips added to provide additional information as needed.
eCommerce slider is preselected on our best selling plan size in hopes of increasing ARPU.
Enhanced Add ons design and removal of section header connects the adds on to the slider above to push for more purchases and not make the section seem like an after thought.
Overall, our design process included research and constant design iteration. We gained a lot of insight regarding how intuitive our UI elements are, customer pain points, layout confusion, and more! In return that helped us design the best experience possible for our plans page visitors with hopes of it increasing sign ups and monthly/annual recurring revenue.
​
The live page can be viewed live here. Please note that some elements on the page might look different than what is on my portfolio since our team is constantly working on improving our design as we gain more insight and analytics results.
Results
After our developer team finished coding our new plans page, they set up an A/B test on our live site which showed 50% of our visitors our old plans page, but directed the other 50% to a page with our new design.
​
After running this test for two weeks, we could confidently say that our new plans page redesign was a success! Below are some of the results that our new plans page yielded as compared to our old page:
+185% eCommerce plans purchased
+105% add-ons purchased
+101% ARPU
+22% of transactions
+19% MRR
+25% SDR Chats
+10% forms
