Product Teardown 14 — Yelp and DianPing
Yelp and Dianping are two great apps that help people discover local business, such as restaurant, bars, gas stations. yelp focuses on US market while Dianping dominates China market. In this post, I will do a product teardown on these two apps, focusing on user interaction. One thing to keep in mind, dianping also has a daily deal business such as Groupon, and this greatly impacts its product design.
1.First time user experience
Both apps offer good first time user experience. Landing page is self-explanatory. Users immediately get that they can find local business through app. While you’re logging in, dianping and yelp automatically uses LBS to pinpoint the city you’re in, so you can start right away.
2.How do you feel while exploring the app?
While exploring the app, you feel Yelp presents a sleek view and is more organized, but dianping is rich in content though cluttered.
I like Yelp’s layout but I think it still wastes a lot of valuable space. For example, instead of listing categories, it can just use an icon bar and borrow some of design ideas from dianping, e.g using cards to present local business.
It could look like this:
3. what’s the most important tasks that the UI ask users to accomplish?
Obviously, it’s helping people to discover local business. The apps themselves achieve the goal, but they didn’t break down in an elegant way. In another word, though the whole app is functional, but page design have a lot to improve.
There are three important pages in the product that help users to achieve that goal — landing page( nearby in Yelp), search page, business page( individual store page)
Landing Page:
Like Yelp, dianping also wastes valuable space. An folded icon bar would simply do the job and save space.
I think their product managers could do a better job. It can be achieve through two ways: (1) App will monitor users behavior and customize icon bar and put the most often used icons by users. (2) aggregating all users behavior on icon bar and you get what the most often used icons by users.
Then they can use cards to present information.
The problem with Dianping is it doesn’t prioritize cards very well and it lacks consistency.
Three cards? Four cards? Then another few horizontal cards? Stick with on layout and be consistent across the pages. ( my guess is Dianping has monetization goals on each page so that they try to put as many stuff as possible. but it’s a poor design)
Search Page
Yelp’s search page is good, although it can be improved by using cards to make the page less cluterted. For example, it can places category bars under the search to help users filter searching more effectively.
But overall, the page is good.
On the other hand, Dianping’s search page is bad. The app’s focus in on exploring — that is, presenting a lot of information and filters to help you find stores.
it’s search page is confusing. The most important task on this page is to allow uses to search! But the search bar is unclear. Even worse, this page put many other irrelevant information — where your friend is going? community, ranking, picture, fun life. ( if you’re product manager on this page, you probably will have some good metrics — such as clicks, views, CTR , but searching just sucks!)
Remove all those unuseful stuff. Make the search page clean!
Business Page
Overall, I think both apps do a good job. But Diandian gains a little edge. The most important task is to allow users to find information of the stores they are interested — reviews, location, direction, contact information.
Dianping presents those information at the first priority. You know where the store is, you know how to contact them, and you know the stars of that store. Yelp, however, make the map the center of the page and it draws all the attention the first time you look at the page. But that’s not the most important information.
Dianping also has a payment button on the page, which is really really good for customers and store owners.
4. Is the information organized logically?
I think we’ve covered some of the unorganized elements in each app.
Why put two payment buttons on the page?
why users need three different places to launch review writing? all these buttons do the same thing.
On the other hand, dianping organizes “Review, photo, check-in” very well. All the information is under the business page, and just three buttons out there. It makes more sense to write a review under a business page.
What’s point of having landing page and deal on sale page have almost the same information? They look the same, and they have almost the same things. ( Remember, dianping has a daily deal business like Groupon, so they must find a way to monetize that business)
The deal page needs to be redesigned.
Remember: Most task for most important users are the most important. most frequently used controls need to be the easies to access.
5. Is the standard consistent?
Yelp has minor problems, but overall is great. And you kinda of believe that it is designed by the same person or a group of people having same principles.
Dianping is awful. The app looks like design by different teams who don’t talk to each other.
Look at this icons. round or square? No one is in charge of design?
Cards and list items. All over the place. Obvious a lack of consistent standard.
