WordPress Hosting

Case study: UX Research and UI Design

Retrofitting a strong foundation

In 2014, Media Temple added WordPress Hosting to its suite of web hosting services. The product included a custom control panel — within the scope of the larger Media Temple control panel — that made it easy for users to create and manage their WordPress sites, and offered tools and extras like automated backups, staging sites, git integration, and custom themes.

While the product was performant and had a strong adoption rate, it needed some serious improvement. For one, the control panel never underwent a serious UX process before it was built. There was no on-boarding process for new users and — worse yet — there wasn’t a strong foundation to incorporate new features into the control panel.

With the introduction of a new on-boarding flow, along with a slate of new features, I had the opportunity to seriously reevaluate the product’s UX. I designed a friendly on-boarding process, reorganized the navigation and features in the control panel, and planned the product’s information architecture to accommodate future features.

Mind-mapping the product requirements

The UX process started with a hefty set of user stories. During the on-boarding process, users would now have the option to create a brand new WordPress site, import a WordPress site from another hosting service, or migrate a WordPress site from another Media Temple service. This product update also bundled a few services like 1-click SSL certificate installations.

There was a lot to fit into the control panel. I started by mind-mapping how the user stories translated into features and how those features might be organized in the UI. I also used card sorting with team members to help finesse the control panel’s navigation.

Left: Card sorting results. Right: Features mind-mapped on a whiteboard.

Sketching and iteration

This product posed two big challenges:

First, we had to facilitate the user in creating or migrating their WordPress site on our platform. The onboarding experience had to describe and solicit — in a friendly, human way — technical information like installation directories and FTP credentials.

Second, the various features were dissimilar enough to complicate the control panel’s information architecture. For example, two included SSL certificates are installed on a per-site basis, but Google Apps inboxes are tied to a single domain and on-boarded separately.

With this in mind, I started exploring the user flow by consulting with our engineers to fully understand how our back-end provisions and connects our WordPress Hosting with the rest of our services.

Once the user flow was finalized, I moved on to one of my favorite steps: sketching. I moved quickly to sketching the UI in high-fidelity, which made it easy to communicate my thinking to team members and stakeholders. It also served as a strong start to my wireframing process.

I used sticky notes to map out and reorganize interactions in the control panel.

Wireframing and prototyping

I used UXPin to create high-fidelity wireframes of both the on-boarding experience and control panel UI with extensive notations, based off my sketches. This included a multi-step tour of the product’s control panels. UXPin wireframes are web-based, and I prefer them as deliverables since stakeholders can easily share or comment on them.

Above: Three on-boarding paths. From left to right, create a new site, import a site, migrate a site.

Above: The control panel to manage a single WordPress site, with notations.

Visual design and UI

I worked closely with our visual designer Ryan Morgan as he transformed my wireframes and prototypes into full-fidelity mockups. We developed a card-based style that would allow for future extensibility when new features are eventually added to the panel.

Above: Steps in the on-boarding process.

Above: Managing a single WordPress site.

Above: High-level management of all hosted WordPress sites, with bundled services on the left.

Read the next case study

Back to work

Scroll to top ↑