Unicorn Design System

WP Engine

WP Engine is a leading provider of managed WordPress hosting solutions, empowering businesses and developers to build and manage their websites with ease, security, and scalability. 

The company's success is based on a strong commitment to providing exceptional user experiences across its product ecosystem.

  • To achieve this goal, WP Engine has created a comprehensive design system called the Unicorn Design System.

  • The design system is a unified design principles, components, and guidelines framework.

  • The system governs the visual and interactive aspects of the products, providing a consistent user experience to its customers.

My Role

When I started as a product designer, my first task was to maintain the design system.

It was crucial to keep it coherent, efficient, and adaptable to our growing needs.

  • The design system evolved continuously thanks to collaboration and feedback from team members.

  • I created documentation for new components and worked with other designers to transfer all documentation to ZeroHeight.

New Components

  • When I joined WP Engine the Unicorn Design System was well-established.

  • However, some essential components were still missing.

  • Collaborated with other designers to enhance system usability by designing several key components.

  • This included tables, modals, cards, and a date and time component.

Table Component

  • The customer portal contained a variety of table types being used by different product teams.

  • We recognized the need for a standardized table component to ensure consistency and efficiency.

Modal Component

I collaborated with a senior designer to develop the modal and all the variants.

We needed it to provide contextual information and actions without disrupting our users’ workflow.

Focused on clarity, hierarchy, and accessibility to ensure user comprehension and interaction.

Card Component

Working again with a senior designer, we created this card component by carefully considering the visual design and layout to emphasize important content and functionality.

Responsiveness and adaptability across various devices were key considerations during the development process.

Additionally, we paid close attention to establishing a clear visual hierarchy to guide users and facilitate content comprehension.

Figma's properties feature in the new card component

We received a lot of feedback about the flexibility of the design system components and saw that many designers were detaching them.

We added the "slot" component to improve the card customization.

This feature was very popular with the design team. ❤️👍

Date & Time Component

Before I started drafting designs for the date and time component:

  • I conducted an audit of its use throughout the portal. I needed to make sure my design would consider every use case.

  • I reviewed the date and time formatting variations and displays in different regions and cultures. Identified the specific range and level of detail required for date and time information.

  • Confirmed with the engineering team, whether the component could accommodate particular date ranges and time intervals.

  • I used four sets of components to meet the criteria for the user portal.

Results & Impact

  1. The constant evolution of the design system and its alignment with organizational goals maximized its impact on designer workflows. 

  2. Implementing these components resulted in tangible improvements in UI consistency, development efficiency, and user satisfaction across WP Engine's products. 

  3. Key metrics, such as reduced time-to-market, decreased support tickets related to UI issues, and positive user feedback, underscored the success and impact of the design system initiative.

What I Learned

  1. Consistent communication with cross-functional teams is crucial for successful design systems.

  2. Simplifying complexity with design patterns.

  3. Designing for a global audience requires considering the needs of users worldwide.

  4. The design system should be adaptable to changing needs through feedback and iteration.

Next Steps

Although my journey with WP Engine's design system has ended, the system's development and improvement are ongoing. The next steps might include the following:

  1. Continuously improve the design system components based on feedback.

  2. Emphasize comprehensive documentation and educational resources for seamless onboarding and effective use.

  3. Place a heightened focus on accessibility by conducting regular audits and enhancements to ensure that the design system meets or exceeds WCAG standards.

Check out my other case studies.