April 2021 - December 2022
Image of various Shells atoms, molecules, and styles in Figma
Nutshell’s product was ten years old when I started working on it. The engineering team had never used a design system, so the product was full of inconsistencies and one-off components that were created on the fly.
Our design team was encountering similar problems. We didn’t have a unified set of components in Figma, which meant that we were recreating common UI elements over and over again. This slowed us down a lot; we were either searching through old files for specific elements or creating them from scratch every time.
Much like the engineers’ components, ours didn’t have consistent names; sometimes our frames weren’t even named at all, and we weren’t utilizing text or color styles. There was no common language within our design team, and that manifested at the technical level as well.
Designers and engineers weren’t speaking the same language, which meant that code reviews went through multiple rounds of nitpicks and redundant feedback. Every GitHub PR was taking 2-3 days to review and update before being merged, which slowed our ability to ship new features and product updates to customers.
My teammate Hana Coon and I knew that a design system would help solve these problems and remove some of the barriers to shipping. We were starting our design system from scratch, and neither of us had worked with one before. The first thing we did was seek out resources and strong design systems that we could learn from, drawing inspiration from multiple sources.
I am a huge Figma fangirl (check out this Lunch and Learn I did for our engineering team). I’ve even declared it on my LinkedIn. One of my favorite Figma things is Config, the free design conference they put on every year! In 2021, I attended three Config sessions that directly inspired Shells and taught me about design systems.
This was led by Au Pleguezuelo, a Senior Systems Designer at GitHub. My notes can be found here.
Our mission as systems practitioners is to make systems work without ourselves being a factor
At the end of her session, Au laid out three key takeaways: