An Unsolicited App Redesign: Yelp
The Intentionality
Before I get into the nitty gritty of the design, I wanted to provide a little background on why I started this project.
I currently live in one of the most diverse cities in America: San Francisco. This diversity isn’t just present in the people that inhabit it, but also in the ideas and cultures that are so deeply ingrained in its history.
There are so many different neighborhoods in this one city that it’s hard to even count them all. Naturally, with so many different cultures comes so many different places to explore (and by places I mean restaurants). I should be clear here: I like to eat — a lot — so I try to explore places to eat in Japantown or Little Italy or The Mission or SOMA or Western Addition or — you get the point.
Here comes the “problem”. Yelp, an app that I have used on and off for the past 6 years, doesn't work the way it should. You are probably reading this and thinking “well maybe it isn't the way you want it to work, but it works for me!”. That might be true, but I think that this widely used app could be improved with a few UX changes and a simple UI refresh.
Research
Before I started diving into the deep end with this project, I wanted to see if this was a “me” problem or a “we” problem. I asked a small group of people (about 11 or so) to fire up the app and find a place to eat. I learned a lot of very useful information here.
- People almost always go straight to the search bar and search by keyword e.g. brunch, sushi, chicken and waffles, medieval style food during an hour long joust (this one was me).
- Rarely do people use filters to narrow down what they want. Instead, people self-filter. If they don’t see anything that they like, they go back and start again with a different keyword. However, they are used more among people who are on a budget or don’t have a means to travel far.
- Subcategories/Recommendations are useful when users don’t know what they are in the mood for (e.g. restaurants, bars, or cafes?).
- Your run-of-the-mill, everyday person will not write a review. I asked participants whether they had ever written reviews on Yelp. All said no, except when they either had a really good experience or a really bad experience. *I want to state that I have noticed this not only in the research for this project but in everyday life as well. It’s a subject for another time, but I just think that it is very interesting that we only feel the need to give feedback if our experience is above and beyond good or bad.*
- Most people (at least the bunch I asked to try out the app) are pretty lazy. By that I mean that they typically don’t want to travel very far for their food. They self-filter the results provided to figure out which restaurant would provide the perfect ratio of distance to deliciousness.
Design | Wireframe
After conducting interviews, I had a rough idea of what a new structure/information architecture might look like. First and foremost, I wanted the user to be able to jump into search directly from the home screen. The app currently allows for this, but it is not prominent, leading to a discrepancy between the importance of the feature to users and its place in the app’s visual hierarchy. In addition to the UX changes, I wanted to refresh the UI to not only have a more modern feel, but also become more in line with the iOS design language.
Design | Visual
After storyboarding the foundational UX/UI, I added color, images, and motion to further flesh out the design.
I was able to address some of the key problem areas with the current app.
1. Search is now front and center in the homepage, allowing users to quickly find what they need…if they know what that is.
2. Suggestions of popular subcategories now appear in card format just below the search bar in the event that the user is looking for suggestions.
3. The results section now shows “glanceable” information, such as an image, $’s, rating, and distance. This style not only allows the user to get quick information, but also is more aesthetically pleasing.
4. The restaurant details screen now cuts down on the amount of elements on the screen, which I found distracting when trying to find, say, the restaurant’s menu.
5. Fun animations make it fun to use.
Color
I wanted to stay true to the Yelp Red, #AF0606, but also introduce a new way of thinking about the color scheme. First, I used the Yelp Red for the accent/stroke colors of the back arrows, and the menu items located at the top of the results section. Second, I took inspiration from the color sampling effect in the Apple Music app. Basically, it analyzes an image and determines what the color palette should be based on the color most used in the image. I really like this idea, so I tried to apply the concept to the deep results section of my concept app. While it would be interesting to see how this color sampling would work on a larger scale, I really like the results with the two images chosen here.
Typography
In order to make the app look unified with iOS9, I chose to use the system font San Francisco.
Logo
When I started putting together the visual designs for this project, I couldn’t help but want to update the logo as well. I didn’t want to change the logo entirely, just give it a 2015 refresh to match the aesthetic of the new design. First, I removed the white stroke and used RokoFLF to closely resemble the current typography. Second, I decided to switch to a sentence case logo. I’ve noticed a whole slew of companies switching to lowercase logos to portray casualness, approachability, and playfulness. Capitalizing the Yelp logo not only establishes confidence for the app, but exudes it for company itself.
That’s a wrap
This week-long sprint was a lot of work, but also a lot of fun. I think the most interesting part is actually interviewing people and seeing how they use the app in their everyday lives. Creating the information hierarchy was a first for me, but I now understand the way it helps form design decisions later down the line. Being a visual designer at heart, it was hard for me to not just jump right into a full-scale redesign. Instead, I allowed myself to visualize the entire process from start to finish, and I can say that I really really enjoyed it. Of course, there are things that I will continue to work on and iterate in this project and others in future, but I think that’s the coolest part about design: it’s never really finished.
I would love to get feedback on this post or the project itself. Find me at KennyLopez or klopez4212@gmail.com | Portfolio-kennylopez.co
Special thanks to Rachel George(check out her portfolio)for reviewing the draft
