Design Critique #4: Yelp (iOS)
Hi all! How are you all doing? Welcome to our #4 app critique session! In this session, we talked about Yelp, the design critique for which is one of the most requested in UX interviews.
Yelp’s mission is to connect people with great local businesses; along the way, enrich the lives of consumers and small business owners.
Here’s a list of questions we would like you to consider before we dive in…
- Have you thought about why you tend to spend more than the average price?
- What was the last time that you wrote a review for a restaurant?
- Why would you want to add friends on Yelp?
- Can you name an app that is doing great on filters?
- Have you ever used Yelp abroad? How was that experience?
If you have ever experienced this kind of confusion, I hope you enjoy reading in the next few minutes!
About Features
Reviews
Compared with previous versions of Yelp, we can see that Yelp places the review entry in a more prominent position, and there are actually multiple entries for the review section in the latest version, which can be confusing for the users. We are curious about the most efficient/noticeable design for the review entry.
An example of a comment is shown at the beginning of a new post, but it disappears when the user starts typing, which doesn’t help the user get started.
The reason for the trouble is that the example is very long and takes up a large portion of the screen. When the user starts to type, this large block of content suddenly disappears, which can somehow “surprise” the user. Therefore, it is recommended that the example be kept short, giving only a rough indication of what needs to be typed, or that the demo is moved down without going away.
Visual interactions
Review sites should make images as eye-catching as possible and avoid being text-heavy. This makes the page easy to access and makes it more interesting to explore. On the writing page of Dianping, (which is the top-3 lifestyle app in China) it can be seen that Dianping encourages users to upload multiple photos and even videos.
It also indicates what customers might comment on, thus helping users recall the dining experience and finish the comment more easily.
Summarize information in a comment to chip filters
In our discussion, we all agreed that the comment section should be improved to be more helpful for users. By making the mentioned dishes, services, and environments summarized as tags, users can easily access information in a separate tag based on specific needs.
It didn’t take long to set Dianping as the comparison on improving reviews, as Dianping is well-known specialized in UGC (user-generated content).
Imagine you’re looking for a place to eat on a weekend date. You want a restaurant with a unique setting, good service, and fresh ingredients. If you happen to see these labels in the comment section, you won’t hesitate to click in, and you’ll see how everyone who’s been there has mentioned how great the environment is, how good the service is, how fresh the ingredients are. With the shortest amount of time to find the desired information, you will quickly identify the best restaurant for the date, book and go.
Then we try to think about what product thinking is represented by embedding linkable tags in comments.
You will see the widespread use of tags in many places.
- When commenting, we can rely on adding tags to help recall, and at the same time make our comments have higher exposure rates and the page more vision friendly.
- When browsing others’ comments, we can use tags as specific filters to quickly match the specific information you want.
- For those who don’t have specific requirements but just browse, the selection tags help users quickly find the restaurant’s features and bookmark them accordingly.
With the help of tags, it stimulates users to participate in various scenarios.
When information is extracted from the vast text and becomes a label, it is essentially a transformation from ‘content’ to ‘service’.
Social
Do you find socializing on yelp to be fun? Do you recognize Yelp as more than a tool app?
At first, we didn’t think yelp was trying to encourage people to socialize on the platform. Its interface also conveys a kind of instrumental practicability. Until we accidentally discovered, for example, in the comment area, each user’s avatar was followed by three icons, representing how many followers the user has, how many comments the user had written and how many photos the user had taken. Yelp even reminds you to tag friends after users check in to a restaurant, and allows you to add friends through Facebook. Yelp also tries to encourage people to express their attitudes to other people’s comments in interesting ways. The above findings make us feel that yelp is actually trying to encourage people to socialize here.
The problem is that yelp seems to imply some sociality in many places, but these settings have not really stimulated users to interact and create. If yelp really wants to encourage people to socialize, they need to think about how to motivate users to be willing to and continue to create content.
There are basically two incentive ways:
- Empower users to continue to achieve a higher rating.
- Bring in a steady stream of new followers.
Filter
Do you always get desirable results after opening a filter?
When we open Yelp on the landing page, this “Delivery” page pops up. This new feature that Yelp has implemented due to the COVID-19 seems really helpful. Obviously, there is a boost for takeouts and deliveries, Yelp is taking actions to satisfy new user needs.
Let’s order a delivery and see what happens next!
We noticed Yelp displayed all filters horizontally and most of the filters were set on or off, because of which users are able to change filters in the most efficient way. However, it may take the right scroll too long to finish this task at the same time. To ensure that this filter is executed, we select Google Maps for comparison.
UI Filter for Yelp and Google Maps
Google Maps and Yelp both use a combination of filtering and sorting. The difference is that after adding a separate filter on Yelp, an overview will appear in the first place, indicating that you have already filtered several items. And it is easy to know that all filters can be changed at one time here. According to this button logic, the first button is an overview of all the other filter buttons, but the shape of the current button is more like a parallel and equal state to the following specific filters. For the same feature on Google Maps, it can effectively reduce the user’s concerns by removing the word ‘Filter’ and using simple symbols to represent the summary as much as possible.
Fun facts about filter
Managing filtering based on the user’s most common needs is a design consensus, but don’t ignore the unusual but thoughtful selection options that can surprise users and make them potentially “sticky users”.
Some of the amenity options are inspirational filter candidates. Such as ‘Vegan’, ‘Good for Kids’, ‘halal’, ‘Happy Hour’, ‘Free Wi-Fi’, etc.
Visual Design
Dollar Signs
Is the price range implied by the dollar sign realistic? Do you wonder why you always spend more than the average price?
There is no doubt that it is better to provide a precise expense rather than just provide a rough range. The concept of low price and high price is different for different people.
In fact, there’s a lot of uncertainty, such as “How are dollar signs calculated on Yelp, and who calculates them?”
This is a good time for users to include how much they spent in their reviews.
By the way, when you’re browsing in the hair salon, do you know how much that $$$ really represents? If all businesses had a $$$$ ceiling, would the range of hair salons and restaurants be the same?
Similarly, if yelp is used outside North America, is the price shown in dollars or local currency?
Check-in
How do we integrate feature check-in into the overall user experience? It’s hard to ignore the “Check-in” button since it occupies such a prominent space on the page. In fact, few people actually use this feature, which indicates the button is very confusing.
After exploring all the check-in related contents of the entire app, we found a list of check-in Regulars right under the comment area, where is not obvious at all, when you click on it, you will find a list of users who visit this merchant most frequently. Meanwhile, the list does not tell us the actual number of visits and not every merchant has this part.
Then what happens when we click on “check-in” directly? We were lucky to find that the merchant gave us a coupon. However, this coupon is more like a random drop, because there is no relevant reminder about the coupon at the Check-in entrance.
Through research, it can be found that yelp’s attempt to put the Check-in entrance in an obvious position may be related to motivating users, but will check-in definitely give rewards?
We then think about “How do we integrate feature check-in into the overall user experience?”
In Dianping, as soon as a user completes a review, this specific restaurant would be automatically tagged as ‘visited’. In this way, it is convenient for users to collect restaurants they have been visited.
Structure & Design Principles
Information Hierarchy
The pages of the Yelp are so long that the information you really want is buried. Most Yelp users find the scroll to be too long before they can read others’ reviews, as it is pushed to the bottom of the page.
Yelp should rank all the information in order of importance. People would ask what is the most important information? Is it the information module that brings the most revenue to yelp or the module that brings the most useful information to users? We may be able to analyze in detail how to find a balance between the two important orders later on.
For example, why is this information page laid out as an individual page instead of being folded to a second-level/sub page?
Usability Heuristic
In the latest version, with implementing various illustrations, Yelp achieved a more clean and modern feel, but it should also become more in line with the Usability Heuristic.
As clicking the info icon of Halal, I was expecting to see the definition of Halal, instead of this legal reminder.
The Aa icon on the review page is actually not clickable. We thought it was used to change the font size at first, and figure out it actually implies “back to typing”.
The star icon doesn’t represent the comment area very well, and once clicked, the color of the icon changes from grey to blue, but only when you click on the whiteboard will it go back to grey and the comments below will be folded back. Those above violates the principle of Match Between the System and the Real World.
The three-dot button in the “share this business” section doesn’t convey the same functionality as the three-dot in the upper right corner, which is confusing. Using multiple identical ICONS also violates Aesthetic and Minimalist Design.
Recap
We made it this far! Still, there are more interesting topics we have been discussing in our zoom sessions but didn’t have enough time to go into details in this article. Here’s a list of major points that might be helpful if you’re thinking about the logic behind Yelp’s design as well!
- Would it be helpful if the app adds a chat feature on others’ reviews?
- How about providing a fuzzy search as users trying to search under reviews?
- In what context do you think using the expression to comment on others’ reviews as “Funny” or “Cool” will be reasonable?
- Following the information hierarchy, which is a better way to place sponsor information? Yelp currently puts the stack of sponsors at the top of the page.
Upcoming Session
Thank you for reading! Our next week’s app is DoorDash! Hopefully, this gets you excited! We are an app critique team so how can we miss this app?:) What is your experience with this app? Do you like it? Feel free to shoot us any ideas that you have!!
Until next time, stay safe and healthy everyone!! #StayHomeAndCritique :D
