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.
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.
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.
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.
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.
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.
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.
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.
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.
This is how the Yelp List creation process (2 step) looks like as of now.
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.
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.
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.
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.
