First Impressions

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.

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.