Zomato for Android Redesign
Thinking outside the (food container)
Note: I wrote this post on March 15, 2016, for Zomato’s Android team (it was unlisted then.) The changes I designed were published by April last year, so I’m publishing this post for the world on April 11, 2017. See “Update” at the bottom.
I had a great opportunity to interact with Aditya Kushwaha (head of the Android team) and others at the Zomato HQ this morning. I’ve been looking at the user experience of the app, and have come up with some things that we could improve.
First, let’s give credit where it’s due. It’s clear that the Zomato app for Android is one of the most well-designed and simple interfaces, considering the apps of other Indian startups (ahem, PayTM) are not even in the same league. Great work, guys.
When a user opens the app, they are greeted with an interface where they know just what to do. If I’m looking for a restaurant, I know that I have to press the search button on the upper-right. If I want to change my location, I press on the caret pointing downward next to “New Delhi”. There’s a slideshow of recommended places to eat (not sure if they’re ads), and simple language like “Order Online” and “Explore” keep the app user-friendly.
Problems
I have spent some time on thinking how I should solve a few problems I recognized in the app’s user experience design. These are just rough ideas, and the implementation is only representational.
Foremost, the design is too custom. It’s great to see companies innovating in their app designs, but Google’s Material Design principles were specifically designed for the experience of the Android user. I know that rules are meant to be broken, but sticking to guidelines, with custom additions, is the best experience. The user shouldn’t feel like they’re somewhere new. The app should feel like home.
One of the major rules of having a bottom navigation is that when the view is in focus, [we should] display that view’s icon and text label. Getting rid of the label may feel more decorated, but it adds on to a worse user experience. Here’s why:
- Until the user has tapped on the icon, they have no way of determining that it’s the icon for “Collections.” To any Mac user or someone who also owns an iOS device, the icon is too similar to Safari, and would be associated with browsing, or discovery, or anything else. It just doesn’t say “Collections” like it’s supposed to.
- I just searched for “Explore icon” in Google images, and hey, see who’s here:
The icon that we’re currently using for “Collections” is actually a well-accepted icon for, you guessed it, “Explore.” Even before a user has tapped on the icon, they already have a feeling that they’ll get to “Explore.” It just feels uneasy when you see “Collections” pop up.
And, to make matters worse, Zomato also has an “Explore” category with an icon that’s actually better an icon for “Collections” than “Explore”
3. According to a really great research project by Edward Sanchez, “The combination of icons with text has the possibility of disambiguating the meaning of the menu choices available in the interface.”
Research showed that visuals are processed 60,000 times faster than text, and people could remember more than 2,500 pictures with at least 90% accuracy several days post-exposure, even though subjects saw each picture for about 10 seconds. That’s a point for having icons.
However, he goes on to summarize that icons with text labels were easier for participants to learn to recognize correctly. Google’s years of user experience research has also helped make this in the guidelines of Google Design.
td;dr:
- It’s good to have text under icons.
- It’s bad to have icons that don’t say what they’re supposed to say.
The second big thing I feel which is wrong with the icons is that they’re not Zomato icons!
When I spoke to Aditya this morning, I highlighted that one of my favorite parts about Zomato’s culture (after zomato.xxx, obviously) is how your design team is able to embrace that culture into your products. Particularly, your social media and desktop website.
This is my favorite example:
The iconography on the website is well-designed (super impressed with vector icons, Design Team, good job!), and the Android app should be closely related to it. The user shouldn’t feel a sudden change in the experience. The app should naturally be an extension of the website, not something radically different in approach and experience.
Getting back to the icons, the search icon is a pan. A frying pan. That’s brilliant.
That’s the metaphor we should be using everywhere. Zomato is a food-based service. Let’s use that to your advantage. Instead of having no immediately identifiable call-to-action (why is that?), let’s start saying something like “Let’s have a great lunch, [user]” or “Ready to order dinner, [user]?” for call-to-action labels that directly take you to the relevant search results page.
We can extend the awesome power of default typography paired with beautifully designed icons from the website to the app. Let’s start by changing the icons to a nice icon set. The search becomes the pan. The caret becomes the map pin, and everything else will follow.
Default typography, guys. It’s powerful. The current desktop website is using the CSS “Helvetica Neue”, “Helvetica”, “Calibri”, “Arial”, sans-serif for font-family. If you don’t know how this works, it simply means that a user will see the site in a font that they have installed, in a preference order of left-to-right. (Publishing update: Since then, we’ve seen the power of system fonts.)
Why I feel this is great is that a user who has Helvetica Neue installed sees a really pretty site, but anyone else who doesn’t have that font, like default Windows users, still see Calibri, which is available on all Windows devices as long as they’re running anything since Windows Vista.
You don’t have this problem with Android! They came up with a solution, but we couldn’t. The app is currently using a custom font which I can’t identify. I have the same problem with Uber’s user experience. If iOS apps don’t use custom fonts and stick to Apple’s San Francisco, then why do Android apps need to change typography from Android’s beautiful Roboto?
It’s highly recommended to use Roboto as the typeface for Android apps, because users are already accustomed to it. They see it in all their apps, and a consistent user experience is always a better user experience. I propose that we switch to Roboto, since all Android devices already have it preinstalled. It will also reduce the app size, since we don’t need a custom font.
td;dr
- Get inspiration from the Design Team and take their feedback.
- Use better iconography, typography, and other -graphy words.
The next thing I’d like to go a little bit on about is the incorrect approach to user engagement and call-to-actions we’re currently using. The problem is that unless a user is already sure about what’s she’s here to do, there isn’t something that will catch her eye and make her spend time on the app.
The first screen is filled with “Explore” options, something that’s actually not even a part of the desktop website. One might argue that the needs of a website and an app vary immensely, but it’s not about the needs of the app, it’s about having consistency in the experience.
Think about it. Facebook has 4 tabs — News Feed, Friend Requests, Notifications, and Settings in their Android app. They have those same links on their website’s masthead. That’s because they don’t want to confuse users with too many irrelevant options. If I may repeat myself, a consistent user experience is always a better user experience.
Zomato has had Collections for a while now, and I think it’s a really cool user engagement feature. Users can create and share Collections with their friends, or even use them as simple reminders like “Places I’d like to eat again” and “No thanks places.” It’s great, and it works.
Handpicked collections are even better, because most users don’t spend the time to create collections. Simple ones like “Trending this week” and context-aware ones like “World Cup Screening” definitely increase user conversions. After all, who doesn’t like to watch the World Cup?
I think that the Android app should also make better use of this feature. Instead of having a completely different tab for Collections, we can use them instead of the current “Explore” module. That way, we have a consistent experience, and we might even be able to increase user conversion.
I couldn’t put it more simply that this — I don’t think, as a user, I want to order dinner at lunch time. “Dinner,” “Delivery,” “Lunch,” and “Breakfast” are the top four options in explore. Ask yourself, is that necessary?
I propose that we have contextual options that can be combined with Collections. Instead of these 10 links, let’s have 10 better and more usable ones. Having collections like “Newly Opened” and “Sheesha Lounges,” like we currently have on the website can definitely be better, and, like we spoke earlier, a contextual call-to-action like “Let’s order lunch!” at lunch time would actually be much more useful than having all meals together.
Another great use of contextual collections is what I don’t think Zomato is currently investing in, even though it’s a great source of user onboarding — Notifications. Based on the user’s preference, we can send them notifications when we have new content in the contextual collection. The World Cup has started? Send them “Let’s order food for the World Cup!” Is it dinner time on a weekend? Send them “A new restaurant has opened in your area!” It’ll increase user conversions, and we have another great reason for using “Collections” in favor of “Explore”.
Zomato as a social platform is a great idea, because the most valuable item in the 21st century is user data. When people post reviews and rate restaurants, we like it. And we like it even more when they share it with their friends. Therefore, I am super convinced that the News Feed should remain on the mobile home page on scrolling. People are always interested in #FoodPorn.
td;dr:
- Get rid of “Explore” in favor of “Collections”
- Have contextual notifications and call-to-action buttons
Result
These are just some intuitions I had after a visit to the Zomato app today evening which searching for a restaurant in CP after the meeting, they’re not final renders. :)
This is what I think Zomato for Android should look like:
- The header now adheres to Material Design guidelines. It has one line of primary text, and all other menu items can go into the off-screen navigation.
- Icons have been changed to the ones which the website use with caption. They have a strong use of metaphor and contribute to consistency across products.
- A contextual call-to-action button has been added, which helps in both user engagement and usefulness of the native app.
- Collections looks beautiful and relevant with nice photography, which have replaced “Explore”, and the plus button is more prominent.
- Typography is simply different weights of Roboto, and it works.
Note to Aditya: I haven’t published this article to the public, it’s Unlisted so only people with the link can view it. This has been almost 2,000 words, but I thought explanation was necessary to make significant changes to the design. Feel free to implement these design changes.
Update
I’ve publically published this post on April 11, 2017, about a year after Zomato incorporated my design changes.
Here’s a comparison of the Zomato for Android app before and after my proposed design changes.
On left is the app in March 2016, before my redesign. In the center is my redesign. On right is the screenshot of the app I took today.
The first thing of notice is the prominent current location in Roboto regular instead of Proxima Nova light. I also removed the history-ish icon and made the icons lighter.
The bottom navigation now labels with icons, along with a red and circular primary action button.
On the top of the app, too, there’s a primary call-to-action that engages users to order food instead of randomly exploring restaurants. They’ve also made collections like “pocket-friendly” and “newly opened”, but they display them as a grid of restaurants instead of my grid of collections. I like their implementation better.
I’m super happy that Zomato decided to publish my design changes (or at least were inspired by them.) Thanks Aditya for chatting with me!
