Jake Smith's Portfolio

Over 15 Years of Experience Building Digital Products

  • Projects
  • Résumé
  • UX Process
  • Insights
  • Hobbies & Art
  • Contact Me

Root: A User-Centric Design System for Sammons Financial

April 08, 2024 by Jake Smith
View fullsize NAC - backgrounds.png
View fullsize Root Colors.png
View fullsize Root Home.png
View fullsize SFG - Backgrounds.png
View fullsize SFG - Basic Switch.png
View fullsize SFG - Card Grid (Component Typescript).png
View fullsize SFG - Card Grid (HTML).png
View fullsize SFG - Card Grid.png
View fullsize SFG - Feedback Empty State (with HTML example).png
View fullsize SFG - Getting Started.png
View fullsize SFG - Group Buttons Basic and Radio.png

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.

April 08, 2024 /Jake Smith
  • Newer
  • Older