Swiggy Redesign
I tried to understand the product first. Tried to look for the scope where I can improve the product experience and tried to give UX-centred solution.
Goal:
Goal is to give UX-centred solution for rendering restaurant and dish recommendation to the user.
Designs:
Designs some of the major screens of this app.
1. Add/Select an address screen (Set location for delivery).
2. Home screen.
3. Search screen.
1. Add an address screen
In current address screen first it give choice to set a location in map and after selecting a location on map it will take user to the next screen to edit or add more detail about that address (like flat number & landmark).
So, here I merged them both in one screen. In which I gave the detail about detected location on the same screen where user can edit prefill detail of that detected location and add some missing information for an address.
You can see High resolution image here: http://bit.ly/1GEB04t
Left screen is just to show which information we are getting from map and if any information is missing, user can add or edit that info. Right screen displays the prefilled information of that location where user can add or edit the address and give more info like apartment name and floor number.
User can change the location by dragging the pin or interact with map as they interact in google map.
2. Home screen
In current app home screen give the list of nearby restaurants. And give options to filter that list or to search specific restaurant, cuisine or dish.
As per the observation user have different behavior patterns. Some users prefer to compose the same meal (same dishes from the same restaurant) over and over again, others prefer to try different restaurants but stick broadly to the same cuisine (eg north indian food), and yet others prefer to experiment with both dishes and restaurants.
First user:
So as per observation first user want to reorder. So as in the current app for the iPhone they have an option to reorder the past orders from the Orders screen.
Second user:
They want the restaurant choices for the same cuisine or they want personalized restaurants list. So this is not only a case for second user who want only the restaurants for the same cuisine but some users want veg restaurants, nearby restaurants have lower cost, and something more personalized restaurants choices.
So for these kind of users we can use their browsing history, past orders and filters usage to show them personalized content instead of showing showing the same screen to every user. We can also give them a choice to see the trending cuisine, restaurants for popular dishes etc. So user can explore and try to find new restaurants.
Third user:
This user basically want to explore. And want to try new restaurants and dishes.
The problem in trying new food is trust. We generally go for other people’s opinion when we are trying something new. The big question they have is whether or not to trust this restaurant.
For this problem we can add a friend recommendation on dishes and restaurant cards.
OR
We(Swiggy) can recommend them dishes and restaurants there is high chance that they will try new things because they trust the product/brand (Users know that any brand will only suggest the best things to the user).
We can suggest them a dishes which have a discount on it, since discounts always works. Or we can suggest day special dishes like any other local restaurants suggests them. We can also give them a list of dishes but as a personalized list. We can again make them personalized by using the users history on an app like used filters, searches and orders history.
Designs for home screen (Restaurant screen)
You can see High resolution image here: http://bit.ly/1MnzsOb
Design rationale for home screen (Restaurant screen):
We can give a choice to the user on home screen to switch between the Restaurants and Dish screen. User can easily interact with the app as per their needs. Some user wants to see restaurants and some user would like to see the dishes or would like to explore the dishes. So home screen provide the way for user to switch as per their needs.
This section gives info about their current location or picked delivery location, they also have an option to edit their picked location by taping over there.
There is a search bar to search a specific dish, restaurant or cuisine. (It is majorly for the first type of user who know what they want to order.)
Filter is for the users who wants to filters the list of given restaurants as per their needs.
This section shows the most used cuisine by user or we can display the trending or popular cuisine or popular dish.
So, basically this section gives a choice to user to see different types of restaurants. So this encourages the user to try new restaurants (on basis of cuisines or dishes). This section will help second and third user.
After above section we will provide a list of currently available restaurants.
But we can provide this list as personalized list for that user. We can make personalized restaurants list by using users history data as like their filters data, searches and orders history.
If we don't have any of the user data we can list the restaurants as per less delivery time. If we have some filter or search data we can provide the list of restaurants as per they used their filters and searches.
Restaurant card:
User wants some basic and important info about that restaurant.
I have added the rating info like and also friend rated this restaurant, so this help the user to make a better decision. So it will help the Third user to easily trust new restaurants.
Designs for home screen (Dishes screen)
Design a screen for only dishes. So user can explore, search and try to order some new and specific dishes as per their choice.
You can see High resolution image here: http://bit.ly/1OxEH2q
Design rationale for home screen (Dishes screen):
This section will provides a list of dishes recommended by Swiggy so that user will try new dishes. If we recommend them a dishes then may be they will try because they trust the product/brand (Users know that any brand will only suggest the best things).
On tapping on that card dish will directly add it to the cart. This will provide minimal interaction for ordering the dish (as user can directly add a dish from home screen in ‘single tap’). This section helps second and third user.
This section will provides a list of suggested day special dishes as any other local restaurants suggest them a special dishes for that day or the dishes which have a discount on it. So may some user will try that day special dishes as might that have discount on it or may that is the dish for that special day.
On tapping on that card dish will directly added to the cart. So have provide a minimal interaction for ordering the dish (as user directly add a dish from home screen in ‘single tap’). This section helps for second and third user.
After above section we will provide a list of currently available dishes.
But we can provide this list as personalized list for that user. We can make personalized dish list by using users history data as like their filters data, searches and orders history.
If we don’t have any of the user data we can list the dishes as per delivery time. If we have some filter or search data we can provide the list of dishes as per they used their filters and searches. On tapping on that card dish will directly added to the cart.
This section will stick to the top when user user scrolls the home screen (for dish) at the time when only list of the available dishes stared to appear on screen.
Gave a search bar to search a specific dish, restaurant or cuisine. (It is majorly for the first type of user who know what they want to order.)
Filter is for the users who want to filters the list of given dishes as per their needs.
Design the Dish card sawing at list of Dish screen (make it content focused and user centered design). User wants some basic and important info about that dish like, name of dish, Ingredients, Veg/non-veg, Which restaurant offers, Delivery time & Price of that dish.
On tapping on that dish card will directly added to the cart. So have provide a minimal interaction for ordering the dish (as user directly add a dish from home screen in ‘single click’).
3. Search screen
In current search screen you cant easily differentiate the restaurant search, cuisine search or dish search. On searching a dish you get the list of restaurant without mentioning the dish name on that restaurant card.
So its quite difficult and confusing for user to see and decide from that search result.
So, here I tried to solve above problem in one screen. Which will give a choice to the user to see restaurant list for that search or see dishes list for that search.
You can see High resolution image here: http://bit.ly/1LK5x8q
Designs for Search screen:
This section will give choices to the user to close search, Edit search, Filter the search results & to see the restaurants or Dishes for that search.
Here I gave the choice to user to see specific search results. As some user want the restaurants for that search & they also want dishes for that same search. So it is a very easy interaction to get two different search result (Restaurants and Dishes) for the same search.
I tried to make very clear search results. As user searching for Restaurants or cuisines they want to get the list of restaurants for that. If user search for dish they want the list of similar dishes. So as per the need view of search results would be very specific and easy to differentiate choices. So gave very specific search result view for both restaurant and dish (both have different and specific view).
You can see design process (Persona, User stories, Sketch): http://bit.ly/1MnC2nm
As have done everything using pen & paper, so have photos of that.
You can see all High resolution image from here: http://bit.ly/1K4Ksyi
