Brian Sing
+1 (310) 948-1643
Digital Product Designer
briansing.sunny@gmail.com


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



google doc with links to all 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





 
         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. 
Anybody who keeps the ability to see beauty never grows old.




I believe that, in driving product design, form and function cannot be disentangled from users, our shared context, and each other. In this way, every great company that has truly succeeded before exemplifies this.
*