Background
In my earlier projects at Wongnai, I figured out that users look at photos 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.
Problem
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.
Design
Many apps have a 16dp margin on the left and the right of the screen. Wongnai did use 16dp but it wasn’t consistent across all screens. To maximize screen real estate, I set the standard for the Wongnai app at 12dp. I would have gone for 8dp but many devices such as Samsung Galaxy S8 have curved screens 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.
Design 02
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!
Summary
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.