WP Engine ReactJS Component Library

Role & Responsibilities:

Front End Development using ReactJS, Styled Components, Theo, and Storybook

Project Background:

WP Engine gives their web hosting customers the keys to build their best digital experiences using Wordpress.

I joined WP Engine at a time when there was an urgent need for a more disciplined and consistent approach to touching the design of customer-facing tools.

Which versions of UI elements made it into an interface depended mostly on what the individual developer or designer used in their last project, and not on what the UX team had established as the best version of a given element.

Thankfully, the Product organization already understood that they needed to begin to create a design system in order to simultaneously reign in inconsistency and set front end developers and designers up for success in future projects. My work on the design system included a ReactJS component library, front end guidelines, and a robust Sketch library.

Interviews with the product designers on the UX team helped me plan for the components, modules, and page templates I’d need to create in Sketch. At that time, designers had been working from symbols they’d created for themselves, and were placing objects over screenshots.

There wasn’t a dedicated front end development practice within the Engineering side of the organization. The interviews that I conducted with developers showed that those who had some interest in learning Javascript or React were touching the front end without consistent guidance to help them know what to use and when. This led to wildly inconsistent UIs across features that were being designed and developed at the same time.

As some portions of the existing Coffeescript- and Slim-driven front end were being refactored, that presented an exciting opportunity to introduce accessible, syntactically-superior React components as replacements for existing UI elements.

Components have the primary benefit of allowing UIs that use them to “subscribe” to changes from the UX and front end team; the developers managing the components can introduce new design options or changes to a component, and have those updates be reflected across every instance of that component across multiple applications.

A lean component library of pre-built, on-brand elements could also speed up development of experimental UIs outside of the existing customer-facing web hosting management platform.

Results:

From its earliest version on, the Sketch library that I created greatly sped up the mockup process, and helped a brand new designer create his first mockups during his first week on the job.

Working in service to the developers touching the front end, I audited every screen and all interactions across the customer-facing web hosting management platform to document which UI elements could be used with the UX team’s approval, and which elements required deprecation (due to things like poor use of color, inconsistent sizing, and poor contrast).

I translated the audit results into a series of wiki pages that all developers and members of the UX team can maintain. I also created Code Sandbox examples of major elements, like buttons, so developers can easily reference the styling and syntax that’s expected for those elements. This enabled developers to get to work on front end tasks without having to wait for UX feedback (or, at worst, skipping that step and pulling from old examples).

The ReactJS component library that I built was on-brand out of the box and extensible through theming. The component APIs could support theming customizations that made them the ideal tool for use in UI refactoring and redesign projects, within Hackathon projects, and within experimental apps being piloted with customers.

Component Library Architecture Diagram
Component Library Architecture Diagram

Interactive version

A hosted version of Storybook allows for previewing and demo-ing of the components and experimenting with their configuration options, as well as providing a glimpse into additional styled themes being produced by the UX team.

I’m extremely grateful to have had the chance to present all of this work to the CEO of the company, successfully gaining her approval and sponsorship for the continuation of this important project.