App Critique in Action

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.

In this example, we’ll go through Yelp’s iOS app, evaluating the app in a couple of ways. We’ll make our first impressions by examining the home page, and then get a sense of its structure by navigating to different pages. We’ll look into personalization and go through one of the core flows by looking for a nearby restaurant.

We’ll evaluate the app based on its visual and interaction design. We’ll also consider strategy, also known as “product thinking” or “business acumen,” to understand the why behind the UI decisions. Although it’s not our primary concern, we’ll also pay attention to copy and messaging.

First Impressions

You can tell a lot about the app based on its presentation. The visual aspect of design hits us quickly. Based on this first impression, we decide if we want to stick around or go elsewhere. At this stage, we get an idea of the feeling the app is trying to communicate to us—is it serious or playful, trustworthy, or suspicious? These are just some of the questions that go through our heads in a split second.

As designers, our job is to build an experience consistent and in tune with the impression that the business is trying to communicate. As a result, during the critique, we should be on the lookout when a design reinforces or contradicts this consistency.

Figure: Launching Yelp

Upon opening Yelp, although it’s quick, the splash screen has a subtle animation—the logo briefly recedes back before lurching forward. The combination of rounded logotype corners and the giant white outlines evoke a friendly feeling. Here are a couple of things to note on the landing page:

1. Header. It calls out less known Yelp coverage—auto shops. This suggests that Yelp is reinforcing the fact that it’s more than just a place for restaurant reviews.

2. Search. The search bar had a slight shadow to indicate affordance and the input text suggests what the user can find on Yelp. The copy of “burgers, delivery, barbers…” suggests that the user can input a variety of different types of searches from dishes, to fulfillment methods, to services.

3. Shortcuts. Yelp uses a shortcut style menu here highlighting seven offerings and a button for more. The first three offerings are all food related: Restaurants, Delivery, Takeout. I suspect these are the core flows for the app. However it’s also interesting to see Accounts, Plumbers, Auto Repair, and Movers. I wonder if these categories are dynamic and change based on season and/or market.

4. Personalization. This app banner asks the user to add preferences. Personalization is always a good strategy and we’ll look into this a little closer in the next few sections.

5. Tab bar. After the splash screen, the user lands on “Search” (as opposed to the traditional “Home”). Since I haven’t used Yelp in a while, I have 44 notifications on my account. Is this good or bad? It’s hard to tell from this page but we’ll find out once we take a closer look at “Me.”

We got some useful information from the landing page. Before we dive in, sometimes it’s helpful to step back before going forward. In this case getting out of the app and searching for “yelp” on the App Store can give us additional cues about Yelp’s positioning.

Figure: Yelp on the App Store

There are a few interesting things to notice here:

1. There’s competition from DoorDash, since it’s using “yelp” as an ad keyword.

2. Yelp includes its value proposition in the title: “Yelp Food, Delivery & Services.”

3. The header of the App Store page is a giant burger (similar to the one from DoorDash, perhaps juicy burgers entice more app downloads).

4. The “What’s New” copy colorfully addresses how the team has cleaned up the app to make it better while also highlighting services the app can help you find.

5. The preview screenshots give us a variety of services that Yelp is trying to promote, like finding home pros and getting quotes.

When you’re doing the app critique, you don’t always have to go back to the App Store or the Play Store. It’s likely that the interview will be focused more on the app itself than anything outside of it. But gaining additional context can be a good move, especially if this is a popular app that everyone is familiar with.

Now let’s get back into the app. To do this, I intentionally closed Yelp and launched it again—looks like the header has changed for me. I close the app again and reopen to see just how many different header variations there are.

Figure: Headers

Judging by the different header styles, Yelp is trying to reinforce the image that it’s more than just a food app. Having used Yelp in the past, I remember the header also used to change based on day of the week or even time in the day, like suggesting brunch options on Saturday morning. It’s an interesting approach. Using context to predict what the user is trying to do removes friction and can get them to take action faster.

Figure: Understanding Hierarchy

Visually, the header is positioned in a primary spot in the app real estate. Not only does it take up a significant portion of Home upon landing, but it also uses bold colors like red, blue, or white and an image to stand out from the rest of the page.

When assessing hierarchy, one trick you can use is to squint or look at the app from an arm’s length. What do you see then? What shapes are prominent, and what jumps out to you the most? If you’re practicing the app critique on your own, I recommend taking a screenshot, blurring, and desaturating an image as useful ways to assess hierarchy.

In our example, the header takes on a shape of its own, and the Auto Shops CTA does tend to blur in with the rest of the image. Next, although it’s further down the page, the personalization heart stands out due to its shape, size, and the whitespace around it. Elements such as the navigation shortcuts, search, and the tab bar are lower in hierarchy.

Navigating the App

We took some time to familiarize ourselves with Yelp overall and got some interesting data points from the landing page. Now let’s look around. What else can we do? Going through an app’s navigation will help us get a better sense of the content and how it’s structured.

Figure: Delivery, Me, Notifications

1. Delivery. Since most restaurants are either closed or operating at minimum capacity, it’s no surprise that delivery is made prominent as an item in the Tab Bar. One interesting visual element you’ll notice going through the app is that the icons here use a different style than Home and Search. I suspect these styles are probably an evolution of Yelp’s visual language. The carousel on the top implies there are about 20 restaurant categories available, though arguably, it can be visually simplified by removing the carousel dots at the bottom.

2. Me. When I was going through the app the first time, I cleared my notifications, and this screenshot reflects that; however, after a few hours I’m getting new notifications.

3. Notifications. It’s useful to see notifications all in one place. However, the usefulness of the content itself is debatable. Is the content relevant to me because I’ve visited these places in the past, or is it closer to an ad promoting a service? Looking at the notifications as a whole in this format makes them all look the same. Since they all blend in, it’s hard to spot the difference or if there’s something important I should pay attention to, thus reducing the efficacy of these. There’s an opportunity here to further personalize notifications and lean in on the visual design to reinforce how much choice the user has when they’re ordering takeout or delivery. Alternatively, some of these notifications could also get cleared over time so as not to provoke user anxiety with the amount of things they need to clear out or check up on. Just like taking up room on Home to promote engagement, notifications too are a quick growth tactic to incentive use. However, there’s a certain point where their efficacy plummets, as is seen here when there are way too many notifications to go through.

Figure: Navigating Yelp: Collections, More

It looks like a collection is a method of organizing similar things, or at least similar to the person who’s creating a collection and then either keeping it private (as My Bookmarks suggests with the “Non-Public” label) or making it public.

I typically liken the More page as a kitchen sink drawer for miscellaneous items. Yet it is a little strange to see a banner, “Warm up to winter.” Most likely this is another growth tactic to promote other services. Visually, the row icons are inconsistent: some use hairlines, others have thicker borders, and some are filled.

Exploring Personalization

We’ve now done a surface dive on Yelp. Primarily focusing on Search, briefly popping to the App Store and then returning back and exploring the app via the tab bar navigation.

Next up, I’m curious about how Yelp is trying to improve its recommendations via personalization. As previously mentioned, getting personalization right can be useful for a business as relevant content leads to higher engagement and user retention. However it’s how apps implement personalization that makes all the difference.

Figure: Personalization Entry Points

We briefly covered this in earlier critique but it bears repeating: there are multiple entry points into personalization on pages. In this case, we have Home, Me, and More.

Given the high prominence of the personalization banner on Home, it’s likely this is a main entry point for the feature. I suspect Yelp is trying to temporarily promote the feature in order to drive engagement. Logically having preferences under a Me tab makes the most sense. I suspect “Your Preferences” is included in More in order to promote this feature.

Figure: Browsing Personalization Page

In this case, Yelp is essentially asking the user to complete a survey of what they prefer to do. Tapping “Learn more” gives us an explanation of the feature (2). This all makes sense if a user is choosing options in the “Food & drink” category (1). However things get less clear once we scroll down the page. Are dietary needs, lifestyle, and accessibility preferences (3)?

Figure: Getting Strange Results

What about Hair Salons? My assumption is that if I pick hair salons as a “preference” (1), Yelp will be smart enough to point me to places that are open nearby. The tap interaction feels responsive as the heart on the top right turns red and pops in. I tap on Add preferences and get excited by the drumroll message (2).

Unfortunately it looks like something went wrong somewhere. Not only did I not get any hair salons, but somehow I got suggestions for food delivery (3). If I was a user, I’d lose trust in this feature fast. I suspect this is a bug. Maybe there were no salons available, and Yelp tried to pick the next best option—but it didn’t take my input into consideration.

In general, Yelp does a good job of asking users to provide feedback in bite-sized portions. I wonder if a similar approach can be used here for personalization. It’s useful to have this page as a way to confirm what things I’ve already shared with Yelp. However, filling it all out in one go feels cumbersome.

One way to simplify this interaction is to break up the questions into small chunks that can be sprinkled throughout the app. Alternatively, preferences can be assumed based on user interaction. For example, if I’m searching for restaurants and I have tapped on Indian the last five times I’ve used the app, it should know I prefer this type of cuisine, and show me relevant options.

Ordering From a Restaurant

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.

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.