MDH
yelp.png

Yelp Mobile Web Experience

 

Task

Redesign Yelp's user experience flow for mobile web restaurant discovery.

How might we explore, redesign, and enhance how someone explores nearby restaurants. 

Position
Product Design Intern • Design Challenge

Type
User Experience
Information Architecture

Duration: 4 hours

 
1.png
 

Problem Space

1. Upon entering the homepage, users are immediately inundated by three trigger points to open / install the mobile app, wasting a lot of real estate, which could otherwise be used to increase discoverability. 

2. Landing page simply shows a table cell view of various search categories, which are otherwise deep-linked into more tabs. There is no single entry point for nearby places of interest. 

3. After inputting search (restaurants, location), users must make an additional tap to access more information such as photos, and there is no discoverability of other categories such as bars, coffee & tea, etc. 

4. Users are unable to see filter changes in real-time. 

5. Users cannot view important business information (star ratings, $, type, location) in the map view. 

6. In the detail page screen:
• photos are not easily viewable
• user must scroll through multiple reviews to get to directions, call, more info content
• not enough distinction between reviews / tips / highlights information and "People who viewed this also viewed..." content, which is a key entry point for discovering similar / new restaurants

 

 

• User is not a regular / super user of Yelp web / mobile applications
• Common use-case for mobile web interface is for one-time, immediate searches
• User does not have native app installed / has no intent to
• Benefit of mobile web view is for immediate searches and to use and explore Yelp service via third party applications (message, shared hyperlinks, socials)

Assumptions

 
2.png
 
3.png
6.png
 
Other mobile applications scoped: Foursquare, Ebay

Other mobile applications scoped: Foursquare, Ebay

 

Solution -
Focus on surfacing all the rich content (visuals, important info) while minimizing the deep-links and overwhelming text.

LP.png

To get the user immediately discovering nearby restaurants, I've inputted a category carousel on the top bar to allow searches to be quickly done without having to tap the search icon. In lieu of the category table cell, I've included a carousel view that would display five to seven restaurants, so users can easily explore multiple sites while navigating across different categories such as Hot New Businesses. The recently viewed component would appear after the user has tapped into a few restaurants, and this would enable users to re-track their searches, compare across options, and use the home page as the point of orientation.

 
LP_Options.png

These were four other directions I explored for the landing screen of the Yelp site. 

 
Filters.png

To encourage users to discover restaurants in the area, the search bar is filled with recommended metadata of local restaurants, so users are enticed to search those options. In addition, there is a populated view of suggestions allowing for niche categories such as popular searches in the area to the standard categories listed in the carousel view on the home screen. Users can also choose to see more suggestions without having to tap back to the home page. 

After a search is completed, users are presented with a continuous newsfeed scroll - this allows for greater real estate of photos, and users have the option to scroll through photos on the same screen without having to tap into the restaurant (assuming that previewing food photos plays a significant role in making restaurant decisions). This view also surfaces the filter feature on the top bar, so that users can easily see the filtered results in real time and have the option to turn on / off specific filters. When entering the main filter page, users can make adjustments, and the bottom search CTA button updates with the number of unique searches done. 

 
map.png

In the map view, users are presented with an alternative "list view" - the carousel - to immediately see important information (ratings, price, genre of food, distance) without toggling between the list and map view. The filter option is again surfaced to quickly make real-time updates to search results. 

As for the restaurant details page, the carousel component is utilized for users to easily navigate and preview photos of food, and most importantly, information such as reviews, highlights, and more info are bucketed, so users are less overwhelmed and can easily search for desired information. At the bottom of the page, we re-introduced the restaurant component found on the home screen to increase discoverability of similar restaurants, and build component consistency between platform and user.