Yelp for Business owners
Big companies and local businesses aren’t the same. They aren’t looking at the same data, they don’t make decisions in the same way, and their expectations of a product like Yelp are radically different. While Yelp has a long history of success at putting local businesses on the map, big brands have generally looked at it with skepticism, keeping their listings up-to-date and only sometimes investing in Yelp ads. After I joined the Yelp for Business Owners Multi-location (AKA Biz Multi-loc) team in Hamburg, we made it our mission to figure out why, and make features that could win over big advertisers while providing genuine consumer value.
company
Yelp
location
Hamburg, Germany
role
Product Designer
Responsibilities
Concepting
UX & UI
Documentation
tools used
Sketch
Figma
Google Slides
EARNING TRUST
Why do businesses use Yelp? In a word: trust. Most American consumers trust the reviews they read on Yelp far more than those they read on Google or Facebook, and that trust has strong business value in terms of getting people to actually go into a business and make a purchase, whether that’s a meal, a sweater, or a new set of tires. Because of this, Yelp ads are usually more valuable than equivalents on other platforms, especially for local businesses with limited advertising budgets.
Yelp was built with local businesses in mind from the very beginning. It’s a natural evolution of something like the Yellow Pages: a place to find all the info you need on a local business, with the added value of seeing reviews and photos from other people who have been there. That’s all great for discovering the new Thai place around the corner in a city, but what happens when you’re in somewhere more rural and just want to find the closest Five Guys Burgers & Fries? Chances are you’ll see just a few locations, and they’ll probably boast ratings of 3 stars or less, along with plenty of poor-quality photos and negative reviews.
Searching for Five Guys near Fresno, CA pulls up some poor quality results.
The fact is that consumers aren’t excitedly writing Yelp reviews of their local Five Guys or McDonald’s when the burger is good. Chains are known quantities; customers know exactly what they’re getting, and that’s much of the reason for their success. We observed that consumers often used Yelp listings for big brands as sounding boards for negative experiences that deviated from their expectations of a known brand, and without positive reviews to balance the negative ones, ratings for big brands tended to skew below average.
How might we give big advertisers a canvas for their brand story without compromising the trust we have with users?
Understandably, spending money for ads on a platform that seems biased towards local businesses wasn’t very appealing to big brands, even if people are more likely to go to a physical location and buy something coming from a Yelp ad than a Facebook ad.
So the ‘how might we’ statement was this: How might we give big advertisers a canvas for their brand story without compromising the trust we already have with our consumer users?
In addition to poor reviews and low quality photo content, big advertisers were struggling to find a place for their evolving brands in their Yelp listings. Brands stay relevant to customers through promotions, new products, and limited time offers like the McRib or the Pumpkin Spice Latte. Consumers could see what’s new and what’s coming from brands on Google, Facebook, Instagram, and Twitter, but on Yelp? Not so much. Advertisers could customize some photos, but their overall ability to communicate an evolving brand story was very limited.
Balancing Act
Designing ads is tricky. It’s a process of treading the thin line that separates noticeable from annoying. As a product designer, my pursuit above all else is to design experiences that are good for the end user, and bad ads can very easily sour someone’s experience of an otherwise great product.
By requirement, I had to design a lot of bad ads before I made anything that resembled a good ad.
A sampling of ad designs that didn’t make the final cut.
Most of my bad ads were trying to do too much. Too much text, too big, too loud, too different. The approaches that my team and I agreed were close to the mark all had a few things in common:
A concise Search page ad unit that maintains as much of Yelp's organic result structure as possible.
On secondary pages, a prominent image plus a few short lines of text adding context to the promotion.
A carousel format that flexibly accommodates as many promotions as an advertiser wants to feature.
1 Promotion
2+ Promotions
A detail page where text and image can shine with no space restrictions.
With these principles as a guide, I refined our approach into the product we would eventually call Showcase Ads. From initial concept to full release on iOS, Showcase Ads took about one and a half months of design time, plus about two months of development with design support.
Search
1 promo
2+ promos
details
search
business details
Shortly after I finalized the iOS designs, Cyriac Jannel took charge of transferring the full experience to Android, desktop web, and mobile web.
More recently, we’ve been looking at innovative ways to frame Showcase content across the Yelp product. Showcases have a lot in common with Yelp Connect, a product for local businesses to post updates directly to their followers on Yelp. With the Showcase Ads carousel as a starting point, we looked into an integrated format on Yelp’s Home page combining Showcase and Connect posts into one unit. The appeal here is that there’s one easy place to see all of the promotions from businesses near you, whether they’re big or small.
combined content in carousel
Home
Search
details
directions
A TALE OF TWO STYLEGUIDES
While I was working on Showcase Ads, Yelp’s newly founded Design Systems team was laying the groundwork for a brand new design system: the Cookbook.
![Poster featuring a red abstract design with diagonal stripes and dots in the upper right corner, titled '[Cookbook] Yelp's new design system.' The text explains the exhibit showcases collaborative efforts from various Yelp teams to create a scalable design system called 'Cookbook' and invites viewers to chat with hosts and explore the system. Yelp's red sparkle logo is at the bottom left.](https://cdn.prod.website-files.com/5e78b82a3ea5b89cd5d610aa/5ed8e9fc5021373bed79ad36_y4bo-poster-1.png)
Four posters from our internal Cookbook reveal event, designed by the Yelp Design Systems team.
I can’t describe how excited I was to start working with the Cookbook. In my 3+ years at Yelp, I’d been running up against the limitations of our old styleguide constantly, especially in the areas where there was little-to-no styleguide coverage. Inconsistency between platforms was a major headache, and would add days to most projects while I tracked down eccentric patterns unique to each platform.
Twice in the past I had volunteered for initiatives to clean up the styleguide and drag Yelp’s visual language into modernity, and twice those initiatives failed because of the simple fact that they were side projects, always playing second fiddle to feature work.
Finally, we’d committed to having a talented team working on design systems full time. I was trying to use the Cookbook at every opportunity, but I had to temper my excitement when it became clear that implementing the new styleguide would take considerable time and effort.
I had to face reality: if we’re making anything new, we’re going to have to design it twice.
In a perfect world, someone would flip a switch and the Cookbook would go live for all pages on all platforms at the same time. We don’t live in a perfect world, though, so the reality ended up being a lot more complicated. While I might have access to the new design system for all pages in Figma, our developers were updating major pages one-by-one on all platforms, and doing so with the care and precision necessary for such a dramatic overhaul. Different pages were set to go live at different times on different platforms. Furthermore, the rollout of redesigned pages was phased and closely monitored, meaning that months could go by between when the first cohort of users on a given platform would see new pages and when it was live to 100% of devices.
I had to face reality: if we’re making anything new, we’re going to have to design it twice.
the old
the New
I learned that the simplest way to design in two systems is to start with the newer, more robust one, and then work backwards from there. The framework of the Cookbook allowed me to iterate quickly; in a good system, you can build almost anything from basic building blocks and it will simply work alongside everything else. It’s also much easier to design for all platforms simultaneously when they share consistent typography, colors, icons, and spacing.
The hardest part of the styleguide transition process by far was managing expectations with stakeholders.
In some cases (as with Showcase Ads), I had begun the design process with the older Yelp Classic™ styleguide and didn’t need to work backwards. In others, I had to dust the cobwebs off of old files and make Yelp Classic™ mockups for coverage. While undeniably painful, this process was necessary to guarantee that users would have a consistent experience regardless of whether they were seeing old or new styles.
The hardest part of the styleguide transition process by far was managing expectations with stakeholders, both internal (Group Product Managers, VPs, Sales Managers) and external (Advertisers, third-party Design Agencies). A gradual rollout of pages using an evolving design system means change and uncertainty, which can make the sales process very difficult. In order to get ahead of this uncertainty, I worked with the sales team to make a short document purpose-built to answer important questions about the transition before they were even asked.
This consisted of highlighting the differences between the old and new styles, trying to define a clear timeline for when different pages would be rolled out on different platforms, and defining exact requirements for new assets from advertisers. To make this information easily accessible, I formatted it into a printable Google Slides presentation. The document took me a little over a week to make, but it saved weeks of back-and-forth conversations between prospective advertisers and our sales team.
other contributions
Organized and led various user-centered workshops
Conducted user research with advertisers to better understand their needs and expectations
Hamburg office advocate for the Cookbook design system
Resident American language, punctuation, and culture expert
Organizer of the Hamburg football & Rocket League clubs
Credits
Product Design manager
Nayoung Kim
Product Designers
Tim Plummer
Cyriac Jannel
leadership team
Rahul Hampole
Andrew Martinez-Fonts
Marc Kadish
Product Managers
Frederik Kemner
Birgit Kramer
Thomas Brouwer
Adwait Karmarkar
Sid Arora
Hanh Nguyen