Zume Design System

I was the lead designer for Zume's first design system. As we were scaling from 100 employees in June 2018 to 600 by December 2019, we needed a way to design and develop products with a consistent user experience faster. By solving a lot of common problems up front—and with limited design resources—we helped our product teams focus more on higher level user problems.

I did extensive research on the foundations of successful design systems to establish our atomic type, color, and spacing systems, with help from another product designer.

Working closely with a team of 8 engineers, I designed 20+ responsive and accessible web (Vue.js) components with documentation in Storybook, and corresponding shared components and styles in Figma. I collaborated with 6 other designers & engineering teams to test our system and use it to design products for the Zume Console, a suite of web tools to manage mobile kitchen operations.

The Challenge

After an infusion of funding, Zume was optimizing for scale. We went from around 100 employees in June 2018 to 600 by December 2019. With that rapid scale came many challenges: information silos, inconsistencies, lots of fresh faces, lots of new projects.

In early 2019, we had only 3 product designers and 100+ software engineers, making it difficult to scale design.

I had been tinkering with design systems for a couple years. When we wanted to consolidate our internal admin apps, we used a Sketch bootstrap library to move quickly. This helped speed up our design process, but the components were re-written by our engineers, so it functioned more like a UI design kit. We had made efforts at consolidating custom components while redesigning our Zume Pizza website and apps, but this large project didn't have the luxury of much planning, and we were forced to move quickly. After an eye-opening Rethink design systems conference in June 2018, I led a more serious effort at a dedicated design system for our Pielot Delivery App in the Fall of 2018, which prompted a move to Figma for its team libraries, and got me experimenting with building atomic components for Android and iOS. Along with a conference led by design systems expert Nathan Curtis in November 2018, I was fully bought in that a dedicated design system effort was needed to help us scale as fast as we wanted.

Luckily, our product and engineering teams were thinking similarly from a code redundancy standpoint. I was tapped to lead our new platform-wide design system effort, for a suite of products called Zume Console that hold the primary software tools used by both internal Zume employees and restaurants to run their business on our platform.

Discovery

I did research sprints on each atomic element—spacing & layout, type, color, icons—diving into many of the public design systems to understand best practices, like Google's Material Design, IBM's Carbon Design, Shopify's Polaris, Apple's HIG, Salesforce's Lightning Design System.

I also dove into other key, non-company specific sources, like Design Systems by Alla Kholmatova and many of Nathan Curtis's EightShapes articles.

More details to come...
Let me know if you want to learn more.