Design system planning and development
When MRI’s product portfolio began to grow exponentially, our centralized UX team used created UI tools and patterns to keep up with the demand for high-quality, consistent UI designs. Beginning with a Bootstrap-based stylesheet in 2016, I led the iterative improvement of our design system until my departure in 2022—at which point MRI’s design system included a Zeroheight documentation site, a Figma team library, and several front-end development libraries published as private NPM packages.
Most of this work was conducted “on the side.” Along the way, I worked with UX teammates and a few developers from other teams that were interested in moving the project forward in their spare time.
As Figma gained new features, I adapted our library to take advantage of the new flexibility and ease of use, saving designers lots of time and frustration. 😅
Shared libraries in Figma
After our team adopted Figma, they began to release features such as Components, Prototyping, and eventually Variants and Properties. With each major Figma update, I updated our library of components and styles. Over time, other designers began to contribute and maintain these shared libraries, following the patterns I’d set.
We used best-in-class tools to keep the design system contribution process as simple as possible for everyone involved.
Front-end libraries in NPM
When application teams began asking to reuse SCSS styles I’d created for a new product (Report Gateway), we distributed it by passing around a zip file. Eventually, though, major changes to the styles became cumbersome for larger projects and teams to keep up with. So, after consulting with some development team members, I created an NPM package for the SCSS, published to a private registry.
Over time, working with other design and development team members, I created packages for iconography, self-hosted webfonts, Angular components, and eventually Stencil.js-based web components, which could be used by teams with a variety of front-end stacks.
I helped implement a development lifecycle for the packages inspired by open source software conventions, making it as easy as possible for developers on downstream application teams to contribute new features and bug fixes.
Design system documentation with Fractal and Zeroheight
Initially, design documentation was developed using Fractal, a static site generator made for design systems. This eventually became cumbersome to maintain, so Figma libraries and package documentation were integrated into a Zeroheight site, allowing design team members to contribute content without needing to export hundreds of screenshots or deal with Git.
At the foundation of the design refresh was an expanded color palette. This process sketch shows the wider palette of colors with contrast ratios pre-calculated.
Planning a design refresh
In 2020, senior designers from different global teams began meeting regularly to reimagine MRI’s design system for a new generation of web products. Based on those discussions and conceptual mockups, I was tapped to create a design system that embodied our goals of improving flexibility and refreshing our web UI patterns. I iterated the foundations and components in Figma, producing mockups that translated UIs from across MRI’s diverse product portfolio into the new style and patterns to gather feedback. I worked with the UX Director to produce a Figma slide presentation describing the updates, which we used to pitch the redesign to stakeholders and senior management.
By the time I departed in 2022, we hadn’t finished, so I can’t show screenshots of that here. Before I left I conducted knowledge transfers with teammates and heavily annotated my work in Figma so my team could pick up where I left off.