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, in the tradition of projects like Jeremy Keith’s Pattern Primer, we wanted visual unit tests for our basic UI components, letting us diagnose visual bugs without navigating through our apps.

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.

The DOBT style guide homepage.

UI color swatches in the DOBT style guide.

Dropdown types in the DOBT style guide.

Subscribe to the mailing list.

Every once in a while, I'll write to you with something I've been thinking about, alongside some cultural recommendations.