One design system for all products at TMRW

ivfOS Design System

At TMRW, I took over the role of a previous designer, overlapping briefly during his departure from the company. During this time, I took work he had done scattered across a range of XD files and lead the construction of a centralized set of Figma libraries for UI production (various structure documentation below).

diagram of UI Libraries

This includes converting size, color, spacing, buttons, dropdowns, icons etc into a suite of reusable components in line with the various sized products these elements would represent.

This project took over a month of dedicated efforts with the previous designer on their way out, followed by the consistent growth over time it takes to see a product flourish.

Detail Shots

Colors!

Typography!

Scalable Icons!

Alerts and notifications!

Various tooltips on hover!

Actions and screening statuses for tables!

Breadcrumb based navigations!

Global headers!

Buttons for all kinds of usecases!

Branded background for both product types!

Detailed status modal for tracking inventory!

Consistent Vue 3 date/time pickers!

Dropdowns for all kinds of use cases!

Consistent token based spacing!

Process

Working as the only dedicated design resource, I split my time between features and design system, among other projects. As such, I set dedicated time every day to tend to components, both eliminating previous technical debt from the previous owner as well as assessing newly crafted components to see if they are ready to be ingested into the appropriate products’ ivfOS design system.

gif of every week of my TMRW calendar from day 1 to day 222, showing consistent evening time dedicated to components every day

Further Reflection

I really enjoy design system work, even though as the only UI designer at my company that means I have to do several jobs that would each deserve its own headcount on a larger team. I find the balance of this is in collaboration with different teams.

Notes on this project include (A) the fact I was extending and systemizing this design system initially without creating any new visuals, and instead was only extending existing branding; (B) the previous team was using XD and Figma, often without letting one another know, and were using translation plug-ins to convert their files for one another, which lead to serious UI design debt for any of these elements that ended up being componentized; and (C) all work was brought through Zeplin.

From a business perspective, each of these decisions lead to a very specific amount of overhead, sometimes small and sometimes large. More nuanced opinions about this available in interview process.