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



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



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.


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