design system strategy & implementation

 
 
TBldr Catalog.png
 
 
 

case

Establish a design system that can be used by development, user experience and design that aligns team nomenclature, UI components and process.

customer pain point

During site unification a style guide was established but components and page layouts were displayed inconsistently across full site experience. Customers would try and use the same components in different pages and get different experiences and/or results which caused frustration and led to site abandonment.

solution

Initiated effort to create a design system library and process. Lead audit of production UI display and behavior and compared against UX comps. Established UI display and behavior then developed source code and uploaded into development repository. UX then created design system library that references source code components aligning visual display and behavior of UI. In addition, lead effort to establish process for updating or creating net new design system components between UX and development teams. Created theme builder site for developers to copy html into their project for integration and cloud based component library for UX designers and architects. This helped align consistent display and behavior of UI across all store websites and decrease time used for front end developers and UX designers by 50%.


gallery