Yelp Mobile App Redesign

Heuristic Evaluation, Contextual Enquiry, Card Sorting

MY ROLE

Heuristic Evaluation, Contextual Enquiry & UX Design

TOOLS

Invision, Adobe Indesign, Adobe Photoshop

DURATION

September to December 2016 (9 Weeks)

PROJECT TYPE

Group Project

TEAM

Manisha Goenka Omprakash, Vasudha Verma, Kruthi M Shreesha, Jerrin J Chungath

SUMMARY

Yelp is a service based web and mobile application for discovering local businesses. Yelp has over 30 different categories of business listings available. For this project, I evaluated the interface to improve “restaurant search and reservation process”. We also improved the bookmarking feature.

Overview

Problem Statement

To make Yelp’s reservation process and bookmarks more efficient for novice and expert users.

My Role

Starting with the evaluation phase, we conducted heuristic analysis of the existing design and ran user study for identifying user’s pain points and frustrations. We evaluated the interface based on qualitative and quantitative metrics and compiled results in terms of Task Completion Rate, Task Satisfaction, Number of Errors, etc. For the redesign part, I was responsible for card sorting with 3 users and creating initial paper prototypes. The prototypes were tested and low fidelity wireframes were created based on feedback. After multiple iterations, we created the final high fidelity wireframes and made a prototype. We created a poster to demonstrate the UX process and techniques used in the redesign of Yelp android app.

Workflow

Phase 1 - Evaluation

The Business

  • Yelp has gathered a total of 25 million reviews since its inception in 2004.
  • Yelp has potential for increasing revenue for 20 million local businesses by consumer reviews and reservations.
  • Being mobile contributes to more reviews and getting reservations instantly. It acquired SeatMe in 2013 to enhance its restaurant reservation space.
  • The Yelp app has 23 million average monthly mobile app unique users.
  • 72% of searches on Yelp comes from mobile devices across the Globe and 60+% of Yelp content (reviews and photos) are generated on the Yelp app.

User Profiling

For the purpose of this report, we generalized the large customer base of Yelp app and created two personas: Sheldon, the expert level user and Cynthia, the occasional user.

Contextual Enquiry

We tested 9 participants for usability by comparing Yelp, Opentable and Google based on the following quantitative metrics. The participants were asked to book a fine dining restaurant for 9 people within 5 miles of their current location. The budget was $30 per person.

Usability Evaluation Summary

1. Users need lesser number of steps to achieve desired task

8 out of 12 users complained about the number of steps involved in completing the tasks they were given. The first task required changing filters and then coming back to the search menu which was cumbersome to many users. Most participants initially anticipated that the task can be complete in 4-5 steps, but ended up taking more than 10 steps to complete the task.

2. Users need better tools to find data with efficiency and accuracy

The second task was given to users who had more than 50 bookmarked items. The participants were required to find a preselected bookmarked place from their list of bookmarks. Most of the users took long time and they could not recall why exactly they had bookmarked a specific place (eg: was it the reviews they liked, the location or the food preference). The bookmarks page comprises of a list with all categories of businesses the user had ever marked without any specific categorization. This led to confusion and frustration for the user.

3. Visual presentation system

The users could not read the heading due to the contrast between background image and the text. According to participants, there is a lot of information available at a time and there is no information hierarchy which highlights important information. Due to this, users had to do a lot of vertical scrolling and found it tedious. Also 3 out of 5 users did not understand the meaning of certain icons (Activity, Filter) without proper labels.

Suggested Usability Enhancements

  • Improve information design and architecture by organizing, structuring and labeling content in an effective and a sustainable manner.
  • Provide perceptible affordances for easy accessibility of features and information to increase efficiency.
  • Facilitate recognition to reduce information overload for users. With regard to this, the process of creating, maintaining and finding bookmarks must be made simpler.
  • Focus on 'Subtractive Design' in order to strengthen the core elements of the application. Provide constructive advice for error recovery. Also reduce unnecessary filter options to make it more user-friendly.
  • Identify user's search history, location, cuisine preference, interested events/services and use it to cross-pollinate information across pages thereby making the system smarter.
  • To enhance visual design, establish the right contrast of colors and improve typography and iconography.
  • Enable users to easily communicate with the system by focusing on visual consistency.

Key Takeaways

  • Do not load users with information, give them what they need based on the context.
  • Allow easy retrieval of data and provide steps to recover from error
  • Remember user’s preferences and give suggestions based on that data.
  • Make interface welcoming and not a battleground, where completing a task becomes a chore.
  • Visual design enhancements can make the user experience better.

Phase 2 : Redesign

To reimagine the restaurant reservation process in less than 10 steps and bring clarity with bookmarks organization we used the following tools and techniques to improve the initial user flow.

  • Card sorting to select and eliminate features
  • Low fidelity prototypes with pen & paper
  • Usability Testing with low fidelity prototypes (5 participants each for both designs)
  • Wireframes with Sketch for high fidelity prototypes
  • Creating prototype with Invision
  • Usability testing with high fidelity prototype

Booking a table in restaurant is breezy

Speaking to users and continually iterating wireframes helped us to evaluate our decisions about having a clear process with minimal effort. Based on the heuristic evaluation, we addressed issues such as redundancy in information, typography and color schemes, missing features, label design, consistency and information architecture. We also uncovered opportunities to improve Bookmark section by adding Collections feature for personalization.

Paper Prototyping

We created two alternatives for home page, filter page, restaurant list page, restaurant page, bookmark page. Out of 2 designs, the first design was favored by 4 out of 5 users. According to participants, the first design was easy to understand and aesthetically appealing.

Card Sorting

We conducted card sorting to understand visual hierarchy for filter menu in Yelp. Currently there are 28 filter options, which took 5X more scrolls times to get to the last option. By using card sorting we reduced this by 60% and chunked them into groups to reduce cognitive load on users. 5 participants were given 2 sets of cards and asked to arrange according to their preference and remove options which they seem irrelevant.

Results

The results indicated that all participants started initially from search bar and not the restaurant option in the home page. Yelp being a discovery platform, search feature is to be prominently located along with flexible options based on user’s mental models. The user must not be forced to follow a certain task flow. The existing design also does not help with a plethora of options for filter, when users are short of time. There is no option to through one’s bookmarks, instead users have to go through individual bookmark. The new design focuses on all these aspects and maps user’s goals to the search criteria. The users can always modify their query without scrolling endlessly for filters. According to all users, real estate above the fold was wasted with no unnecessary information. The redesign has key features like Call, Message, Menu & Directions readily accessible in the restaurant detail page.

Final Poster

Final Prototype

Project Impact

Lessons Learnt

  • How to conduct detailed heuristic evaluation based on usability principles.
  • Make user flow fluid and easy.
  • How to communicate and work with diverse teammates.
  • How to incorporate research inference in your design.

My Learnings

  • Doing usability study changed my perception about the product completely.
  • I observed struggles of the users in real world under different context.
  • Developing more empathy towards users and designing for them should be the main focus of our design. We should make the user flows very fluid and easy and nowhere should user feel lost or out of control.

Limitations

  • Due to the limited time, we chose to redesign two important features - Restaurant search and Bookmarks.
  • Our participants for user testing were limited to friends and family.
  • For the final review, we created a medium fidelity clickable prototype in Invision. With more time we could have explored a fully functional prototype with features.

MADE WITH IN 2017