Wisetail’s Design System

Applying Atomic Design to an existing product

One of my first projects as a Product Designer at Wisetail was to create a design system with the product design team. You can view the complete design system here. Below you’ll read about the process my team established to build and maintain the design system.

How We Started

We started by creating design principles unique to Wisetail as a foundation for our decisions. I loved this experience because it created an inclusive attitude for the engineers and new designers as a way to start everyone on the same foot.

Before we started designing, we audited different areas of the existing product to distill what was working, what needed improvement, and what was distractingly ugly. This included audits of the UI (buttons, panels), interactive elements (navigation, fields), accessibility concerns (colors, type), as well as auditing the overall voice and tone.

Next, we research the design systems of products we admired and obsessed over Brad Frost’s blog posts on Atomic Design.

Building the Design System

Based on Frost’s recommendations, we started with the “elements” of a product. This included colors, a type ramp, icons, layouts, and spacing. My main contribution was creating a succinct color palette that was flexible enough for future growth and also provided plenty of options for proper contrast ratios. (Big shout out to Sim Daltonism for helping me experience the product from the eyes of someone experiencing color blindness.)

Then we built atoms, where I designed tags and selection controls. Afterward, we moved on to molecules and organisms. I got to tackle designing the navigation and list views.

My overall favorite contribution was designing the navigation. It was a fun and satisfying intersection of visual and interaction design. After a few iterations (we had a robust review process with all the designers while building the design system), the final result was a consistent, global navigation experience. My teammates collaborated with me to make it responsive for desktop and tablet (this product is only supported on these two devices).

Dive into the entire system here. The design system we built is still actively used today and has helped export design, production, and development during the lean months of the pandemic.