Yelp User Profile Page Re-Design The user profile page for Yelp users has always scared me. Inundated by massive amounts of information, I find myself having difficulty focusing on important pieces of information, with my eyes being thrown frantically across different parts of the page.
Challenge How do we design a Yelp user's profile page in a way that displays thoughtful visual heirarchy and ease of use? How can we highlight the most important functions and pieces of data on a user's profile? The major pain points I identified through this project are as follows: -clutter and lack of visual heirarchy -inconsistent design language between mobile and web platforms -navigation bar is uninviting for use
Process By analyzing the components of the existing site, I found that much of the information was redundant and poorly organized. I organized the site by highlighting Overall information and Reviews, the most important areas when viewing a user's profile, in red and orange. Friends, Compliments and Lists (in different shades of blue), were seen to me as more of specific information serving a seconday importance- they provide additional, specific information, rather than core user data. The lack of heirarchy and organization is glaringly obvious- similar elements are detached and present no hint of logical flow.
Re-Designed Layout The redesign begins with a 2-column design, rather than the current 3-column layout, which reduces clutter and fares better with the eyes due to the reduced amount of horizontal read. The top section of the site was designed to contain the most vital information when viewing a user's profile. The area right below which now presents the user's recent activity provides a better idea of what the user has been up to (compared to just a long list of reviews). The info below the user's picture (Friends, Compliments, Lists) provides a quick overview of more specific data, all of which is accessible in the navigation bar.
At A Glance The very first thing a viewer will notice when landing on a user's page, is this bold red bar. Here, the most important info of the number of friends and reviews is available. This red bar draws from both the website and the mobile app, and is a way of bridging the gap of inconsistency in the desktop and mobile app experience.
Revamped Icons These updated icons feature a "Funny" and a "Cool" icon character with more personality that before. The icon which Yelp uses to depict the "Cool" compliment (a snowflake). indicates neither the warmth in giving someone a compliment, nor the emotion of what is being conveyed.