Project / Design System Redesign - Expansion

Insight

In today's digital landscape, design systems play a crucial role in enhancing productivity, streamlining development, and ensuring a consistent visual identity across digital products. However, translating these promises into reality often poses greater challenges than teams anticipate.

In 2021, Pacific Life took a significant step by launching its inaugural product-focused design system. While this initially strengthened the online presence of the Pacific Life brand, a year later, persistent challenges emerged, significantly impacting both the maintenance and expansion of the system.

Project

In 2022, I collaborated with Pacific Life's design system team to tackle these challenges. Our partnership focused on expanding the component library and boosting its adoption among product teams. Working closely with design leadership, product, and engineering, I addressed core inconsistencies and introduced new components with enhanced properties, leading to a significant increase in the systems adoption and expansion. This success paved the way for a comprehensive overhaul of the entire component library, documentation process, and a restructuring of the online style guide, ultimately resulting in a 50% reduction in time required to expand the component library and an 85% increase in adoption.

Challenge

Initial interviews conducted across product teams revealed a lack of critical components and underlying complexities were at the core of low adoption, centering around a dual issue of excessive technical details and inconsistent documentation.

Strategy

To discover additional opportunities and resolve the core issues we initiated MVP sprints, prioritizing the most highly requested missing components. Simultaneously, we explored innovative approaches to simplify and streamline component properties and usage flows, allowing us to address the most critical adoption difficulties. Finally, competitive research was conducted to ensure new solutions and advancements aligned with industry best practices of leading design systems.

Process

In efficiently prioritizing and validating new solutions during the MVP phase, I engaged with multiple components concurrently, leveraging their shared structures. This method facilitated the testing of crucial decisions and the validation of substantial changes to the process and structure of these components with clarity. Additionally, it supplied the quantifiable data essential for implementing these changes across the entire system.

Structure

To address designers' complexity challenges with the original components, I directed my efforts toward simplifying component structures. This entailed removing both nested and master layers, and integrating advanced component properties directly into each component. The resulting updates provided designers with immediate access to all variants and rules, eliminating the need to navigate through layers or refer to library documentation. Additionally, these changes allowed the design system to showcase all core component variants within the system, while simultaneously reducing the component library size by nearly two-thirds.

Customization

Following the simplification of the new components, my focus shifted to addressing the high detach rate. Typically stemming from components not meeting designers' needs, I concentrated on enhancing customization and flexibility. Starting with icons, I introduced swappable icon wrappers, enabling designers to interchange icons within components while maintaining attachment to the system.

Building on the success of the icon wrapper, we implemented swappable controls in our new form and action list components, allowing complete customization of the most requested and complex elements in the library. This approach incorporated all potential variants directly into each component. When coupled with advanced properties, the new swappable component systems resulted in a 40% increase in design output during tests.

Documentation

While advanced properties facilitate designers in easily identifying a component's variants, maintaining consistent documentation systems remains crucial for ensuring a clear understanding of a component's true behavior by both design and development teams. Any inconsistencies in patterns within a design system can directly impact its functionality and increase maintenance costs.

To address documentation concerns at Pacific Life, I prioritized the establishment of straightforward and consistent guidelines. This involved removing complex, mislabeled, or incomplete documentation patterns. Clear labels, diagrams, and additional guidelines for the online style guide played a critical role in helping designers better discern differences between types, states, and variations.

Success

The success of the MVP sprint and its ability to validate product solutions and project timelines provided us with the opportunity to incorporate and scope these changes into the full design system. With validation and adoption of MVP components, we rolled out advanced properties, swappable controls, and updated documentation to the rest of the component library. These enhancements not only improved adoption by 85%, they allowed us complete updates to the rest of the component library 50% faster than existing processes.

Impact

In a dedicated six-month effort, we successfully transformed the Pacific Life design system, overcoming challenges through strategic innovation and a commitment to simplicity. This resulted in a streamlined and adaptable design ecosystem, marking a story of resilience and success. Beyond the project's brevity, a profound impact unfolded—our dedication to user needs, strategic simplification, and meticulous documentation empowered designers within the Pacific Life ecosystem.