List Search Result Revamp

5 Weeks

UX/UI Designer / Researcher / Data Analyst

Android, iOS, Web

This is a project I did while I worked at Wongnai (Thailand's Yelp).


In my earlier projects at Wongnai, I figured out that users look at photo first when they look for a restaurant. I created a grid view for the search result screen. Now it’s time to revamp the traditional search result.


The list search result is way too cluttered I have to redesign the screen to make it cleaner while not omitting any essential information. Below I lay down the issues with the current design.

The issues with the previous design.


Many apps have 16dp margin on the left and the right of the screen. Wongnai did use 16dp but it wasn’t consistent across all screen. To maximize screen real estate, I set the standard for Wongnai app at 12dp. I would have gone for 8dp but many devices such as Samsung Galaxy S8 have curved screen so I leave some space for the curve.

Design 01

For the search result screen which needs to contain a lot of information we made an exception and go for 8dp margin.

Users judge a restaurant by the photo before they become interested in the details I tried enlarging the photo but it leaves even less space for the content like the name of the restaurant.

Smarter Badges / Widget

I made some changes that seem small but definitely work better.

The new Average Score takes up less space and is easier to read.

Still, with Design 01 the difference is too minimal. We ended up with this Design 02 with four photos. Without splitting the layout into the left and the right column the design becomes more balanced. Users get easier access to photos so they can decide much faster!


We didn’t run A/B Testing because this is the direction that we want to go per CEO’s decision. Of course, running A/B Test would be better but I still feel confident with this design since we developed it from user insight.