Enterprise design system
Senior UX Designer @ Thomson Reuters from 2017 - 2019
Context
I came in to Thomson Reuters to be a part of a team building a greenfield product that went on to act as the foundation of our design system for the legal suite of products.
As our design system on the legal side of the business gained maturity we combined efforts with the tax business to meld our design systems together and scale across the enterprise.
My key accomplishments on the design system team were building a sophisticated pattern library for designers in Sketch + Abstract, and leading an initiative with the head engineer to implement design tokens.
Project overview
Phase 1: Developing a legal product design system
01 Panoramic software
Foundational product to build initial set of components in context
02 Panoramic style guide
Created lightweight documentation that was product specific
03 Xavier design system
Cataloging and generalizing components from Panoramic
Phase 2: Scaling to tax products & beyond
01 Bento design system
Cross functional collaborating and pair programming with the Tax and Legal teams to ensure high quality execution of a single design system
02 Design tokens
Enhancing and scaling the system further to be more coherent, lightweight and tech agnostic
Legal design system
What were we trying to solve for?
The Legal division at Thomson Reuters supports hundreds of products that are all on disparate technology stacks with varying visual designs applied. We were in need of a design system to unify our legal product suite to create a seamless and unified experience across our products.
When I joined the team to help build Panoramic they were about 2 years into the product but still hadn’t formed the visual identity, below is how the software without a visual identity defined:
There were also conversations in parallel happening around needing to build a design system for the legal product suite, but the team was feeling unsure of where to start with such a large product portfolio to audit.
Ultimately we decided to use the visual identity we came up with from Panoramic to set the tone for the Legal UX Design System.
This would help us make sure we were building usable components in context of each other that would be thoroughly tested and visually coherent.
Mood board study
Our first step for defining that visual identity was to do a mood board study of different visual design treatments on Panoramic.
We went through several rounds of design iterations and then took two prototypes through A/B testing with 20 participants over 5 weeks. After we collected user feedback I got to lead creating the final visual direction to present to our stakeholders.
Within the test we were able to get a ton of great insights on component-level feedback that really helped us to make sure we were making well informed design decisions into even the smallest of details, setting us up for success as we worked towards building a design system.
Style guide
Once we landed on a final visual system and had stakeholder buy-in. We started to document the visual system, interactions and patterns and met on a regular cadence to keep each other informed of patterns and components.
I created and owned the style guide that I used to help keep the team informed as well as help in working with development to start building our reusable pattern library.
Xavier design system
As our product-specific documentation matured we then took our our deliverables and stripped them to be more generic and product agnostic.
From there we started building the Xavier Design System for all of our legal software products.
Scaling the system
Combining efforts
As we built up the Xavier system and support processes for designers, developers and product migration we found out more and more about other parts of Thomson Reuters that were also building design systems.
Mid-2019 we merged the Legal and Tax Design System teams to create the Bento Design System team.
Our first few months were filled with cross-library analysis to decide which library to use as the foundation. We executed designer and stakeholder interviews, conducted workshops and built design and development operations.
Themed approach
We ultimately decided to use Bento as the foundation of our enterprise library as it was more aligned with tech stacks throughout the company and was closer to the Marketing brand.
But to align with Thomson Reuters product positioning strategy we planned to create themes for the major product lines.
Key contributions
UI lead for the legal theme
Built and maintained the sketch library
Acted as liaison and consultant to product team designers
Go-to for troubleshooting
Held regular meetings for component updates and reviews
Held regular trainings and test parties for the sketch library
Attended product team critiques
Scaling the system even further
Design tokens
Partnering with my Lead UX Engineer we spearheaded the initiative to get our library set up with design tokens.
Our goals were:
Create a share language between developers and designers
Create a lightweight tech-agnostic version of the design system to help with adoption
Speed up development and decrease go to market time
