Yelp Re-Design
Finding problems with Yelp’s desktop experience and solving them.
My Role
UX Designer, UX Researcher
Timeline
July 2022—2 weeks
Tools
Figma, Notebook and Pencil
Project Background
For my UX design class at UC San Diego Extension, I conducted user testing on Yelp's desktop website experience—with its diverse range of functions and widespread popularity, I thought Yelp's website was a good choice for evaluating user experiences and identifying potential design opportunities.
Three participants were asked to complete various tasks while interacting with the website, allowing me to observe and identify areas for improvement.
Three participants were asked to complete various tasks while interacting with the website, allowing me to observe and identify areas for improvement.
Objective
To find 3 problems with Yelp’s desktop website experience and provide solutions.
Process
1
Initial Questionnaire
For the users who have used Yelp before, they are asked the question:
“Are there things that you don’t like about Yelp’s interface?”—the goal of this step is to immediately obtain user problems before going through the task analysis.
2
Task Analysis
Users are asked to complete a set of common tasks on Yelp’s website; during this process users are asked questions—this method is known as contextual inquiry. Users are also encouraged to voice any thoughts aloud that arise.
If the user was able to complete the task, they are asked to give a 1-to-5 usability rating (1=unusable, 5=perfect) and to justify it. If the user could not complete the task, they are given the answer and asked to give their qualitative opinion on it. Data is collected with screen-recording software and note-taking.
3
Narrowing Down the Problems
At this point, several problems have been found via the initial questionnaire and task analysis— they are narrowed down to three.
The three problems chosen are the ones most commonly shared among the user group, and most in need of a substantial re-design.
4
Solving the Problems
The three chosen problems are analyzed, and re-designs of the interface are created as solutions.
3 problems
were found.
were found.
3 problems
were found.
1
The interface for ordering food has two usability issues.
2
The Collections page has two usability issues.
3
It takes too much time to view the entire restaurant menu.
Problem 1
The interface for ordering food has two usability issues:
1/3 users
could not remove items from cart.
2/3 users
were unable to return to the full menu after searching.
Why is this a problem?
Task Analysis #1:
Users are told to remove an item from the cart.
Result:
1/3 users could not complete the task.
In order to remove items from cart, the user must click on the “minus” button to the left of the item. When asked for an opinion on the existing solution, one user said:
“I didn’t notice the “minus” button because it was the same color as the text.”
The user also didn’t notice the minus symbol because it was inside a circle:
“I noticed the circle shape but not the minus.”
Another reason the user had trouble was the inability to change the quantity to “0”.
“There should be an option to set the quantity to 0 because that’s how it works on other websites.”
Task Analysis #2:
Users are told to search for “Shanghai Bowl” by using the “Search Menu Items” bar and then return to the full menu.
Result:
2/3 users could not complete the task.
When a user uses the “Search Menu Items” bar to search for a specific item,
all menu items disappear except for the ones containing the searched keywords.
After searching, 2/3
users could not return
to the full menu.
users could not return
to the full menu.
In order to return to the full menu, users must delete all characters in the search field.
When asked for an opinion on the existing solution, the 2/3 users gave the same response:
“There should be a button or indicator that lets you return to the full menu.”
Interpreting the Results
1/3 users were unable to remove items from cart
due to the “minus” button not being visible/legible enough and the inability to update the quantity to “0”.
2/3 users were unable to return to the full menu
after using the “Search Menu Items” bar due to a lack of subsequent visual indication.
Solution for Problem 1
Before
After
Before
After
Minus button is turned into a red minus symbol and a quantity field is added to the right.
Justification: The color red helps differentiate it from the surrounding text. Taking the “minus” out of the enclosed circle makes its silhouette more recognizable as a minus symbol.
Quantity field allows user to edit quantity without having to open a pop-up window. Typing in “0” will also remove the item.
Quantity field allows user to edit quantity without having to open a pop-up window. Typing in “0” will also remove the item.
An “X” button is added to the “search menu items” bar.
Justification: The “X” button reminds the user that they can clear the “search menu items” bar and return to the full menu.
Menu items are still visible with lower opacity when keywords are present in the search bar—clicking on them will also clear the search bar.
Justification: Fading out the rest of the menu as the user types serves as a visual reminder that they are in control of what is displayed. It also provides another way for the user to return to the full menu.
Problem 2
The “Collections” page has two usability issues:
2/3 users
could not find the "collections" page.
1/3 users
could not remove items from the “Collections” page.
Why is this a problem?
Task Analysis #1:
Users are told to save “Mighty Bowl” to the “Asian Restaurants” collection and then find the “Collections” page.
Result:
2/3 users could not complete the task.
In order to complete the task, users must first click on the profile icon at the upper right, click on “About Me”...
...and then click on “Collections” in the left navigation list.
When asked for an opinion on the existing solution, the following responses were given:
“It’s buried within too many steps; when you add a new item to your Collections, there should be a visual indicator at the top like on other websites.”
“I’m not good with technology, the profile icon in the upper right is not familiar to me.”
“I’m not good with technology, the profile icon in the upper right is not familiar to me.”
Task Analysis #2:
Users are told to remove “Mighty Bowl” from the “Asian Restaurants” collection.
Result:
1/3 users could not complete the task.
In order to complete the task, users must click on the red “bookmark” icon...
...which will bring up a “Save to Collection” pop-up. User can then click on “remove” from the specified collection.
When asked for an opinion on the existing solution, one user answered:
“I had no idea you had to click on that red icon, there should be words that say “remove” next to the icon. Also, when you hover your cursor over the red icon it only says “Save” and not “Remove”.
Interpreting the Results
2/3 users could not find the collections page
because it is buried within too many steps, and due to a lack of visual indication when a new item is added.
1/3 users could not remove items from their collections
because of a lack of verbiage.
Solution for Problem 2
Before
After
Before
After
The red “bookmark” icon is changed to a pencil icon with the text “Remove or Manage” underneath.
Justification: The red bookmark originally only showed “save” on mouseover, despite also letting you remove or save to other collections. It would be better to change the “bookmark” icon to an “edit” icon. A “pencil” is the universal symbol for “edit”—this better conveys the idea that the user can remove the item or move it to a different collection. The color is also changed from red to blue to make it recognizable as a link.
An icon for “collections” is added to the upper right navigation. A red box is displayed briefly each time a new item is added.
Justification: Having a dedicated “collections” icon solves the issue of being buried within too many steps to access. The red box being displayed briefly when a new item is added will alert the user to where they can access “collections”.
Problem 3
It takes too much time to view the entire restaurant menu.
Why is this a problem?
Task Analysis:
Users are told “Read the restaurant menu and pick items as if you were going eat there.”
Result:
3/3 users scrolled to the bottom.
2/3 users scrolled back up and down the menu.
For this task, users are told to view a restaurant menu with the following characteristics in order to test the time duration of their decision making:
•From a restaurant that is new to all users.
•From a restaurant with a large menu.
•From a restaurant with a large menu.
3/3 users scrolled all the way down to the bottom of the page. When asked “Why did you scroll all the way to the bottom?”, all three users gave the same response:
“To see all of the available menu items.”
2/3 users scrolled back up and back down several times. When asked why, these were the responses:
“Because I wanted to view the appetizers.”
“Because I’m going through the menu and trying to decide what I want.”
“Because I’m going through the menu and trying to decide what I want.”
Interpreting the Results
3/3 users viewed the entire menu
during their task of deciding what to eat.
2/3 users scrolled back up and back down
when trying to choose menu items—therefore the less the user has to scroll, the faster they can get to deciding what to eat.
Solution for Problem 3
Before
After
Before
After
Categories are divided into multiple columns.
Justification: By allowing multiple columns for categories, the extra screen real-estate on desktop computers can be better utilized—this will also reduce the time spent on scrolling vertically, which will allow the user to make decisions faster.