Yelp Profile Redesign
Case Study
I redesigned the Yelp user profile in 4 days as a challenge. No user or market research was performed for this project, I was instead encouraged to go with smart assumptions. I documented every step of this project below, from goal to final solution.
1. Design Goal
Optimize user profiles to promote social behaviour between existing users and increase user sign ups.
2. Research and Analysis
In order to create a solution that would work for every Yelp user, near-empty profiles of new users and review-packed profiles of elite Yelpers were analysed.
3. Assumptions, Challenges, and Ideas
Assumptions
Users want to interact with one another on Yelp.
User profiles are a good place to foster these interactions.
Fostering social interactions will increase user engagement.
Reviews, feed, compliments and votes are the most social features and should be put forwards.
Challenges
Putting social features forward while keeping other features accessible (i.e. Lists, Bookmarks, etc.)
Making the social feature attractive to visitors and new users, in order to increase engagement.
Make the social features useful fo elite Yelpers who are already power users.
Yelp user profiles to be optimized
Visitors
New Users
Average Users
Elite Yelpers
Social Behaviour the new profiles will optimize for
Exploring user profiles
Reacting (complimenting, voting, liking)
Following interesting users
Posting (writing reviews, adding photos, checking in, etc.)
Initial Solution
Responsive web will be used for mockups. Even if our goal is for users to download the native mobile application, a responsive website is important, as there will always be users who access Yelp on their mobile browsers and computers.
Also, mobile web changes can be shipped instantly, are easier to A/B test gradually and can easily be implemented in native applications if they increase engagement.
4. Building the Solution
Sketches
This process helped highlight the most important features and actions and how social features could be encouraged through the design.
Profile Flow
Features are easier to find and organized through a hierarchy.
Low Fidelity Mockups
Getting closer to the final mockups, this is when I organized the elements within the screens and made tests which would help me make the final design decisions.
5. “Final” Solution
This is final in the context of this project only. More research, tests and iteration would be involved in the process in a different context.
Fonts
The fonts picked are Helvetica Neue and Avenir.
Helvetica is the main font for text and titles, used in Regular and medium. It is already the main font on Yelp’s website and is a reliable, versatile font, good for both desktop and mobile.
Avenir in Medium weight is used for certain elements, like the follow button and the filter bar. Avenir is a softer font that adds more human character. This font too is often used in apps and website, as well as in branding and print.
Colours
The Navigation bar and the buttons are in the Yelp red. This is to assure a present, yet transparent branding and to let people know they are on Yelp’s website.
The follow button and the filter text are Green-blue. This colour is complimentary to the red, while not being too Christmas-y and while being differentiable from other apps and websites.
Links are in blue. A classic link colour for restaurant tags, see more, and details links.
The icons to vote, like, and add to calendar are grey until hovered (on desktop) or pressed (on mobile). They then turn into their specific icon colour.
The rating star is the same orange as the current one on the website.
Material Design Elements
There is a hierarchy between elements of the screen, like the filter tab and the menu tab, represented by the shadows.
Modular Elements
I designed new icons in order to create a coherent, dynamic, and simple interface, encouraging action.
Cards Design
Cards let the user see many visually rich, yet minimal reviews. Cards are on a responsive grid and make the scrolling through a profile more enjoyable. They are designed to showcase reviews and activities like posting pictures, creating events, adding a bookmark. They are easy to interact with through actions illustrated by icons and text.
The cards have been designed considering differences in the content. Their design is accompanied by guidelines.
High Fidelity Mockups
Following
User’s information about the user is better organized and displayed.
The follow button is present on most screens to encourage people to follow users.
The follow button has been prioritized on the profile, but the icon offers the options of message and compliment.
Friends and followers were merged to make connecting with people simpler.
Exploring and Signing Up
Reviews and Feed are easier to explore.
Exploring is more interesting because of the emphasis on visuals and the fact that the first elements a visitor sees on a profile is most relevant to them (i.e. Near).
Visitors without an account can explore profiles, but will see a sign up window when trying to “see more”, or react.
Reacting
Reacting icons are at the bottom of every card. When voting for a review, the options to message or compliment the author appear.
Posting
When a user is on his own profile, options to add a review, check in or photos are presented, to encourage action.
Second level features are better explained to new user with incentive to use them.
Seamless Transitions
The profile is designed on a responsive grid, and designed on mobile first, to ensure a seamless transition to desktop and apps.
6. Takeaways
Less is more
Yelp has many features available for their users, it can sometimes be overwhelming for a first time user or visitor. This is why hierarchy is important in features. Showing only a few first, to engage the user.
Beautiful visuals make a difference
Interacting with reviews and feeds can be difficult or not enjoyable if the information is cluttered or mainly textual. Having pictures as a major element on the cards design of the reviews makes them more interesting to scroll through.
People love exploring profiles
Might as well make it easy for them. Beautiful feeds, composed of cards that are easy to interact with and nice to look at, makes the user experience delightful.
Thanks for reading!
