Unicorn design system

WP Engine user portal had an outdated and confusing interaction patterns. Users struggled with color contrast and inefficient behaviors. The former design system was built in the old Boostrap framework and not scalable or accessible. We also wanted the design system to match the tone and brand of the marketing .com site.

Company: WP Engine

Role: Senior Product Designer

Partners: Engineering, Marketing, UX Research

Audit

I audited and documented every button, header, and color swatches and all its uses across the portal. We often found four or five different styles for a single component.

Acceptance critiera

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

Design, test, iterate

The design system is a living product that is continously being worked on. 

Due to resources, the team built components as needed vs buildling an entire library and evangelizing. This allowed us to test and iterate quickly when create the first products with Unicorn. if something didn't work in practice, I could rework the component.