Automating Consistency

How we simplified and automated consistency in design

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 yelp.com/careers.

Special thanks to Scott Tusk for illustrations