Saffron Design System
Creating multiple consistent, scalable, and brand-aligned web applications across a large company requires more than an agreed-upon design system—it requires structured implementation, clear communication, and organization-wide adoption.
As part of the core team responsible for building and implementing Thomson Reuters’s Saffron Design System, I was key in shaping how UI components functioned across products, ensuring accessibility, usability, and maintainability.
The Challenge: Scaling Design Consistency Across Products
Design systems provide efficiency and coherence, but rolling out a new, organization-wide system in a compressed timeline presented key challenges:
Ensuring Consistency: Components must align across designers, developers, and content teams, requiring rigorous naming conventions, version control, and documentation.
Defining Component Behavior: Each element needed a clear options framework, so teams knew how and when to use them.
Prioritizing Accessibility: The system had to be built with WCAG standards, ensuring equitable experiences across all applications.
Facilitating Organization-Wide Adoption: A design system’s success depends on scaling beyond the initial team, which requires proactive communication and advocacy.
My Role: Leading Form Component Design & Implementation
To ensure the system’s usability and scalability, our team divided core components, and I was responsible for designing and developing all form elements, including:
Input fields, dropdowns, toggles, checkboxes, and radio buttons
Error messaging, validation states, and interactive feedback
Flexible layouts to accommodate different content structures
Throughout this process, I focused on:
High Design Standards: Maintaining open communication with engineering, product, and accessibility teams to ensure each component met functional and aesthetic requirements.
Consistent Naming & Embedding: Establish a structured naming convention for components to streamline developer handoff and ensure future scalability.
Clear Usage Guidelines: Creating a cohesive framework so designers and developers can easily understand how to implement each component.
Built-in Accessibility: Ensuring every component adhered to AA and AAA compliance standards, making accessibility a core principle rather than an afterthought.
Outcome: A Scalable, Accessible, and Developer-Friendly System
The Saffron Design System successfully launched, becoming the foundation for multiple enterprise applications at Thomson Reuters.
Key Impact Metrics
Design-to-Development Handoff Time Reduced by 40% – Clear documentation and naming conventions streamlined engineering workflows.
UI Consistency Improved by 95% – The standardized component library reduced product design inconsistencies.
Accessibility Compliance Achieved Across All Components – Ensured full WCAG 2.1 AA compliance at launch.
Adoption Rate Reached 82% in the First Six Months – Faster-than-expected integration across product teams, improving designer and developer collaboration.
Scaling the System: Becoming a Design System Ambassador
Following the launch, I was asked to serve as a Design System Ambassador, a role focused on expanding adoption and empowering designers across the organization.
Distributed Decision-Making: Shifted design influence from a central team to a scalable, cross-functional approach, giving product teams autonomy while maintaining consistency.
Design System Advocacy: Provided ongoing education, best practices, and documentation updates to help teams integrate Saffron into their workflows.
Continuous Evolution: Encouraged iterative improvements based on real-world implementation feedback, ensuring the system remained relevant and adaptable.
Conclusion: A Lasting Foundation for Scalable Product Design
By prioritizing collaboration, consistency, and accessibility, the Saffron Design System not only streamlined development and UI design across Thomson Reuters but also set a precedent for scalable, user-centered product design.
The system succeeded in its initial launch and can evolve and scale, empowering teams to build faster, maintain consistency, and create accessible digital experiences for all users.