Allstate Design System

Unifying Digital Presence and Enhancing User Experiences Across Allstate's Platforms

Allstate Design - Design Site System Brand Assets

Allstate Design - Design Site Components

As a Lead Software Engineer, I created a central hub and React.js component library, increasing development efficiency by 30%. I led technology and design alignment efforts, which reduced design-related defects by 25% and accelerated feature deployment by 20%. Additionally, I mentored developers, improving productivity by 15% and enhancing code quality metrics by 18%. I also engineered CI/CD pipelines, resulting in a 40% reduction in deployment-related issues and a 35% increase in deployment frequency.

Allstate needed to modernize its digital platforms and create a consistent visual language across all its products. The existing design process was fragmented, with designers passing Sketch files back and forth without proper documentation or versioning, leading to inconsistencies and inefficiencies. This also increased development time because developers couldn’t share interface components due to inconsistencies in design expectations.

Extensive research was conducted to understand the needs of Allstate's designers and developers. This included:

Conducting user surveys and interviews to gather feedback from designers, product designers, visual designers, content writers, and user researchers.

Analyzing competitor design systems to identify best practices and common components.

Reviewing existing design standards and identifying areas for improvement.

Research Goals:

Define user needs and expectations for the design system.

Identify key components and design patterns to include in the system.

Determine the best practices for documentation, versioning, and distribution.

Research Findings:

Designers required a centralized repository for design components, guidelines, and documentation.

Developers needed a code focused documentation solution that provided guidance on using the interface components.

Consistency in naming conventions and component usage rules was crucial.

Efficient distribution methods were needed to ensure easy access to the design system across the enterprise.

Allstate Design - Developer Site Component API

Based on the research findings, the following objectives were defined:

Develop a comprehensive design system that includes a Sketch symbols library, React.js component library, accessible via Node Package Manager.

Ensure the design system solutions were well-documented and easily accessible to all designers and developers.

Implement CI/CD pipelines for automated integration testing and deployment to maintain quality and compliance.

Wireframes were created to prototype the layout and structure of the design system. These prototypes focused on ensuring an intuitive and user-friendly interface for accessing design components, guidelines, and documentation.

Allstate Design - Developer Site Architecture

High-fidelity designs were developed for the design system, incorporating feedback from user testing and aligning with Allstate's brand standards. The design included a central hub for the design language, a React.js component library, and detailed documentation.

As the Lead Software Engineer, I played a pivotal role in the development phase, which included:

Creating a central hub using an extensive Sketch document for the brand’s design language.

Establishing a React.js component library accessible via Node Package Manager.

Collaborating with design and development teams to ensure code quality and uniformity in the design language.

Engineering CI/CD pipelines for automated integration testing and deployment.

Allstate Design - Icon Library Site

The Allstate Design System project successfully unified the digital presence and enhanced user experiences across Allstate’s platforms. The centralized design system improved development efficiency, reduced design-related defects, and maintained high-quality design standards.

Developed Allstate’s first comprehensive design system, starting from initial UI component patterns to a full-fledged system encompassing all product lines. This included creating a Sketch symbols library, a central documentation repository, and detailed component usage rules.

Successfully launched the first iteration of the design system across the entire enterprise, significantly improving development efficiency and consistency. Utilized agile methodologies to manage workload and release schedules, ensuring the system met user needs and was delivered on time.

Established robust communication channels for ongoing support, including a dedicated email inbox, Microsoft Teams channel, and fireside chats. Implemented a script program for easy distribution of the UI toolkit library, overcoming internal security constraints and ensuring accessibility for all designers.

Conducted internal testing and gathered feedback to refine the design system before launch, leading to enhanced user satisfaction and positive feedback from users and stakeholders. The unified and intuitive design system was praised for its ease of use and comprehensive documentation.

Increased development efficiency by 30% through the creation of a centralized design system.

Reduced design-related defects by 25% and accelerated the time-to-market for new features by 20%.

Improved developer productivity by 15% and code quality metrics by 18% through mentoring and best practices.

Achieved a 40% reduction in deployment-related issues and a 35% increase in deployment frequency.