Yelp List/map view redesign
UI Design / Interaction Design
This is a side-project where I redesigned 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
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.
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.
