Product Designer
WPE Unicorn Design System
WP Engine

Unicorn: Accessible design system

Problem

WP Engine User Portal has a outdated and confusing UI and UX interaction patterns. Users struggle with color contrast and inefficient behaviors. The design system is built in Bootstrap and not scalable. The User Portal also did not match the excitement and flash of the .com site.

Old Bootstrap

Plan

  • Must follow W3C AA guidelines.
  • Define new colors based on the .com/Marketing swatches.
  • Design new components from scratch.
  • Create easy-to-use library in Sketch for designers.
  • Build React components.
  • Push adoption through R&D.

Design

Light and dark (future) modes designed.

Test & iterate

Due to resources, the team had to build components as needed vs. building an entire library and evangelizing. This allowed us to test and iterate fast when creating the first designs with Unicorn. If something didn’t work in practice, I could rethink and redesign the component.

Implementation

Unicorn is currently being rolled out with every new page in the User Portal. The system will be tested with screen readers and keyboard-only use and follow AA guidelines.

Tina L. Ho