Root: A User-Centric Design System for Sammons Financial
Spearheaded the development of a comprehensive and accessible design system for Sammons Financial, resulting in improved brand consistency, development efficiency, and overall user experience.
Problem
Sammons Financial, with its diverse sub-brands, faced challenges in maintaining consistent design and development practices. This led to:
Inefficiencies in design and development efforts across multiple applications.
Redundant solutions for brands with similar requirements, hindering scalability.
Inconsistent user experiences across branded touchpoints.
Key Considerations
Theming: The design system needed to support customization for each sub-brand's unique visual identity.
Developer Integration: The system had to streamline workflows and accelerate development processes for teams across the company.
UX Best Practices: Inherently promoting UX principles within the design system was crucial to ensure quality user experiences.
Accessibility: Prioritizing accessibility standards (e.g., WCAG) was paramount to cater to Sammons' primary user demographic (60+ years).
Background
Root started as a “grassroots” effort to provide a consistent user experience across Sammons's multiple brands so that our small UX team could support all the development projects. However, the company's limited front-end resources made simple documentation insufficient. The design system needed to be inherently easy to implement and use, making it the most accessible path for developers and the natural default. As the design system gained adoption, marketing identified the opportunity to use it as an asset repository, leading to the integration of a headless CMS.
My Contributions
Leadership: Led the design, development, and ongoing maintenance of Sammons Financial's design system.
Collaboration: Actively collaborated with the UX team to identify and design reusable components aligned with business needs.
Technical Expertise: Developed the design system as an Angular project, distributing it via NPM for effortless integration into development workflows.
Results
Development Efficiency: Development teams reported significant time savings due to pre-built components and streamlined styling.
Brand Consistency: A more cohesive and recognizable brand experience across applications.
Enhanced UX: Standardized UX patterns promoted usability and reduced user friction.
Accessibility Compliance: Improved accessibility scores ensure a positive user experience.