The power of minimalism: how we changed the design of Yelp
Collective design is death from a thousand cuts. He dies slowly, as he receives more and more opinions from different people, until he begins to look like a jumble of scattered pieces. It should not be so - especially in such large companies as Yelp.
We decided to change the design of their site to show how correctly conducted usability test helps in this. We were based on our design experience in different companies, and we believe that the usability test is the best defense for design solutions.
')
In the event of a dispute, put the user's company between themselves and the owners, and the evidence will speak for itself.
Since we have already added the ability to test usability in UXPin , we thought that this experience would give us more insight into how other people can use our tool.
Let's take a closer look at the process that led us to change the design of Yelp to something resembling AirBnB.
As written in the Usability Testing Guide , one of the most important steps is to determine who you are designing for. Once you know your audience, you can select the right users to test your design.
As you can see from the graph, Yelp has no problem with users.
This meant that we need to focus on those users who were not new to the resource, but did not visit it so often to keep track of all the changes. In our experience, reviews of such users best reflect both the wishes of newbies and experienced users.
We did not pay attention to age, gender, income or experience on the web. We chose five users - according to statistics, such a set determines 85% of the problems of the site).
Here are examples of the tasks that we set for users. After they were completed, we asked users if they were able to cope with the task and asked them to assess the level of difficulty. These tasks show how Yelp handles its main function - the business search system.
1. You need to reserve a room in a restaurant for 15 people. You are looking for an Italian restaurant with a good atmosphere. Your budget is $ 20 per person. Find a restaurant on this description closer to you.
2. You are planning to celebrate your best friend's DR. Find 10 bars near your home that you would like to look at to organize a party. Save them in bookmarks so that you can easily find them later.
3. You drive along Boise, Idaho, and your car starts making weird sounds. Your companion recommends you car service at 27th St. Use Yelp to find out if it is open at 8 pm on Tuesday.
4. Return to 10 bars for a party. Choose a bar based on your friend's tastes.
1. Use Yelp to find a restaurant near you where you have not been. Do this in no more than 5 minutes.
2. You need to reserve a room in a restaurant for 15 people. You are looking for an Italian restaurant with a good atmosphere. Your budget is $ 20 per person. Find a restaurant on this description closer to you.
3. Are you looking for something interesting and unusual that you can do next door on the weekend. Find a concert or other event through Yelp
4. You drive along Boise, Idaho, and your car starts making weird sounds. Your companion recommends you car service at 27th St. Use Yelp to find out if it is open at 8 pm on Tuesday.
Thanks to remote testing, we managed to get results in just an hour. That's what we came up with. Links from our options lead to working page prototypes.
All five test cases used the search string — even for tasks for which menu categories were appropriate. Four immediately went to the search, one tried to use the menu, but got confused in it and went to the search.
Now the search is at the top of the page, there is also a list of cities next to it, which does not even correspond to the current location (see, SEO tricks). We decided that since the main thing in Yelp is search, why not center it?
The search box is clearly highlighted, there is a contrast in color, and at the same time there is free space around. Since another important aspect of the service is writing reviews, we added a link to write a review. The list of cities went to the footer.
We decided that categories are not successful because they are in disarray and are in an unobvious place.
Instead of the “list” template, we chose the “card” template. It is great for displaying various information that does not turn into an ocean of text.
Our design is more visual, and there are only 8 categories. To uncover others, you have to poke into Other Businesses. And we moved the category a little higher.
An important part of the service is attracting users through Events, so it’s strange that they were stuck in a corner. Before them there is difficult to reach - it is not surprising that users did not use them.
Now they are either hidden on the right in the upper navigation, or are hidden in the sidebar in the middle.
We reworked the design and placed the Events in the middle. On the left you can insert a special photo or video. Access is facilitated, which is necessary to achieve a business goal.
When we watched the videos of users and listened to their comments, we noticed that they all complained about the visual trash and the abundance of information on the site. If you look at the Yelp page, this mess is visible, which indicates a collective design development .
Sidebar cluttered up. You can even remove it, then the content will be better perceived, being in the middle of the page.
We removed the side panel and moved the minor items to the footer. It also contains what you need for SEO.
Our tests have shown that the hierarchy and nomenclature of “Special Filters” and “Sorting” require processing.
The most important filters are “Open Now”, “Accepts Credit Cards” and “Serves Dinner”. Also, users are confused in prices. 7 filters (such as “Has a DJ”) were rejected as unnecessary.
Current filters and sorts have no hierarchy. Everything is scattered.
Our design isolates important filters and groups sections into squares. In each of them, only 4 options.
For 90% of users, the “Open Now” filter was important, so we selected it. And, since it didn't add a lot of text, we clarified pricing issues by specifying ranges.
Results page also requires processing. Three of the five test subjects mentioned that pictures of food would influence their decisions. They would like to see them right in the search results.
Most users define the atmosphere from the photo, but the thumbnails of the photos are very small. The search page also cannot save restaurants to bookmarks. Only a third of users were able to save restaurants for further research.
We enlarged photos and made the button “Save for Later” for bookmarks. The new design follows rule F and highlights the address with the phone.
At the end of the work, we noticed that our new design resembles AirBnB. When you look at their page it becomes clear. We were not going to recreate AirBnB, but their design is very effective and visually pleasing.
Their flat interface allows you to easily find a home (which is their main task). When you understand that the main task of Yelp is to search for businesses, it becomes clear that the differences between the sites are minimal. Therefore, it is not surprising that the design turned out to be so similar.
We understand that the community plays an important role in Yelp, but sometimes it is better to concentrate on the main things.
It is difficult to design, because solutions are sometimes not obvious. In our case, the usability test has shown that sometimes it is simply limited to basic things. If you do them well, everything else comes automatically.
We decided to change the design of their site to show how correctly conducted usability test helps in this. We were based on our design experience in different companies, and we believe that the usability test is the best defense for design solutions.
')
In the event of a dispute, put the user's company between themselves and the owners, and the evidence will speak for itself.
Since we have already added the ability to test usability in UXPin , we thought that this experience would give us more insight into how other people can use our tool.
Let's take a closer look at the process that led us to change the design of Yelp to something resembling AirBnB.
Choose the right users
As written in the Usability Testing Guide , one of the most important steps is to determine who you are designing for. Once you know your audience, you can select the right users to test your design.
As you can see from the graph, Yelp has no problem with users.
This meant that we need to focus on those users who were not new to the resource, but did not visit it so often to keep track of all the changes. In our experience, reviews of such users best reflect both the wishes of newbies and experienced users.
We did not pay attention to age, gender, income or experience on the web. We chose five users - according to statistics, such a set determines 85% of the problems of the site).
Create the right tasks
Here are examples of the tasks that we set for users. After they were completed, we asked users if they were able to cope with the task and asked them to assess the level of difficulty. These tasks show how Yelp handles its main function - the business search system.
Tasks: Group 1 (Yelp users)
1. You need to reserve a room in a restaurant for 15 people. You are looking for an Italian restaurant with a good atmosphere. Your budget is $ 20 per person. Find a restaurant on this description closer to you.
2. You are planning to celebrate your best friend's DR. Find 10 bars near your home that you would like to look at to organize a party. Save them in bookmarks so that you can easily find them later.
3. You drive along Boise, Idaho, and your car starts making weird sounds. Your companion recommends you car service at 27th St. Use Yelp to find out if it is open at 8 pm on Tuesday.
4. Return to 10 bars for a party. Choose a bar based on your friend's tastes.
Tasks: Group 2 (not Yelp users)
1. Use Yelp to find a restaurant near you where you have not been. Do this in no more than 5 minutes.
2. You need to reserve a room in a restaurant for 15 people. You are looking for an Italian restaurant with a good atmosphere. Your budget is $ 20 per person. Find a restaurant on this description closer to you.
3. Are you looking for something interesting and unusual that you can do next door on the weekend. Find a concert or other event through Yelp
4. You drive along Boise, Idaho, and your car starts making weird sounds. Your companion recommends you car service at 27th St. Use Yelp to find out if it is open at 8 pm on Tuesday.
Analysis of the results and the start of development
Thanks to remote testing, we managed to get results in just an hour. That's what we came up with. Links from our options lead to working page prototypes.
1. The homepage should be focused on the search field.
All five test cases used the search string — even for tasks for which menu categories were appropriate. Four immediately went to the search, one tried to use the menu, but got confused in it and went to the search.
Now the search is at the top of the page, there is also a list of cities next to it, which does not even correspond to the current location (see, SEO tricks). We decided that since the main thing in Yelp is search, why not center it?
The search box is clearly highlighted, there is a contrast in color, and at the same time there is free space around. Since another important aspect of the service is writing reviews, we added a link to write a review. The list of cities went to the footer.
2. To design categories more brightly and more structured.
We decided that categories are not successful because they are in disarray and are in an unobvious place.
Instead of the “list” template, we chose the “card” template. It is great for displaying various information that does not turn into an ocean of text.
Our design is more visual, and there are only 8 categories. To uncover others, you have to poke into Other Businesses. And we moved the category a little higher.
3. Simplify the search for events
An important part of the service is attracting users through Events, so it’s strange that they were stuck in a corner. Before them there is difficult to reach - it is not surprising that users did not use them.
Now they are either hidden on the right in the upper navigation, or are hidden in the sidebar in the middle.
We reworked the design and placed the Events in the middle. On the left you can insert a special photo or video. Access is facilitated, which is necessary to achieve a business goal.
4. Do not be afraid of the footer
When we watched the videos of users and listened to their comments, we noticed that they all complained about the visual trash and the abundance of information on the site. If you look at the Yelp page, this mess is visible, which indicates a collective design development .
Sidebar cluttered up. You can even remove it, then the content will be better perceived, being in the middle of the page.
We removed the side panel and moved the minor items to the footer. It also contains what you need for SEO.
5. Filters and sorting require visual hierarchy.
Our tests have shown that the hierarchy and nomenclature of “Special Filters” and “Sorting” require processing.
The most important filters are “Open Now”, “Accepts Credit Cards” and “Serves Dinner”. Also, users are confused in prices. 7 filters (such as “Has a DJ”) were rejected as unnecessary.
Current filters and sorts have no hierarchy. Everything is scattered.
Our design isolates important filters and groups sections into squares. In each of them, only 4 options.
For 90% of users, the “Open Now” filter was important, so we selected it. And, since it didn't add a lot of text, we clarified pricing issues by specifying ranges.
6. People love pictures. More pictures.
Results page also requires processing. Three of the five test subjects mentioned that pictures of food would influence their decisions. They would like to see them right in the search results.
Most users define the atmosphere from the photo, but the thumbnails of the photos are very small. The search page also cannot save restaurants to bookmarks. Only a third of users were able to save restaurants for further research.
We enlarged photos and made the button “Save for Later” for bookmarks. The new design follows rule F and highlights the address with the phone.
Imitation is more than flattery
At the end of the work, we noticed that our new design resembles AirBnB. When you look at their page it becomes clear. We were not going to recreate AirBnB, but their design is very effective and visually pleasing.
Their flat interface allows you to easily find a home (which is their main task). When you understand that the main task of Yelp is to search for businesses, it becomes clear that the differences between the sites are minimal. Therefore, it is not surprising that the design turned out to be so similar.
We understand that the community plays an important role in Yelp, but sometimes it is better to concentrate on the main things.
It is difficult to design, because solutions are sometimes not obvious. In our case, the usability test has shown that sometimes it is simply limited to basic things. If you do them well, everything else comes automatically.
Source: https://habr.com/ru/post/253246/
All Articles