TR: Design System
Industry:
Information Technology
Company:
Thomson Reuters
Year:
2024
Experience:
Senior Product Designer
Thomson Reuters (TR) is a multinational corporation providing information and software solutions for legal, tax, financial, and media professionals worldwide.
about.
I joined Thomson Reuters as a Senior UX/UI Designer within the Digital team and later transitioned into a Senior Product Designer role supporting Legal and Tax product teams. My work focused on improving user workflows, usability, and consistency across complex enterprise products.
In addition to product design, I was an active contributing member of the Design System team, acting as a cross-team ambassador. I collaborated closely with engineers, accessibility (A11y) specialists, product managers, and content designers to help scale the organization’s UI style guide.
In this role, I designed, built, and documented reusable UI components and interaction patterns, while also supporting product teams in adopting the design system and contributing to governance and quality standards.
This case study focuses specifically on my contributions to the Thomson Reuters design system, highlighting the process used to design scalable components, align design and engineering practices, and ensure consistency across multiple enterprise products.
challenge.
Thomson Reuters has grown through frequent acquisitions, bringing together a wide portfolio of products across including legal, tax, and online media. Many of these products were built at different times, by different teams, and using different technologies. As a result, users experienced inconsistent interfaces creating friction and reducing clarity within the ecosystem.
In 2022, the company adopted a digital-first approach with a renewed focus on improving user experience. A key initiative was the creation of a shared UI style and UX pattern system, along with a common vocabulary, developed in close partnership with the Content and Accessibility (A11y) teams.
The challenge was to design a scalable, accessible design system in Figma that unified experiences across teams while remaining flexible enough to support diverse products and workflows, and technically compatible with newly adopted React components, design tokens, and existing legacy systems.
process.
To ensure consistency, scalability, and adoption, each design system contribution followed a structured, repeatable process:
Product and component auditing → component research → API and constraint alignment → proof of concept → internal design and engineering discussions → advocate and accessibility reviews → base component creation → themed variants → documentation → motion design → design and development reviews → release and adoption.
components.
While I contributed to multiple components across the system, including Footer, Hero, Lists, and patterns, including Cart and Checkout and micro-animation pattern library used across multiple products.
The examples below illustrate how the same process was applied across different components and patterns, highlighting depth of decision-making and cross-functional collaboration.
auditing products.
I began by auditing existing products and components across the organization to understand how similar UI patterns were implemented across different teams, platforms, and legacy systems. This audit helped identify inconsistencies, duplication, accessibility gaps, and opportunities for consolidation within the design system.
In parallel, I set up and led interviews with product teams across the organization, including designers, product managers, engineers, content writers, and directors, spanning legal, tax, news, and emerging AI products.
These conversations helped surface edge cases, undocumented variants, and product-specific constraints, informing component structure, variants, and APIs.
API design.
API design was a critical step in my component workflow. I defined component properties in Figma to closely mirror React props, helping reduce discrepancies between design and development and ensuring a shared mental model across teams.
I explored the full range of possible variants and properties, then collaborated with designers and engineers to determine which props should be exposed to balance flexibility with consistency. This approach helped keep components powerful yet constrained, supporting scalable and predictable usage across products.
proof of concept.
Based on early research and API decisions, I created proof-of-concept designs to validate structure, behavior, and feasibility before committing to full component development.
These POCs were used to ground discussions with designers and engineers and to identify risks or gaps early in the process.
internal discussions
At this stage, I led internal discussions within the design system team, using the proof of concept to guide alignment.
Design discussions focused on component structure, styling approach, supported use cases, and prop definitions, serving as the first formal review checkpoint.
Engineering discussions followed to review feasibility, APIs, edge cases, and technical constraints. Feedback from both design and engineering was incorporated before advancing to broader review.
advocate and accessibility reviews.
I facilitated design review sessions with design system advocates from multiple business units, as well as accessibility partners. These sessions helped validate how the component would scale across diverse products, workflows, and accessibility requirements.
Reviews were iterative rather than one-off. I gathered feedback, validated use cases, incorporated changes where appropriate, and repeated the review cycle asynchronously or in live sessions until alignment and cross-team sign-off were reached.
creating base components and variants.
Once structure and API decisions were finalized, I created the base component a structural foundation defining layout, behavior, and states without visual styling. This base layer served as the skeleton from which all themed variants were derived.
While this approach increased complexity in Figma due to deeper nesting, it significantly reduced long-term maintenance and enabled easier scaling across a multi-brand system.
Using the base component as a foundation, I created component variants at the theme level, applying styling through design tokens rather than hard-coded values. This ensured consistency, scalability, and maintainability across themes.
At this stage, I validated both aesthetic quality and accessibility, ensuring contrast, hierarchy, and interaction states met system standards. Token alignment across themes allowed future changes to be made centrally without introducing inconsistencies.
documentation.
Documentation was a core part of my contribution. For each component, I created detailed documentation to support consistent implementation and adoption.
This included a clear introduction, development characteristics (props, states, tokens), supported variants, usage guidelines, platform considerations, accessibility requirements, content guidelines, and motion specifications where applicable.
motion design.
Where applicable, I defined motion and interaction behaviors to support clarity, feedback, and usability. Motion guidelines were documented to ensure animations were purposeful, accessible, and consistently implemented across products.
design and development reviews.
Once components were designed and documented, I led development reviews with engineers to walk through structure, usage, and constraints. Most feedback was resolved asynchronously, with larger issues addressed in review calls.
After development, I conducted final design reviews to ensure parity between design and implementation, validating visual details, prop naming, interaction behavior, motion, and accessibility before release.
time to go live.
Once approved, components were released into the design system and made available to product teams. I supported adoption by answering questions, gathering feedback from early usage, and iterating as needed to improve clarity, usability, and scalability over time.
impact.
Established a scalable, accessible design system adopted across legal, tax, news, and AI products, improving cross-product UI and interaction consistency and strengthening design–development alignment through Figma–React API parity.
This work reduced duplication, supported faster delivery, strengthened system governance, and was recognized with an internal award for cross-team impact.
