2015 : DOBT Style Guide

The homepage of the DOBT Style Guide

In the summer of 2015, I organized and redesigned DOBT’s design components across multiple public and internal applications. As DOBT’s sole designer, I led copywriting, visual design, and HTML / CSS development.

This was a huge project with multiple goals. We wanted to enforce aesthetic and code consistency across all of our software, and to give engineers a component library with which they could easily build new features. Finally, we wanted visual unit tests for our basic UI components, letting us diagnose design bugs without manually navigating through each app.

UI color swatches in the DOBT style guide.

After conducting an exhaustive pattern inventory and refactoring a lot of SCSS, I wrote and designed a style guide that documented each UI component alongside its source code. I also wrote recommendations that defined the proper usage of each component.

Types of dropdowns in the DOBT style guide.