Portrait taken at Photobooth SF

I am a Designer at Facebook, previously at Pulse, Advisor at Helpshift, Mindcrafter at Eunoia Labs, Music lover & Manchester United supporter who has been accused of having affairs with Apple products. I blog about design, startups and life.

GET IN TOUCH

YELP (Concept)

Web

Design a better interface for creating lists from reviews on Yelp.

The task for redesigning the list feature on Yelp was part of the design task that Yelp had given me to assess my skills while interviewing for a position of UI Designer. This was done by me while still in India, which meant I had never used Yelp before, thus making this exercise all the more interesting.

Information Architecture

The first step was trying to understand the features, navigation and userflows on Yelp. A precursor to this step was understanding the underlying information flow/architecture on Yelp. I made mindmaps of the associations of features and also of the navigation of the Yelp site.

Navigation

In the existing navigation at Yelp, features like Mail which are aimed at User to User conversations are placed in the Primary Navigation as are promotional links like Invite Friends which might be better suited within the pages and NOT in the Primary Navigation. Also in my opinion not every page needs to have the full fledged search dashboard. Users whose prime need is to search would have done the same on the homepage (which should ideally consist of a full fledged search), however the internal pages can save screen space without compromising severely on the user experience by fetching the current location of the user (using profile info, IP or Geo-location) and allow search using that for internal pages. Of course with the first search the user will land on the search page which again has the full fledged search dashboard with 'What' and 'Where' forms. Attached Information Tree gives a better and hopefully coherent navigation structure.

Yelp Navigation

Features

Places/Businesses are at the heart of all the features on Yelp. These Places are closely connected to Reviews in the Yelp world which are written by a loyal part of the community. To improve the utility, usability and accessibility of the List feature on Yelp, they need to be closely integrated with Reviews. I proposed to allow users to not just to make Lists as a separate process (as it is currently) but also while occasionally scanning the Reviews written by them. This is captured along with the correlation of features as below.

Yelp Features

A Basic SWOT Analysis

A SWOT analysis helps in logically understanding the core competencies and opportunities for a business. Since I had so less of prior knowledge having never used the product, this was a quick way to understand the bigger picture.

Strength
  • Will be used by most loyal Yelpers
  • Info about lots of places sharing a commonality
  • Highly Opinionated and hence Personal
Weakness
  • Poor visual hierarchy
  • Too cluttered
  • Cannot add reviews from the Review page
  • Number of steps to create list can be reduced to one
Opportunity
  • Venues should show up which list they feature in
  • Repository of Lists (popular) from Main Navigation
  • Public/Private Lists
  • Icon/Badges assigned to lists based on categories or an algorithm that checks the relation between items on the list
Threats
  • Trips feature from Gowalla (Not exactly same)

Who is the common user?

Due to the inherent nature of being created from one’s own reviews, the lists are highly likely to be created by active Yelpers in comparison to new users. These users are already familiar with the interface of Yelp and hence complexity can be introduced to aid a quicker process. This gives the Drag and Drop approach a very high advantage as compared to the Checkbox selection of items or adding reviews individually. 58% Yelpers lie in the age group 24-44. Another 20% in 44-54. Use of large and clear typography along with non cluttered minimal interface is hence suggested by the numbers.

Yelp Who writes lists

While it is great to understand the common/average user, it is always best to see the needs of the extremes because if those are met, the averages will take care of themselves. The extreme users in Yelp could be either someone with very less reviews or someone with reviews in the range of 500s or 1000s. The design consideration in the first case is to make the interface intuitive while in the latter it is to aid the searching and finding of the appropriate reviews within those 1000 reviews. Both these issues have been dealt accordingly in the design as will be revealed later.

Yelp Persona

Issues with current design

This is how the Yelp List creation process (2 step) looks like as of now.

Yelp Create List

Yelp Add Items

We do not really need it to be a two step process. Both the steps can be merged into one. Also since the user is a regular user of Yelp, it is not critical to give them ideas of what the list might contain.Below is the List page where one can access all the lists written by them as in the current design.

Yelp Current Profile

As can be seen above, the side profile column has a lot of information. Do we really need all of this on each page? The “Create List” Button is not the primary focus on this page. Subdued by the colors of the elements surrounding it. Due to the placement of two lists in one row, there is a need for horizontal as well as vertical scanning. Might be better to use one List per row and improve the visual hierarchy of the page.

Wireframes

The wireframes shown below aim to solve most of the problems in the existing design. The profile info column has been shifted to right to allow focus on the primary content of the page. The alternate light and dark stripe in the list page allows easy scanning of lists. No more horizontal as well as vertical scanning to view lists. The above two step process has been reduced to a one step process.

Another feature added is the ability to create lists on the fly via contextual menu. It allows users to add reviews to existing lists or create a new one. The new list creation is aided with a modal window which gives a feeling of getting things done without “leaving the page”.

Also as can be seen the header and footer have started taking a far more streamlined shape that allows users to not always be bothered by the big search dashboard but still keeps full fledged search within a single click. Also the links pertaining to users accounts have been kept accessible via a single drop down.

Another choice was between using tabs or vertical side navigation for the various features accessible via user profile (tips, mail, reviews, lists, bookmarks etc.). However, due to high number of features I decided to go ahead with using conventional tabs to avoid usability issues arising on users with small screen who would need to scroll down to reach for links like events, bookmarks or compliments which would lie at the bottom.

Yelp List Page

Yelp New List

Yelp Review page

Yelp Review page New List

Visual Design

The process of visual design was supplementary to the process till now. As can be seen, the current Yelp design has a very Web 2.0, plasticy feel. Somehow, it does not radiate warmth and openness that the community of Yelp is symbolic of. I decided to go with a more open visual aesthetics that show the warmth and openness. Since the process of writing a review is a very open process, the interface and interactions should supplement it and aid users to write better comprehensive reviews.

Other features include clear call outs, and large typography to aid the user base which is mostly in 30s and 40s. Also the forms have been made highly interactive to aid the process of creation of lists. The Your reviews part of the Create List page now features a search box that allows users to filter reviews based on keywords/categories besides the conventional Sort by options.

Yelp List Create Page

Yelp List Description

Yelp List Drag and Drop

Yelp List Multiple Drag and Drop

Yelp Reviews

Yelp Reviews Dropdown

Yelp Reviews Modal

Yelp Header

Yelp Footer