- Client: Assurant
- Role: Senior UX / Design Manager
- Tools Used: Figma
Establishing a design system for Assurant’s digital landscape.
The Assurant Design System (AXD) was developed to unify Assurant’s digital properties with a cohesive, accessible design language that meets AA WCAG compliance standards. As Lead Designer and later Senior Manager, I led the creation of AXD, managing a team of 7 designers and an intern. Leveraging tools like Sketch and Abstract for design version control, I ensured the system was not only consistent but also adaptable and accessible for all users.
Problem Statement
Assurant’s digital interfaces were inconsistent, with fragmented designs that didn’t fully represent the brand. The need for a scalable, compliant design system became clear to establish a unified brand experience across platforms while ensuring accessibility for all users.
Project Goals: Develop an adaptable, WCAG-compliant design system to ensure consistent, accessible user experiences across Assurant’s public and internal applications.
Process & Research
1. Foundation and Research
-
Audit and Analysis:
Conducted a comprehensive analysis to identify inconsistencies and gather feedback on accessibility needs. -
Component Inventory:
Partnered with teams across Assurant to inventory reusable components, ensuring that AXD would support various applications.
2. Developing AXD
-
Core Design Elements:
Defined the AA WCAG-compliant color palette, typography, button styles, icons, and interactive elements. The system was designed in Sketch, with version control managed through Abstract for seamless collaboration and updates. -
Cross-Functional Collaboration:
Worked with engineering and design teams to ensure AXD’s components were easy to implement and maintained compliance across applications.
Key Insight: Ensuring that all components adhered to accessibility standards was essential for creating a flexible, inclusive design system.
Solution
AXD was built to be a flexible, WCAG-compliant design system, supporting Assurant’s diverse digital landscape:
-
Comprehensive Style Guide:
Created a detailed style guide that provided clear guidelines on colors, typography, icons, and components, ensuring consistency and accessibility across platforms. -
Scalable, Accessible Components:
Designed reusable, AA WCAG-compliant components that could be easily applied to both external and internal applications, ensuring accessibility and brand unity. -
Implementation Across Platforms:
Initially rolled out with Assurant’s website refresh, AXD was later adopted by internal teams, improving usability and reinforcing brand identity across the organization.
Design Iterations and Testing
1. Feedback and Refinement
-
User and Stakeholder Testing:
Conducted testing with internal and external users, focusing on usability and accessibility. Gathered insights to refine components and ensure compliance. -
Iterative Updates:
Used Abstract for version control, making iterative improvements to components based on ongoing feedback.
2. Prototyping in Real-World Scenarios
-
High-Fidelity Prototypes:
Developed high-fidelity prototypes to test component adaptability and compliance, validating AXD’s scalability and accessibility across applications.
Outcome & Impact
The Assurant Design System (AXD) successfully established a cohesive, accessible digital identity across Assurant’s public and internal tools. By establishing design processes and adhering to AA WCAG standards, AXD improved the user experience while ensuring compliance. The system’s adaptability and version-controlled updates supported Assurant’s commitment to an inclusive, efficient digital presence.
Reflection
This project reinforced the importance of accessibility and adaptability in design systems. Leading AXD’s development taught me how to balance brand consistency with compliance and scalability across diverse applications.
Next Steps: Future iterations could focus on dynamic components and adaptive design for mobile accessibility, ensuring AXD continues to meet evolving digital standards.