Chapter 1: Fixing a Broken Foundation

Without bringing the whole thing down

Robert Enck
Sep 4, 2018 · 4 min read

An eye-opening audit

Designers and developers at Zuora knew there was a major disconnect and why we needed a design system but did not realize how inconsistent things were until we audited each experience across our products, CMS, and internal tools.

Problem 1: Change is hard at larger organizations

People have a very reliable and tangible preference for things that have been around for a long time. At Zuora, employee retention is very high due to an amazing culture and leadership — resulting in a large number of people who are used to certain styles and design approaches.

Our approach

In order to limit chaos and disruption, we decided to amend and repair the current foundation — which might have been much harder than just starting completely from scratch. I’ll explain more in Problem #2.

Problem 2: Amending an out of date style guide

The most recent style guide at Zuora was first created for print design. Our color schemes had zero consideration for accessibility standards and the fonts in production did not pair well at all.

Our approach

Before this amendment, Zuora’s brand fonts were primarily Brandon Grotesque and Museo Sans while the product used Roboto. Because these three fonts did not work well when used together, we decided to find an alternative typeface that did.

Font investigation across various Zuora products
(Left) Old type scale ; (Right) New, component-driven type format
(Left) Old color palette ; (Right) New, simplified palette

Problem 3: Treating the system as a product, not a one time project

Like many other teams starting out, a few of us began building the system in our spare time. Designers made decisions and then passed those onto development to figure out. There was no clear organization or collaboration between design and development.

Our approach

We soon realized that our design system could not be treated like a one time project, but instead thought of more as a product with a real roadmap and constant collaboration.


Key Takeaways

  1. Design with purpose — clearly defining the usage around foundational elements will help simplify styles
  2. Fuse engineering and design from the start —creating a framework, similar to Airbnb and numerous other tech companies, where design works with engineering from the beginning will save you time and minimize design/development inconsistencies in the future
  3. Treat your system like a product — establishing a clear roadmap will help your team understand what is needs to be accomplished on a weekly basis and set your team up for success as the system evolves

Design Systems at Zuora

Lessons learned about unifying and scaling design in the Subscription Economy

Robert Enck

Written by

UX Designer @ Zuora

Design Systems at Zuora

Lessons learned about unifying and scaling design in the Subscription Economy

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade