Redesigning
Yelp


With nearly 142 million active unique users each month, Yelp is one of the leading discovery and review platforms around. Yelp’s Factsheet is by far one of the most impressive ones in the field. Having nailed the chicken-egg problem perfectly, Yelp the product has a great advantage over its emerging competitors like Foursquare, but where it lacks is design. Even though out of the 142 million, nearly half (79 million) are mobile users, Yelp’s iOS app has some glaring design issues.

Focusing on simply the UI elements, Yelp could most certainly use a design refresh, conforming to the iOS 8 guidelines, and taking a closer look at some in-app consistency issues. A complete product critique of Yelp’s iOS app can be found here.

Lets take a closer look at Yelp’s existing iOS app:

From left to right: Nearby (landing) screen, Search, and Business Screens of the current iOS Yelp

Some of the obvious design discrepancies lie in the individual elements of the app, such as the list view on the all screens, iOS 6-style buttons on the Search and Business screens, and an inconsistent look and feel between the Nearby screen, and the rest of the app.

A clear attempt to make the experience more visual is seen in the Nearby screen, but it fades quickly. There is also a tremendous waste of whitespace on the landing screen, which led me to redesign the Nearby screen to look like this:

Conveying all the same information as the existing Nearby screen, I added a touch of interactivity, making each category a horizontal scroll. Restaurants, when landed on the grey focus area, will reflect it’s location on the map below, with the highlighted Yelp location pin.

Sticking to the focus on visual experience, images are front and center for each of these restaurants, and redesigned cards do not compromise on any of the information the current app shows for each restaurant.

The current app does not place equal focus on events, which is also on the Nearby screen, and uses a list similar to its current search for the events instead. With the horizontal scroll eliminating the concern of maximum results, I decided to focus equally on both restaurants and events, as they are the only two categories on the landing screen.

Cutting the clutter

Collapsed category list

The category bar was the most space-consuming part of the landing screen, and can be compressed into a sleek, single-line, icon bar. It does the job perfectly, adds a refreshed look, and frees up valuable space which is fighting for the users’ attention.


Global Quick Add with overlay

Another part of the clutter was on the tab bar. While making the quick-add global to the app, not only did Yelp clutter the tab bar, but also made the three features redundant in several places. On the Business screen, the Yelp app has three different prompts that all lead to the same set of features that the quick-add provides.

Another problem with the current quick-add is that the user loses context instantly. Clicking on the pop-out menu entirely blurs out the background content, and can often lead the user to wonder “Why am I here?”

Moving the quick add to the top bar makes it global, and at the same time declutters the tab bar. The redesign of this feature keeps with Yelp’s idea of making it highly accessible, and in a pop-out menu, yet not blinding the user from preceding context.


Redesigned Search

The Search screen is one of the most used ones in the Yelp app, yet it doesn’t seem to have been upgraded since late iOS 6. The rounded buttons, old list view styles, and completely inconsistent with the Nearby screen in terms of visual focus, as well as the unmissable jump in the top-bar between screens, this screen desperately needed a makeover. One of the key things the search screen missed out on was an easily accessible category filter.

The biggest change is bringing the cards into the search view, doing away with the cluttered list view. The cards allow for a large focus on the visual experience, larger text, and at the same time, delivering all the information the existing search list does.

The filter options that include price, popularity, distance, amongst other things, is now behind the ellipsis, which includes a range of categories, as well as other filtering options. Using a native, familiar segmented control to separate the list and map view allows for a more accessible switch between the two.


The Business pages are the heart of Yelp. The exploration tools such as nearby, map, or search are merely paths that users choose to reach the business page. The current business page on Yelp’s app sees a sore waste of space, repeated features such as adding photos, reviews, and check in, that occupy an astonishing amount of space, despite two other places where the same features can be found (ellipsis button, and tab bar quick-add). Another waste of space is seen with a list view for options, similar to that of categories that is used on the Nearby screen. Collapsing this into a single line icon bar provided enough space to see a sneak peek of the Review Highlights, which was previously buried. The simple bookmark at the top provides intuitive functionality, and is red when the business has already been bookmarked.

The use of cards can be extended to the rest of the app. The Review Highlights focus on the images of the business itself, and allow for endless horizontal scroll, removing the current limitation of only 3 review highlights. The reviews itself would focus more on the text and ratings, less on the user images.

Using cards for Review Highlights

With a refreshed look and feel, appreciating the use of whitespace, and branding colors, the redesigned Yelp app provides a richer experience. Using nativity carefully, the redesign finds a middle-ground between familiarity, striking interfaces, and still provides the exact same functionality, making no compromises on the product itself.

The All New Yelp

From left to right, all new Nearby, Quick Add, Search, and Business screens

Hiring? Please feel free to reach out to me!
Shoutout to
Tushar Soni for being the hand model and making image decisions!