Enhancing the Indian online grocery shopping experience
A UX case study for BigBasket’s android app
Online shopping apps started making their customer base in the last decade in India. When it comes to groceries, a majority of the households in both rural and suburban still prefer their local grocer for daily/weekly needs. I started using BigBasket’s android app lately after realizing they have services in Patna(capital city of Bihar).
Disclaimer: The article has my personal opinion and views based on the user research done. I am not affiliated with BigBasket in any capacity.
Ideation
Problem Definition
The need for weekly and monthly groceries arose when I started living with my parents during pandemic times. During the initial usage, I faced quite some trouble navigating through the app — finding local items, basic flows, etc. After conducting small user research I got to know that many others were finding a similar set of difficulties in using the app.
Value Proposition
The app should cater to the needs of all types of households giving one platform for buying groceries. It should be as user-friendly as possible for all user age groups. Tracking the order, bookmarking the repeated items, and trust for the product’s quality should be ensured.
Research
Starting with a minimal Surveymonkey form with literally 4 questions, I first checked the mobile shopping attitude across the users from various cities in India. ~35% of users do mobile shopping at least once in 2–3 weeks. ~29% of the users who took the survey seemed interested in buying groceries. ~25% of the users have at least once used BigBasket in their lifetime.
Usability Testing
This short online survey led me to do more qualitative research on Bigbasket to understand the pain areas, the usual navigation experience, and the overall sentiment before, during, and after using the app. I spoke to several users in different age groups and told them to try out the BigBasket android app and answer some pre-defined set of questions. Some of them were:
Find my recent order
Find what all bank offers or promocodes are there?
Find the top rated hand sanitizer.
Can you add an item to wishlist or save for later?
Clean all the items in your basket.
Chat with customer care representative.
Can you add 1Kg of Arui/Arabi(local name for Colocasia) in the basket?
Can you clear your search history?
What do you understand from bb Cookbook?
What do you expect when you click the option Gift Card?
Can you redeem a gift card?
Do you see ratings of a product before choosing?
The answers and feedback included most of these phrases, and I quote below the same as I got(translated in English for non-Hindi users inside the parenthesis).
Rating wise sort to ho gaya, lekin ye sponsored wala confuse karta hai —rating chahe jo bhi ho(Sorted as per the rating, but sponsored product on top confuses- because it’s on top irrespective of its rating)
umm…Bank offers to nahi dikh raha..shayad hai hi nahi(can’t find the bank offers, perhaps doesn’t exist at all)
Wishlist ka option hona chahiye(There should be an option of wishlisting an item)
offoh..yahan hona chahiye gift card redeem ka option.. :( (Gift card redemption option must be here..)
gift card ka use kaise karenge..account me add karne ka option hona chahiye tha(what is the point of having a gift card, there must be an option to add it to my account)
arey..arabi ko kya bolte hain english me..aise nahi dikhega(hey, what do we call arabi in English?.. don’t think it would show up with
Arabi)
While I spoke, I read the inability to locate things and visible emotions among the users along multiple trials to answer a question. While the average user faced quite many difficulties, some tech-savvy ones too seemed to be struggling with the menus.
Persona
Looking at the pattern of this usability survey report, I decided to put together the most common personality of a Bigbasket targeted consumer in a persona.
Although there were multiple needs and pain points of the personas, I managed to come up with some main components that would cater to most of the requirements and provides more flexibility and easiness while using the app.
- More visibility of the most used options
- Menu rework so that the most needed information comes up on top
- Clubbing similar but scattered things in one place
- Wishlisting and adding to basket and back
Information Architecture
Current IA
To revise the menus and deal with other navigation issues, I had to look at the current information architecture(IA). The same colored boxes show the same information present at two places. For example, there are two ways to navigate to the My Ratings and Reviews page- one via the My Account menu and the other is via the main Hello, Neeraj menu.
Revised IA
As you may notice, I have removed certain duplicate entries like Home and also reordered main menu items, so that users get to see what they want the most. Rest all may fall below the most wanted :). For example, none of the users I interacted with had clicked on bb Cookbook ever, so kept it at the bottom. The IA now includes important sections like Save for Later and Redeem Gift Card options under the submenus for hassle-free search.
Tool(s) used: Draw.io
Re-Design
Sketches
Ideas on Paper
UX Recommendation & Mockups
Homepage
The first landing page - assuming a user who is already logged in opens the app. The options at the bottom are greyed out because they are not active at the moment, but a new user would probably not notice them. A regular user searching for an item on the top search bar would find it slightly inconvenient to move the thumb down just to click on Categories, and thus an option along with the search bar will likely help. Search in the predefined categories, or just do a random search, your pick! :)
Main Menu
In all my usability testing cases, the main menu was the foremost thing that users found difficult to look into. The landing page itself shows the earliest delivery in X hours/days and the user can edit the delivery address/location but seems like that was not enough, and the main menu also has the same set of options on the top. Looks alright, doesn’t affect anything — However, it uses the screen real estate that could have other most used options replacing it. On a similar note, the Home button doesn’t serve a very good purpose except taking the user to the landing page. Keep in mind that we already have a button at the bottom to help navigate to the homepage, or it’s pretty apparent from the android design that one can just swipe left of the main menu or, simply tap to the far right to go to the previous page where he/she came from.
One may argue what if the user browsed to the main menu while he/she was on a different page other than the homepage. Valid point! But the usability tests suggest that people just simply want to keep tapping the Android back button or swipe the menu to make it disappear and use the buttons available in the app. In a nutshell, keeping a Home button in the main menu and that too as a first item doesn’t justify the experience.
The Beauty Store — Apparently, this option is there to target beauty and Hygiene enthusiasts as a one-shot place to shop stuff in this category. Although, the option leads us to the Beauty and Hygiene Category page only, which the user can browse via navigating through the Categories from the Homepage. So unless there is really valid research data to back this opinion, I feel we should just do away with it.
Main Menu Expanded
As per users’ easiness of navigation, kept the Saved For Later submenu option under the My Account menu. In the Offers menu item, it made sense to keep all kinds of offers for the user to browse. Moreover, the Gift Card section was lacking a redeem option, thus added it right there as a submenu item.
Offers
Here is what the Offers — Submenu options will lead us to:
Gift Card
The Gift Card — Submenu items will land us to the respective options(see below). Pretty clearer for the user to see them at one place in the main menu, than searching for one of them elsewhere.
Save For Later(Wishlist) in a Search view
As per the current experience, the user will have the option to add a product to the wishlist on the product description page only. The redesign gives a smooth experience where the save for later button is present in the search view, just keep scrolling and keep saving the items you want or just add them to the basket as earlier.
Basket
Clearing the Basket appears hidden inside the 3-dots menu, better keep it as an icon to attract attention. Also, the user may change his/her mind at this stage too and may be willing to save an item to the Save for Later list. Why not give this option here too just as we did above during the search — looks better..isn’t it?
Customer Support
There were various things in my mind while designing the customer support flow. One basic thing that users feel is the hidden way to call or chat with customer support. I do understand this has been done to avoid unnecessary call/chat traffic, but sometimes the FAQs may not turn out to be really helpful unless of course, the app keeps updating the FAQs based on all sorts of common grievances/queries that came via chat/call.
Moreover, the chat icon on the top right is barely noticeable, thus I replaced it with a more elegant, and readily visible icon.
Fund Wallet
Funding the wallet has got only one option as of today(Apr. 16th, 2021) due to whatever reason I do not know. However, since gift cards can always be redeemed, they can be added to the wallet. The UI on this page requires one to fill in the Amount, which should get greyed out if the user chooses the Gift Card to fund the wallet(because the gift card itself will have some designated amount).
Tool(s) used: Pixlr(e), MS Powerpoint
Prototype
I managed to stitch the edited screens into a prototype — Although I prefer Figma and InvisionApp for all my prototyping needs, this time I tried exploring Marvelapp’s free account. Here is the prototype I designed.
Mind the blank bottom — I had to choose Pixel 4 as the best fit for the screens that were taken from my current Xiaomi Mi A2 phone. :-)
Also, I have put hotspots at important places only to save time and focus only on the redesigned elements.
User Validation
Once the prototyping was done, this was the time to get some feedback on my work done. Presenting and seeking feedback started with my wife, she liked the revised view and suggested me to involve the same set of people whom I interviewed during my user research. This time as the pandemic cases increased drastically, I had to remotely discuss the new UX over video calls with quite many people, but most of them felt it was better.
Takeaway
Although it took a good amount of time, it helped me shape my UX skills, and also it was a great experience to see some happy faces at the end, that’s all I wished for :)
I sincerely thank you for your time if you read through it. For any queries, questions, or feedback, feel free to comment or you can also DM me on Twitter — @susenj.
Stay safe and healthy. Cheers!!
