Designing Cake

I created a system that reduced design and technical debt for a lean startup team.

I was hired as the second designer on Darby’s product team.

The first thing I learned on the job is that my boss, Erin, is a superhero.  She’d been the first employee ever hired and had designed every aspect of our flagship product with her own two hands. Erin’s designs had taken our company from our first user to thousands of daily active users.

The second thing I learned was that, like all superheroes, Erin was used to flying solo. Until I came on board, there was no need to share designs because the design team was literally one person.

It’s hard to create space for systematizing design – especially when you’re quickly iterating on products in a lean startup.

The Problem

How might we improve team efficiency and satisfaction through a shared design system?

Learning from Users

I began to take note of pain points that team members brought up in team meetings and one-on-one conversations. Before long, recurring themes began to surface.

Auditing the Code

The lack of a design system didn’t just create confusion within our team – it also had an impact on our end product and users.  I conducted an audit of the Darby website and discovered that we’d declared 47 colors in our CSS.  Redundancies in colors and assets had contributed to code bloat and rendered an inconsistent user experience.

Above: A CSS audit revealed 47 colors. 47 colors?!

Selecting a Framework

I’m a big fan of Brad Frost’s atomic design.  TL;DR: By starting with the most elemental UI components, such as a humble button, one can build a design system that’s lean, organized, and adaptable.

One shortcoming of atomic design, as several have pointed out, is that it doesn’t differentiate between styles and assets.  I opted to build a modified version of atomic design system that would separate certain stylistic components into their own swim lane.

Darby is artistic, casual, and spunky.  Their target market skews female, and their website launched as a media space for DIY, beauty, and recipe videos. I loved the practicality of atomic design, but it felt off-brand for Darby, so I went searching for another metaphor.  That’s how I came up with Cake.

The Cake design system is separated into six components:

Flavors

The color and typographic styles that influence other components

Ingredients

The basic building blocks (buttons, labels, form inputs, etc.)

Mixes

Simple components made of a few ingredients, such as an email sign up block

Layers

Compound components made of a few mixes, such as a block that contains a video, metadata, title, fave and chat icons, etc.

Recipes

The highest replicable level of a design; a template for a page or screen that can be reused throughout an experience.

Cakes

Unique, specific use cases of recipes, such as a Beauty category page on website

Designing Flavors

We needed to maintain an extensive brand color palette for our content creators, but I also wanted to build a solution that would be lean.

Solution: I created variables for each base color, then declared each child color as a SASS mixin that combined our base colors with various percentages of white.  This solution allows Darby to declare a base color once and branch off into infinite tints.

.teal-lighter-30 { background: mix($white-base, $teal-base, 30) } .teal-lighter-60 { background: mix($white-base, $teal-base, 60) } .teal-lighter-90 { background: mix($white-base, $teal-base, 90) }

Ingredients

In the past, the design team had created individual icons as needs arose, so our UI iconography lacked consistency.  Icons lived in multiple Sketch and Adobe Illustrator files and were riddled with differences in weight and form.

Solution: In Sketch, I designed a collection of 100+ icons that brought clarity and consistency to the UI.

Mixes and beyond

I continued to develop the design system, adding styles for input fields, user profile blocks, and more. I organized all components as nested symbols within a Sketch library to ensure that, moving forward, no design would be left behind.

Results

Cake changed the way our design team worked.  We wasted less time trying to resolve redundancies and locate important assets. This freed up our team for more valuable conversations around product strategy.

Feedback? Want to geek out about design systems? Say hello on LinkedIn.