Ordering From a Restaurant

5 minutes


Updated October 11, 2023
Land Your Dream Design Job

You’re reading an excerpt of Land Your Dream Design Job, a book by Dan Shilov. Filled with hard-won, personal insights, it is a comprehensive guide to landing a product design role in a startup, agency, or tech company, and covers the entire design interview process from beginning to end, for experienced and aspriring designers. Purchase the book to support the author and the ad-free Holloway reading experience. You get instant digital access, commentary and future updates, and a high-quality PDF download.

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.

On the menu (4) I decide to add an item, but it looks like tapping on the ➕ brings me to yet another view (as opposed to adding the item to my cart directly).

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.

Parting Words of Advice

In this critique, we walked through a common framework to evaluate an application based on its visual design, interaction design, and product strategy. We also tangentially covered motion design and considered copy.

important Remember, depending on the company and the role you’re applying for, you may want to emphasize certain aspects of a critique over others.

This is just one way of running a crit. Based on how you approach this exercise, you may come up with an entirely different flow and evaluation. What’s important is to have a rigorous framework in the first place to evaluate the app against.

If you found this post worthwhile, please share!