MAINTAINING THE UNICORN DESIGN SYSTEM
As a product designer at WP Engine, I was responsible for maintaining our design system. Working in a fast-paced environment, our design system needed to evolve alongside our products. My challenge was to ensure the design system remained coherent, efficient, and adaptable to our growing needs.
I held weekly office hours dedicated to the design system to address challenges in its adoption and maintenance. These sessions provided an open forum for cross-functional teams to discuss queries, share best practices, and propose enhancements. By fostering collaboration and soliciting feedback, the design system evolved continuously, ensuring its alignment with organizational goals and maximizing its impact on workflows.
As part of providing a comprehensive design system, I was responsible for writing documentation for new components. During my time at WP Engine, we migrated all documentation into ZeroHeight. In this initiative, I worked alongside other designers to move assets and documentation to its new location.
DESIGNING NEW COMPONENTS
Upon joining WP Engine, I found that the design system was already well-established. However, there were still some components missing. I took on the task of designing several key elements, including tables, modals, cards, and a date and time component, to further enhance the system's usability and functionality.
TABLE COMPONENT
The table component facilitated the presentation of complex data in a structured and visually appealing manner, enhancing user comprehension and interaction.
MODAL COMPONENT
The modal component provides a consistent and intuitive way to present important information or gather user input, enhancing usability and reducing cognitive load for WP Engine's customers.
CARD COMPONENT
The card component helps maintain visual consistency across the user portal. It provides a defined structure, including borders, shadows, and padding, which create a consistent look and feel throughout the application
The card component utilized the properties feature of Figma that reduced the number of variants needed. Along with this improvement, I added a “slot” component to enable more customization for designers.
DATE & TIME COMPONENT
WP Engine serves customers globally. I needed to consider how date and time are formatted and displayed across different regions and cultures. Creating a standardized date and time component with global considerations creates a more inclusive and user-friendly customer portal.
THINGS I LEARNED
1. Collaboration is Key: By holding weekly office hours, I learned that consistent communication with cross-functional teams is crucial to the success of a design system. This practice not only fosters collaboration but also ensures alignment across the organization.
2. Simplifying Complexity with Design Patterns: Introducing the slot component in the card design demonstrated how simplifying complex structures can increase usability. This approach allowed for greater customization without compromising the standardization that a design system requires.
3. Global Considerations Matter: While creating the date and time component, you learned the importance of considering global users. Addressing different regional formats and cultural nuances makes the design system more inclusive and user-friendly.
4. Flexibility and Adaptability: The design system must be flexible to evolve with the product's growing and changing needs. I found that being open to feedback and willing to make necessary changes keeps the design system relevant and useful.
NEXT STEPS
1. User-Centered Development: Incorporate user feedback and research into the design system's evolution to ensure it remains user-friendly and meets designers' expectations.
2. Simplifying Complexity with Design Patterns: To keep the design system strong, I'll keep having weekly office hours. This gives product teams a chance to talk about any issues, share tips, and suggest ways to make the system better. This collaboration helps ensure the design system stays in line with the overall product goals.