Yelp Feature
Background
Yelp is one of the largest user review platforms that connects local businesses with their customers. Its positive crowdsourced reviews are one of the crucial ways businesses find popularity or stay competitive. It is most well-known for its Restaurant category, where “Foodies” (and any other food-loving individual) can find business information, write reviews and post pictures about their experiences at a certain restaurant.
Objective
To implement a new feature that enables users to continue to discover and enjoy restaurants. The design should embed smoothly within the current Yelp iOS platform and a landing page to promote this new feature.
Project Details
Tools:
Figma
Duration:
5 weeks
20 hours/week
Role:
Solo UX Researcher & Designer
UI Designer
Phase 1: Research
Research Goals
To uncover competitor standards and features
To determine the frequency and length of time spent on the app
To learn what influences Yelpers to use the app
To discover reasons why Foodies leave reviews
To understand ideals and frustrations of being a Foodie or a reviewer
To learn about the features used on the app
Competitor Analysis
Competitor analysis was the first step to my research because I wanted to find direct and indirect competitors with similar company activities and features, and to gain knowledge on industry standards. Initially, I had thought that I would create a new social feature for the app, and picked social review sites and apps with restaurant features to compare with Yelp.
What I learned is that Yelp has many social features in comparison to direct competitors - such as connecting with friends on Facebook and interacting within the app to collaborate. Making a competitor analysis graph helped with understanding that Yelp’s engagement and retention are lower than its competitors, but has more restaurant details than its competitors.
Main Takeaways
Yelp is not as “aspirational” as other social media apps, like Instagram with their “Foodie” influencers, since the reviews are unpaid and can shed light on the negatives about a business
From the customer side, there is a lot of criticism about having paid reviews pushed to the top of the list
It is getting harder for the younger generation to trust the app when they want to make their own decisions other ways
Overwhelming unhappiness from restaurant owners about bad reviews and having to pay Yelp for advertisements
Users liked finding new businesses and restaurants all in one place, and being able to use the app for read reviews
Interviews & Survey
The way I obtained quantitative and qualitative data was through a survey and interviews of Yelp users and “Foodies” to learn about the their habits and attitudes towards the Yelp app. The top insights are below:
Participants
4 interview participants
9 survey participants
Ages 23-31 years old
From Illinois, California, Thailand (experiences in Las Vegas)
Survey & Interview Summary
Who are “Foodies?”:
Knowledgeable in food and associate food with happiness
Share experiences/passion for food with others
Like exploration and trying new places to eat
Usage of App:
Most participants wanted to go to restaurants with a large number of reviews
55.6% (survey) and 75% (interviews) said no less than 3 stars
55.6% of users spent less than 5 minutes looking at reviews and ratings
Wants:
Exploration and discovery of new places to eat
To be able to make informed decisions about a restaurant through reviews and ratings
Ideals:
Finding a faster way to make decisions
Finding something intriguing with a restaurant to relate to
Word of mouth reviews preferred over app
Phase 2: Define
Persona & Customer Journey Map
I created a persona and a customer journey map about April - a Foodie - to help guide me through insights of the research phase. I took the pain points of being indecisive towards picking a restaurant and exploration of new restaurants to guide my customer journey map through April’s decision to find a restaurant to eat at with friends.
Task Flow, User Flow & Sitemap
After creating the persona and the customer journey map, I decided to focus on my feature on a restaurant and food randomizer - in order to help decide on what and where to eat. This feature would increase the engagement with the app, minimize indecisiveness, and create discovery of new places to eat.
The task flow and user flow were easier to visualize after the decision to create this feature, and mimic the actual flow of the user’s decisions and steps towards picking a place to eat.
I also created a sitemap to show all the places to implement the feature. The wireframe prototype brings to life the user flow from using the Yelp app homepage to the randomizer’s homepage, and also from the Restaurant category search page.
Phase 3: Design
Lo-Fi Wireframes
I created the wireframes drawing inspiration from the UI elements of other Yelp features and designs, such as the Your Preferences and the Deals & Offers features.
However, Yelp’s UI kept changing on me while I was creating the wireframes - making it challenging to adhere to the most current version of the iOS app designs. The feature that changed between wireframes and mockups were the category icons on the homepage and restaurant page - these icons were not there the first time I researched the app. I realized this could have been from an app update on my phone.
In order to make sure that I had the most current design, I kept referring back to my mobile app to make sure that nothing kept changing up until I made mockups. I would screenshot the app pages and overlay the image with my grid to make sure the design was as accurate as possible.
In addition, Yelp’s grid was also challenging to adhere to in some spots like the titles of restaurants with its restaurant information and images. I had to approximate the spacing between these and use my measurements with the screenshots in order to make the design evenly spaced out.
Phase 4: Test
Usability Test
I conducted a usability test on the lo-fi wireframes in order to make revisions on the design in the mockups. However, the usability test seemed to be a bit difficult for users this way. I believe this was from the inability to imagine the design, CTAs and pictures - which caught users off guard. In addition, I had users go through the series of questions as a way to narrow down the search radius and preferences. However, a few participants felt that they would use the “skip” button to go straight to restaurant results instead of answering the questions.
Despite these complications, most participants enjoyed the idea of being able to make decisions more quickly on Yelp.
Main Takeaways
Feature Homepage
Option CTA for food/cuisine randomization vs. restaurant CTA
Confusion about the randomly restaurant selected option on the feature homepage
Cuisine/Food Category Pages
Toggle for categories was overseen
Needs to "flow forward" in see more page instead of going back to picks
Category "Your Picks" to be displayed better on the See More Page
Location search box too prominent and may not need to be seen in category pages
Restaurant Question Pages
Price preference could be added
Affinity Map
I created an affinity map in order to work through the usability test insights, and evaluate the main priorities of the revisions/mockups.
Mockups/Revisions
The main revisions were adding pages and design elements from takeaways. I did not change the category toggle between the cuisines and the foods/drinks because I felt that with the mock-up brought attention to this over-seen feature. I also did not change how noticeable the skip and back CTAs were because they aligned with Yelp’s UI kit.
The mock-up prototype also expanded to have 3 different flows:
Having the feature help decide between bubble tea and coffee, and continuing to end the flow on restaurant results
Having the feature help decide between bubble tea and coffee, and continuing to end on the error page with no results
Having the feature help decide between restaurants without a category of cuisine or food/drink, and continuing to end the flow on restaurant results
Takeaways
From this project, I learned how to keep a design within an existing UI Kit. This was challenging because I felt more constricted with the way the app could be presented and the CTA’s and toggles within the feature. Also, the UI to Yelp’s iOS app kept changing while I was creating wireframes, making it hard to adhere to to its current UI designs.
I also learned how more about Figma prototyping as I went along with my revisions and mockups. I am always excited to learn how to make my prototypes look complete and engaging.
Interested in hearing more? See my contact information in the footer below!