Design System: Evolution over the years
Building, Scaling and Increasing Adoption

In today's digital landscape, creating user-friendly experiences demands consistency and efficiency. To enhance our product's user interface,
I initiated the development of a robust design system.

Today, Allstate benefits from a mature Design System implemented across the enterprise. This system accelerates speed to market and ensures consistent experiences across nearly 100 products developed by Allstate UX and design vendors.

The journey began in 2016 when, alongside a front-end engineer, I pioneered the company's first design system. Within a year, we scaled it to support 40 teams. This overview encapsulates the history, current status, and my role in the creation, operation, and governance of the design system over the years.

Design System Timeline

  • 2016 - Creation of React Pattern Library (RPL)

    In collaboration with my technology partner, the two of us created the first-ever design system for applications for Allstate agents. The RPL consisted of design patterns, coded React elements and usage, accessibility, and content guidelines. Within a year, it scaled to 40 teams outside of agent space.

  • 2017 - Governance and Support

    Provided daily RPL support to 12 paired design teams using RPL and guidance for Infosys designers and developers to ensure patterns were implemented correctly. Solidified governance and contribution model in collaboration with my technology partner. Enhanced content guidelines.

  • 2018 -Design System Unification - XDS 1.0

    We worked on the creation of a unified enterprise Design System merging RPL patterns with a consumer-facing library, which was built shortly after RPL. Through the series of working sessions, card sorting, and site mapping, we arrived at a cohesive system - XDS 1.0

  • 2019 - Adoption and Expansion of XDS 1.0

    A designer reporting to me took over my duties supporting agent-facing applications while I still maintained visibility in continuous enhancements to the system and its governance process. It was also a time of increasing adoption and switching some product teams to XDS 1.0

  • 2020 - XDS 2.0 - MESH Development Library

    This year marked the redesign of the patterns to adhere to the new branding and visual identity and coupling them new MESH development library. A new content library was created. XDS 2.0 was used to build key company initiatives and was presented as a source of truth for 79 products and business areas supported by the UX department.

  • 2021 - Dedicated Design System Team Funding

    I collaborated with members of the UX team and IBM consultants on steps to increase our system’s maturity and obtain the funding for the fully staffed, dedicated design system team. Our business case was well received, and the funding allowed us to transform XDS 2.0 into a free-standing product.

  • 2022 - Design System as a Product

    This year marked the staffing of the design system team on both the design and development side. The new team focused on transitioning design patterns from Sketch to Figma and creating an enhanced documentation site on GitHub. The design system was renamed ADS (Allstate Design System).

  • 2023 - Governance and Increased Adoption

    I was focused on governance and increased adoption. I was helping the Claims area to sunset three of their independent pattern libraries and guiding them in ADS adoption. I created a new governance process for a contribution of patterns aimed at the reduction of technical debt.

KEY HIGHLIGHTS

Governance strategy and adoption

My most recent endeavor for the Design System was centered around revising the governance strategy and overhauling the contribution model for new patterns for designers and developers.

In addition, I partnered with the Claims organization to sunset three legacy pattern libraries and adopt the Allstate Design System (ADS) to create consistency with the rest of the enterprise products.

Here are the links to relevant documents attached to these initiatives:

1.

Design System as a product

In 2021, I played a crucial role in the initiative to evolve the design system into an independent product supported by its own specialized team. Collaborating with members of the UX Operations team and IBM consulting arm, we crafted a compelling business case that underscored the strategic significance of the design system, outlining staffing and budget needs. This successful effort secured ongoing funding for the project.

In overseeing 12 paired designer teams tasked with revamping Allstate agents' applications, we discovered rampant design inconsistencies. Each team, though well-intentioned, was inadvertently creating variations of the same patterns. It was time to take action.

Collaborating with a front-end development engineer, we adopted Brad Frost’s Atomic Design methodology to create a pattern library.

HOW WE DID IT

We organized collaborative sessions with product designers to brainstorm and establish foundational components, laying the groundwork for our design system.

By establishing a comprehensive design system, we aimed to:
• eliminate redundancies
• streamline the design process
• ensure consistency across all platforms
• enhance the overall user experience
• expedite development cycles

We talked to our users to understand their needs. We treated internal users
as if we woudl treat customers and cinducted in-depth interviews to understand their needs and build a system that’s simple and usable.

5.

Concurrently, we tackled governance and contribution models. We needed clear guidelines on how designers and developers would contribute to the pattern library.

3.

As the foundation developed, I meticulously crafted these patterns in Sketch, refining color palettes and typography systems. I also articulated usage guidelines and design principles.

6.

We created two Slack channels for design and development support and established office hours to answer questions and guide the teams in component implementation.

An example of conversations on Slack channel for design support.

Allstate Design System Pattern Examples

The Birth of our Design System

4.

At the same time, my tech counterpart spearheaded the development of React components and the establishment of a comprehensive GitHub website.

2.