Now, let’s take a look at one of the Yelp app’s core flows. Imagine I, the user, am looking for a takeout option in a new part of town.
Figure: Getting Takeout
One way to quickly find a restaurant is to make sure I’m only looking at places that have a takeout option (1). Tapping on Takeout on the Home page brings up the split map/list view (2). This view gives me primarily two paths to take: the map or the list. I don’t want to go far, so while the default radius of the map is useful to see all the options, I need something closer.
By tapping on the map, the sheet moves down and the map zooms in. This is a solid interaction as Yelp is trying to remove the extra friction from pinching and zooming. But I want something really close to where I am, so I pinch to zoom in even further.
Figure: Deciding on a Place
After zooming in, the pins update and I get a better sense of what’s nearby. I zoom in again and entertain the idea of sushi, but after tapping on the restaurant and seeing only three stars, I have second thoughts. The map and the card view is a nice touch, as it allows users to navigate restaurants in different ways. However, it’s not apparent why Death by Taco is number one and the nearby Nama Sushi SF is numbered 25.
The filtering mechanism on the bottom sheet (3) is also not very intuitive, because although Offers Takeout is on, tapping on the Filters pill shows that Offers Takeout is selected there as well. Duplicating the same content feels confusing.
After deciding on Death by Taco, I tap on Order Now (4) expecting to select a dish. The Order Now copy is clear, feels strong, and is a good way to guide the user towards the next step.
Figure: Choosing What to Order
After tapping Order Now I land on the restaurant’s page. There’s a lack of clarity here as to what the next primary action should be (1)—didn’t I just press order now?
Scrolling through the page we see that there is another button, Order Takeout or Delivery (2). Strange. Didn’t I already have Takeout selected? Why do I need to select it again—and now there’s an option for delivery too? Some of this friction could have been easily avoided by letting the user skip directly to the last screen (3) when pressing Order Now.
Unlock expert knowledge.
Learn in depth. Get instant, lifetime access to the entire book. Plus online resources and future updates.
Figure: Adding My Dish and Checking Out
Inside the detailed view of the dish I wanted to add, it’s nice to see photos (1), however the reviews are missing, and I’d have to go back to the Store view and then find the dish again if I want to read them. That’s on top of the friction of having to order from the detail page, and not the menu page. After tapping “Add to cart,” I’m landed back on the Menu.
Everything is good to go, however the quantity next to the Carne Asada Quesadilla (2) didn’t update when I added it to my cart. Maybe it’s only reflected in the cart? Tapping on View Cart (3) confirms that’s the case. The Quesadilla is there, my details and payment method are up to date, and I’m ready for Checkout.
In this flow we took a quick pass at how someone may use the app to find takeout nearby. There are many ways of going about this use case and I would encourage you to explore additional scenarios here, such as considering dietary preferences or user mobility. Using Yelp in different geographies can be helpful in understanding usability in different kinds of places. So don’t restrict yourself, and consider multiple core use cases and variations on these when you’re practicing.