WP Engine Redesign Harnesses the Art and Science of WordPress for a Powerful Product Demo

A stylized photograph of a workstation with a large iMac screen that features the WP Engine website home page, circa 2017.

Project Overview

WP Engine is an industry-leading WordPress hosting platform. A challenger in the Adobe Experience Manager, Sitecore, and Acquia space, WP Engine is the only one built on an open-source framework that powers 37% of the internet.

In 2017 it was time to refresh the brand and redesign the website. This website would be scalable and become a product demo for WP Engine. It should challenge misconceptions that WordPress is just a tool for blogging and demonstrate the power of WordPress when building modern websites.

The WP Engine home page before the redesign. The hero section on the page features an image with a black overlay and white text on top, which is very hard to read. The rest of the page features a lot of white space and a generic layout. The two most dominant colors on the page are orange and black.After the redesign, the home page is vibrant and alive. The hero section features a large WP Engine logo that has been stylized as a powder burst and sits atop a dark navy blue background. The text has been enlarged and given more weight to increase the contrast and help with readability. The section features some bragging points and big numbers. The most dominant colors on the page are purple, navy, blue, and teal.

WP Engine Home page before and after the redesign.

Integrations

  • A bespoke form builder plugin connects WordPress forms to HubSpot via their API. Automated workflows on HubSpot’s side take over and route messages to the proper places, such as Salesforce or nurture campaigns.
  • A customized LiveChat integration improves the sales experience throughout the site.
  • Content such as phone numbers, addresses, and customer logos are localized for the user via WP Engine’s GeoIP feature. 
  • Integrations with third-party partner program management tool, Allbound, create a recruiting portal for agencies to partner with WP Engine and surface partners to customers seeking trusted agencies to hire.
  • Articles from WP Engine brands Velocitize and Torque are pulled in via the WordPress REST API.

Components

One of my primary tasks was to create a library of systemized components for various types of content. This included small components, such as number tickers for countdowns, large components for entire sections, and global components that could be changed from one place and updated everywhere on the site. These components could be used interchangeably and in various configurations to build on-brand pages by anyone with access to the websites. Our team of developers then integrated this system of components into Beaver Builder, a page builder plugin for WordPress. With this foundation in place, we moved on to creating a system for publication.

A screenshot of the plans page before the redesign, which features the same basic patterns in the home page. The plans show up well below the fold of the page.A screenshot of the WP Engine plans page after the redesign. Through testing, we determined that the conversion rates were being negatively impacted by the content on the page. We removed all content except for the plan tiles.

WP Engine Plans page before and after the redesign.

Systems and Processes

When a new page on the site is needed, stakeholders will meet with the copywriters to develop the content and goals for the page. During this process, the copywriter will reference the design style guides as they write content for the page. Once this process is finalized, the content is handed off to a designer who builds the page in WordPress, using the library of custom components in Beaver Builder. The vast majority of the pages built will never require a developer!

Copywriter

Designer

Stakeholder Approval

Stakeholder Approval

Publish

Design is often augmented by imagery so I created a library of reusable and branded image assets that can be placed on any page and are named in such a way that they can be found easily when searching the WordPress media library.

Democratizing the Process

As an organization grows, its systems must scale. After vetting the systems and process we put in place with the design team, we began to train additional teams on how to build their own pages. I documented these processes with step-by-step guides, screenshots, and tips for finding approved image assets in the ever-growing media library. Our developers created custom WordPress user roles that let each user see only what is needed. 

Today, when these teams build their pages they submit them to a designer for review. This designer reviews the page to ensure brand consistency and publishes it. This shift in workload results in pages launching faster and frees up designers and developers to innovate new and engaging experiences elsewhere on the site. 🚀

Project Details

My Role
Information Architecture
User Experience Design
User Interface Design

Project Type
Product Design

Team
Mary-Ellen Dugan, Chief Marketing Officer
David Fossas, Brand Director
Alan Garcia, Digital Marketing Manager
Elana Weinberg, Creative Director
Chad Shore, Project Manager
Jason Cross, Lead Designer
Stacey Lane, Designer
Killian Hagen, Copywriter
Kat Cox, Copywriter
Ryan Hoover, Lead Developer
Zack Rothauser, Developer
Christopher Garza, Developer

Core Competencies
User Experience Design
User Interface Design
Prototype Design
Accessibility
Agile Methodology
Information Architecture
Wireframing
Conversion Rate Optimization

Skills
Adobe XD
Adobe Photoshop
Adobe Illustrator
Google Analytics
Google Optimize
HotJar
Hubspot
ScreamingFrog
JIRA & Confluence
Usersnap
WordPress

Project URL
https://www.wpengine.com

Official Case Study
https://wpengine.com/wp-engine-case-study/

Copyright
WP Engine

Awards
2019 dotCOMM Awards, Gold – B2B Website
2018 WebAward – Outstanding Website

Other projects