SG Style Guide

Shortly after celebrating our company's 10 year anniversary, we faced a tangled mess. The interface and CSS worked, but it was full of variations, special cases, and exceptions. Competing design patterns spread across the layers of the app. It told the story of a scrappy company growing at light speed.

At the time, our team was handling the transition of a large chunk of our brand into the enterprise market. DIY customers loved the quirky UI, but enterprise customers were hesitant to put trust in the brand. After collaborating on a few design changes with Dev, momentum started to build for a style guide and possible brand shift.

Pre-existing design for DIY customers

Panel re-design & enterprise theme

We started by showing the value of some low hanging fruit. In our side panels, I created simple rules for typography, vertical spacing, and hierarchy. It was a paint job, but it showed how a little systematic design could go a long way. The re-design generated enough interest for me to proceed with polished clickable prototypes.

An early prototype made in Principle

After iterating on our proposal, we got buy in from our CEO to move forward in two stages. The first stage was to create and implement a separate app theme for enterprise clients. The second stage was to re-organize our front-end and create a style guide.

The separate theme for enterprise customers was well recieved and continues to develop. We're now midway through the Style Guide project, and it continues to evolve.

It's been an exciting project, and I've loved the challenge (and satisfaction!) of creating design systems. Having those patterns in place speeds up the product team's process. It makes design decisions easier and creates a framework to draw components from.

Home page for the enterprise theme

Style Guide Excerpts