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.
How might we improve team efficiency and satisfaction through a shared design system?
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.
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.
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:
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.
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.
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.
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.