Building XDS: Allstate’s Unified Design System
Role: Lead UX & UI Designer (Project Lead / Product Owner)
Timeline: 3 months (initial MVP) + ongoing iteration
Supporting Team: Frontend Engineer, UX Designer, Content Writer, Visual Design Manager
Tools: Sketch, Zeplin, Abstract, Jira, GitHub, Confluence
Primary Users: Designers, Content Strategists, Developers, project managers, and business partners across Allstate’s enterprise teams
When every design team starts solving the same problem in a different way, consistency breaks.
That was the reality at Allstate: multiple design teams, multiple styles, zero shared source of truth.
I set out to fix that – and in just three months, we launched XDS, Allstate’s first unified design system - a scalable toolkit that changed how teams designed, collaborated, and shipped.
What is XDS?
XDS, or Experience Design System for short, is Allstate’s very first design system. It had its start from a couple of UI component patterns in a Sketch file passed between designers, but the need quickly grew for something much more robust to encompass our ever-growing needs and vast product library. What is a design system? According to Jeremy Keith of Adactio, "The generally-accepted definition of a design system is that it’s the outer circle—it encompasses pattern libraries, style guides, and any other artefacts. But there’s something more. Just because you have a collection of design patterns doesn’t mean you have a design system. A system is a framework. It’s a rulebook. It’s what tells you how those patterns work together.”
Situation & Strategy
Allstate’s digital ecosystem was growing fast – but every team was designing in isolation.
Sketch files were scattered across drives, color palettes multiplied, and developers often received mismatched designs that slowed delivery. The organization needed a single, cohesive design language that connected hundreds of digital touchpoints and empowered every designer to move faster with confidence.
The challenge:
No prior design system infrastructure.
Only a partial team assigned.
A strict 3-month timeline to deliver an MVP.
Instead of building “just a component library,” I framed the problem as a strategic design operations challenge – one that could improve quality, consistency, and team velocity across the enterprise.
Design Strategy Goal: Build a scalable design system that unifies Allstate’s brand, accelerates product delivery, and creates a single source of truth for every digital team.
To achieve that, I established three north stars:
Usability for designers first – intuitive, easy to access, and fast to adopt.
Alignment with development reality – built with reusability and version control in mind.
Governance that lasts – clear structure for maintaining, updating, and evolving XDS beyond launch.
Task & Research
Before designing a single component, I focused on understanding the people using the system – not just their tools, but their daily pain points.
I led internal discovery sessions with product designers, content strategists, and front-end developers to uncover friction points. Some recurring themes emerged:
“I can’t find the latest components. There are five versions of the same button!”
“Developers get different spacing rules from different designers.”
“We waste hours debating what color blue is ‘the’ blue.”
To build empathy and direction, I:
Benchmarked leading design systems (Material, Polaris, Lightning, Atlassian) for patterns in documentation, taxonomy, and adoption.
Ran internal surveys and affinity mapping to identify the most requested components and the biggest process gaps.
Defined the MVP scope: focus on the core 20 components that were reused most often, supported by naming conventions and usage guidelines.
Key Insight: Designers didn’t just need components – they needed clarity, consistency, and confidence in using them.
Armed with these insights, I built the structure of XDS around simplicity, discoverability, and cross-team usability.
Action & Execution
1. Designing for scale
I adopted the Atomic Design methodology (atoms, molecules, organisms) to create a logical, reusable hierarchy.
Each component was designed, named, and version-controlled in Sketch + GitHub, ensuring visual and technical parity.
2. Building under constraints
Because internal security policies prevented cloud syncing, I engineered a “one-click script” that automatically pulled the latest toolkit from GitHub.
This small innovation saved hours of manual updates and ensured every designer always had the latest version.
3. Documentation & guidelines
I collaborated with a UX content writer to craft accessible documentation that balanced brevity and precision.
Each component page included:
“When to use” and “When not to use” rules
Redline specs
Accessibility and content guidelines
Example variations and tone principles
4. Internal testing & iteration
Before rollout, I hosted internal design labs with 10+ designers to test component discoverability, naming clarity, and documentation flow.
We tracked time-on-task and qualitative feedback – simplifying labels and reorganizing the component index accordingly.
5. Launch & adoption
Once XDS was ready, I led the internal rollout strategy:
Presented XDS in a company-wide “Design Fireside” session
Created a Teams channel for support & feedback
Established governance rituals (monthly audits, feedback submissions, component requests)
Distributed a quick-start guide and “XDS 101” walkthrough
By the end of the first month, multiple teams had migrated their design libraries to XDS.
Result & Impact
Within 3 months of launch, XDS became the foundation for Allstate’s digital design operations.
Impact Highlights:
~70% adoption across design teams within the first 90 days.
30% faster design-to-development handoffs, measured by reduced redline requests and spec clarifications.
40% reduction in redundant component creation across teams.
Improved cross-team consistency – developers reported fewer mismatched assets during QA.
Beyond metrics, XDS changed how design operated at Allstate.
It transformed “fragmented design efforts” into a shared language – one that empowered teams to focus more on solving user problems, not reinventing buttons.
“I’m really blown away by how detailed and easy it was to use this new system.”
Reflection & Key Takeaways
Looking back, this project taught me that building a design system isn’t about pixels or patterns — it’s about people, trust, and communication.
Here’s what I learned:
Governance is design. Without clear ownership and process, even the best components fall apart.
Adoption beats perfection. Launching early and iterating fast helped build trust and momentum.
Cross-functional empathy is everything. Understanding developer and content needs early made the system more sustainable.
Design systems are living products. They need nurturing, education, and iteration — just like any customer-facing experience.
If I were to evolve XDS further, I’d focus on:
Tracking more usage analytics to inform roadmap priorities
Creating video tutorials for onboarding new designers
Exploring Figma migration and integration into design ops workflows