Inside Yelp’s New Business Page
Sweating the Details
A multi-part story about reimagining, redesigning, and re-engineering Yelp’s most visited page.
In February 2014, Yelp officially launched its redesigned business page. A culmination of many months work, the new design also sets a new tone for the rest of Yelp.com’s user interface. The business page design and the new look and feel marry many influences and goals, taking cues from our mobile apps, our classic interface, and a very healthy respect for our readers, writers, and photographers.
Whether it’s god or the devil hiding in the details is up to you, but one thing is certain: without sweating the small stuff, every design and interaction falls flat. Our vibrant community is what sets Yelp apart from the others and we want the experience of using our products to feel amazing. To say that we paid attention to detail is to sell it a bit short: we’ve exhaustively considered every element of our new business page design—and by extension, Yelp’s new look and feel—with an eye for consistency, beauty, and usability.
Defining themes
Yelp is, always and forever, dedicated to sharing and reading stories about great local businesses. While many people are turning to Yelp to read our community’s rich reviews, they’re also relying on photos to help them get the full picture. At the same time, Yelpers take a lot of pride in crafting well-written reviews and sharing photos that perfectly capture their stories, and we wanted to do an even better job of displaying this hard work, to make the experience more satisfying, whether you’re writing or reading.
The old design first debuted before the smartphone revolution when there was only one platform for Yelp: the desktop web. But with the advent of smartphones and native apps, Yelp can now be accessed anytime, anywhere—which means there are many contexts for Yelp. And while our mobile apps do an amazing job of displaying valuable information and beautiful content, the context in which you use and view a mobile application is very different from the context in which you use a desktop computer.
With this in mind, we created two themes to guide the new design.
Honor content, honor context.
Nothing in the design should get in the way of helping readers consume information and content. Everything in the design should be optimized for the desktop web.
Early explorations
Over the past ten years, Yelp’s stayed ahead of the game with continuous product improvement and new features. This made Yelp the go-to source for finding local businesses, but didn’t always leave loads of time to focus on design consistency. Prior to the business page redesign, Yelp’s desktop web was a mishmash of different grids, styles, and elements. Many problems had been solved in different ways, creating an experience that felt mostly right, but left our team with the lingering feeling that Yelp wasn’t as perfect as we knew it could be.
As design began, we explored two major directions: one with a previously designed full screen header and format, and the other staying inside Yelp’s then current header and body containers.
These early explorations are essentially sketches, and they helped guide initial conversations with our team. Would we undertake a massive redesign of this page and all of Yelp’s look and feel? Or would we opt for a faster project that was essentially a reorganization of what we already had?
We decided to go for broke, and revamp all aspects of Yelp’s UI.
Mobile’s influence
Yelp’s apps on iOS and Android offer exceptional experiences, driven by design that is lightweight and lets the content sing. After our initial explorations, one clear goal was to better align the mobile and desktop interfaces, for while the apps continued to be at the forefront of superior mobile design, we were excited to update the business page to better represent best practices around information display.
Screen size constraints are often cited as a major reason why mobile experience seems clear and to the point: without big desktop screens to fill with clutter, the mobile experience gets to the core of what a product is, its identity, its value. On the desktop, it is always tempting to show more, show everything, because there is a lot of space to fill. Yelp has always had the best local business information on the web, but our presentation of it was dense and unfocused.
As our design unfolded, we took cues from our business page on the app, creating experiences that feel unified and on brand.
Preparing the canvas
Design works best within pre-established constraints. UI design in particular relies on uniformity and predictability—without these two traits, a designed system falls apart and fails its users.
Prior to the redesign, Yelp didn’t have a foundational grid system or a defined typography scale. We needed both, but what system to use? There are many off-the-shelf frameworks available on the web today and we explored static options like 960.gs and responsive systems, like Foundation.
At the same time, we were working to solidify a typographic system that would help us create a pleasing vertical rhythm. Our old design had increments of 5 and 2, which lead to a system that was mathematically easy to understand and develop, but difficult for the eye to predict. Yelp is a product based on the written word, and so it was essential for us to create a system that made reading pleasurable—for us, that meant switching from our old type system to a traditional typographic scale, based on increments of 6.
Happily, we found a baseline grid that worked perfectly with our new system. With those elements in place, we decided to define our own horizontal grid. We set the number 6 as our base and created a 12 column grid with gutters set at 30 pixels.
The fun part
Browsing through a business page should be as easy and straight-forward as reading a newspaper article: essential, need-to-know information at the top of the page, with each subsequent element revealing ever more detail. The hierarchy we needed was clear from the beginning. The fun part was fine tuning each element.
Above the fold
There’s much debate about whether or not a fold exists on the desktop. Do users scroll, or do they bounce if they don’t see what they want exactly when they want it? The truth is, it’s a mix. Important information does need to be at the top of the page. You have to inspire confidence in a user in order to get them to scroll, which is why we’ve put all of our key information above the fold, and display more (and bigger!) photos.
Color
Yelp is, happily, a vibrantly colored company. Our red might not be as identifiable as Coca Cola’s—yet—but it’s a beaut. Our old design had a mishmash of colors in its UI, the result of repeatedly solving the same problems, and legacy elements (design debt, in other words).
Since a primary goal is giving our users’ content the main stage, we decided to make our color palette a bit more neutral. The red stayed, but we’ve moved entirely away from our old oranges, yellows, and aquas. Initially, we explored a more monochromatic look to match our mobile app, but after living with it for a few weeks, felt that it was too cold for Yelp.com. We’ve settled on a subtle palette of warm greys to compliment our bright red, link blue, and all of our content.
Making reading awesome
Reading is core to the Yelp experience, and with the new design, we made some major optimizations.
First, we raised our default type size, up to 14pt with a nice 18pt line height. It’s big enough to see sitting a comfortable distance from the screen, while still allowing us to show a big chunk of content in a single viewport. We also banished type smaller than 12pt.
Second, we decluttered the review reading column, moving user passports and actions to the left, giving an uninterrupted reading experience. We also made the user actions available only when hovering over the review div, so that you only see them when you might need them.
We even optimized the review column width. Displaying an average of 55 characters per line, your eye can easily track what you’re reading with as little eye movement as necessary—meaning that you won’t be straining to read those long articles anymore.
Designing the new Yelp business page was a huge undertaking, and there is much more to the story of how it went from concept to completion (if anything is truly ever complete). Stay tuned for more from our designers and product managers.
You can read more about the page’s improved consumer features on the Official Blog. If you’d like to know how we built it, check out the Engineering Blog, where you can read about our new styleguide.
If you like how much attention we paid to all the small stuff on the new business page, maybe you’re the kind of person we’d love to work with. We’re hiring UI Designers, Product Managers, and more.
