Automating Consistency

How we simplified and automated consistency in design

Taron Ghazaryan
Feb 7, 2017 · 3 min read
Sketchpad of Yelp’s talented illustrator Stephen Verhalleman

When I joined Yelp a little over two years ago, our small design team had built an extensive web and mobile styleguide to keep Yelp’s visual language consistent across platforms. The team has quadrupled in size since then, but our process has remained largely unchanged. Until a few months ago, we were still manually exporting icons in multiple resolutions for Web, Android, and iOS. We sent these exported assets to our developers via any combination of email, Dropbox, JIRA, and Hangouts. Too many moving pieces in this process meant that mistakes would eventually be made and consistency would suffer.

We set three primary goals to solve the issues that contributed to the archaic and complex process.

1. Simplify exporting

2. Simplify asset handoff

3. Set safeguards for consistency

After what felt like a million iterations, we were able to reduce the process to one simple step: the designer exports an .svg scalable vector file into a repository, everything else happens automagically behind the scenes. The script validates names and sizes to ensure the naming scheme is correct. iOS receives .pngs exported at 1x, 2x, and 3x resolutions. Android receives .pngs exported and placed in the appropriate density folders. Web receives .svgs and fallback .pngs for older browsers.

The SVG file is used as a blueprint to export all of the files necessary web, iOS, and Android.

Seeing how well this system worked for icons, we prioritized expanding it to enforce uniformity elsewhere in the Yelp product. Our codebase had over a 100 different colors, many only slightly different than the others, leaving our developers guessing which colors to use. With the help of the illustration team, we narrowed down the palette to fewer than 20 colors shared across all platforms. These colors are defined in a centralized repository, enabling us to freely tweak them and synchronize the change in one easy step.

Colors are passed down from a central repository to our mobile apps, website, and emails.

With our most recent update, we’ve expanded the system to handle a variety of images, including the Yelp logo and our world renowned rating stars. Like with colors, we opted for simplicity and consistency, reducing the number of rating star variations from twenty to just four.

Not only has the process been simplified to one simple step, we have completely eliminated the need for asset handoffs to developers. Where once a slight change to a single asset would have required four steps: 1) the design change, 2) dozens of exports, 3) handoff to engineers via inconsistent channels, and 4) verification that the assets work as expected, now it’s as simple as one: make the change and save to our repository.

Because of this internal change, the time savings on the design and development ends are huge. The most important outcome, though, is a more consistent (and consistently beautiful) experience across every Yelp platform.

For a more detailed breakdown of how the script was built, head over to our engineering blog.

Feeling inspired to get to know us a little better? Look us up on Dribbble, and if you’ve got the design chops and are passionate about local businesses, check out current openings for the Yelp Product Design team at

Special thanks to Scott Tusk for illustrations

Yelp Design

Stories from Yelp's Product Design Team

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store