TD - Web Broker - UX Component Library

TD Webbroker platform has a large team of designers. The team is also supported by contractors and vendors. The platform did not had a UX or a VD library for the designer to take the assets from. There was a semi complete style guide that needed updating as well. I was tasked to create a UX library on the basis of the style guide and identify missing components in the style guide.

UX Component Library Structure

I based the UX library structure on Atomic Design principals. Treating a smallest piece as an atom and a combination of atoms as a molecule. These atoms and molecules than grew to make organism, the organisms made up templates and pages. All the structure could be traced back to atoms in the library.

Component Naming Structure

Naming components in a library is very important. With a large library, proper naming convention can make or break a library. I employed the naming structure of naming a component according to its category, type and variation that it has.

Grids & Breakpoints, Typography and UX Colour Palette

Atoms, Molecules and Organisms

Organism and Templates

Templates and Pages

Templates and Pages

Templates and Pages

Library in play

TD design team works in Adobe XD. Logically i created the library in XD. After i finished the library, i shared it will the team via adobe cloud, then i conducted a workshop with them to showcase the power of library, how to use it and best practices. I explained the benefits and the streamlining of design process that it will bring to the daily work flow.

The library is structured in such away that once i change an atom, it is updated across all the library wherever the atom has been used. Not only that it will prompt an update warning to all the designers that have linked assets from this library in their files.

The library was received very well and is now being used successfully across the web broker team.