TASB Design System

BACKGROUND SCOPE:

Our goal for the redesign is to take a modular development approach, which means designing and producing a component-based user interface that creates a sustainable technical architecture. (Think of components as Legos: interchangeable building blocks you can assemble into pages) 

WHY? 

1) Using a component-based UI approach supports iterative, agile development. Components will be hosted in a library from which our team can access, integrate and modify them throughout the development process.

2) One of the major challenges for our organization is that we have a portfolio of websites/applications that don’t provide consistent user experiences and interactions. (I am not referring to the “look” of the site; I am referring to the fact that not everything that looks like a button performs like a button.) The component library acts as a point of governance for the business, designers, and quality assurance teams. It will eliminate discrepancies and help define rules that will boil each component down into a standardized model.

SUMMARY:

The current tasb site was designed with a page driven approach, meaning a designer develop a template and then individually designed each page. To force huge volumes of content into cookie cutter templates is much too limiting. And, on a large scale site, trying to go through and custom-design each page would be an unbearable undertaking. In modular web design, the quality of the pages produced is still important. It’s just that the focus of effort shifts away from agonizing over a handful of individual pages (at the expense of all the others) and toward a smart system of reusable design patterns, interchangeable components, and well-planned system logic. This leads to a more scalable infrastructure, better adherence to design standards, cleaner code and better performance times. 

Facilitate an Interface Inventory Workshop.

In order to get the entire team involved and aligned, I led a workshop for us to go through and take screenshots of all of the components & elements on the current websites. Once we finished taking stock and looking at our inventory of CMS widgets/modules, I created a Roadmap of Components I needed to design and create governing guidelines for.