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.
WP Engine Home page before and after the redesign.
- 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.
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.
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!
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. 🚀