top pic.jpg

Yelp List/map view redesign

UI Design / Interaction Design

 

This is a side-project where I redesign the list/map view of restaurant discovery page on Yelp's mobile web.


Collaboration: none


 

Design Process

 

Evaluation

Before I started my redesign, I took a look and critiqued on the current design of the list/map view restaurant discovery interface. I also asked people to use the interface in front of me and observed how people interact with it.

 
 current design

current design

 
 
 

Ideation

I started by doing some sketches to explore different possibilities on how to unify the look of list/map views better. I also tried to incorporate more previewed photos in the layout because it gives users better sense of the restaurants they are looking at.

Uber design exercise.008.png
 

Wireframes: Are my sketch ideas working?

Working on mobile screen can be challenged especially when lots of contents need to be fitted in a small screen. Therefore, I need to create wireframes to test whether the early ideas developed from sketches would work on phone screens. I created wireframes based on the screen size of iPhone 8 because this is currently the popular and “smaller” iPhone screen, but I also kept in mind of the iPhone 5 screen size throughout my design process.

Refinement

Based on the pros and cons of the wireframes that I created, I decided to move forward with Version 4, but it needed further tweaks to be better.

 
Uber design exercise.020.png
 
 

Deliverables