BigBasket’s homepage: A case study

4 min readMar 7, 2020

Loss of internet connection scenario

Project brief

A customer is visiting the BigBasket app. He reaches home page and internet connection is lost. In this case, how shall BigBasket present its homepage to the customer?

Deliverables

Research approach and findings
How to communicate “Internet connection lost” information with customer in visual

Understanding the appearance of the homepage

Homepage when opened after disconnecting with the internet, shows a message “Lost internet connection?” and asks to “Tap to retry“.

The good:

The message tells the user about the lost internet connection

The bad:

It directs the user in the wrong direction as a tap does not help him connect to the internet.
Poor alignment & poor use of available space
Missing menu thumbnails

The appearance of home page in case of internet loss while using the app (fig 1c) is the same as the homepage when the phone is connected to the internet (fig 1b).

Scrolling down in the Homepage

Homepage when scrolled in the presence or absence of internet (fig 2a) shows a message “image not available” in the carousel instead of offers. On scrolling further users can find some blank images with only Bigbasket’s logo.

Problems:

The app doesn’t explain why there’s a lack of content
There isn’t any indication that the user is offline or online
Space has been filled with useless UI (gray box in carousel).
Stretched text/image
Blank image holders

All these lead to even more confusion. When the user clicks on any option in absence of internet an error message occurs.

It is always good to be told that the app is offline. Homepage of most apps continue to work in the same way as when connected to the internet. A clear message prompting the user to retry appears when clicked on any button. But none of the apps nail the offline experience, but some are clearly better than others.

Ways other apps tackle the problem

Homepage of Swiggy (fig 3a) and Zomato (fig 3b) when used offline works in a similar way as when used when online. They provide users an option to refresh the page. On refreshing the page, the connection error message is flashed with an option to retry refreshing. Whereas Youtube itself shows a pop-up message informing the user about downloaded videos.

Solution

Caching

Internet access is not ubiquitous. Everyone experiences the frustration of being offline while using any app. When a user opens an app, they expect to see lots of content there, regardless of whether they are connected to the internet. Unavailability of the content can cause frustration and they may switch to a different app.
“Offline” doesn’t mean “no content” as most apps do. Whenever the user opens the app, it has the opportunity to download content. When offline, apps can use this content to improve the user's experience.

Error messages

If the user doesn’t have internet connectivity and their content isn’t cached, tell them. Setting clear expectations is always a better experience. Users can be educated about how they use the app when offline. “You may browse the offers and check your cart.”

Understanding the brand language

When the app is opened when there is no internet connection

Instead of throwing an error message into the customer’s face Bigbasket can signal to the customer in a less intrusive way.

You’re offline. No worries. You may browse the offers and check if you got all your stuff in your cart. For a full shopping experience, you need to be online. Tap to retry.

Homepage when the connection is lost while using the app