Big Basket Exploration — Redesign Challenge

I’m a very regular Big Basket user, primarily because of the selection of products they sell and their consistently fast service. However, I’m not a big fan of their mobile app. Sure it does the job of getting orders but I found it very confusing, the information architecture & visual design to be pretty messed up.

I decided to explore the possibilities of redesigning one of Big Basket’s screen — Product Details screen. I picked the product details page because I found it to be very crowded with information and having a terrible visual design.

Prospect for redesign

Challenge

Redesign the screen keeping it intact, without removing any components or information since we don’t have solid research data to work with.

Pain points

• Too much unorganized and irrelevant information. Even if this information is required to show to the users, they lack structured classification and good information architecture. For example prices, discounts and offers shown are all redundant
• Use of unrecognizable iconography, BigBasket Express delivery’s icon is not yet popular that people would recognize. That particular badge is misleading too because for express delivery one has to pay extra and the normal delivery times are different than that. Same goes with shelf life icon.
• The clickable surfaces are too small, so is the font size of several components making it unusable.
• Inconsistency in design all through, starting from icons to colors. Overall a bad visual design experience.

Process

Users often perceive aesthetically pleasing design as design that’s more usable

Goal

• Improve information architecture and organize the layout for reducing cognitive load
• Easing usability with interaction
• Improving visual design and aesthetics

Principles

• Aesthetic-Usability Effect: Users often perceive aesthetically pleasing design as design that’s more usable
• Law of Common Region: Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary
• Law of Prägnanz: People will perceive and interpret ambiguous or complex images as the simplest form possible because it is the interpretation that requires the least cognitive effort of us

User reviews

My roommates use Big Basket as much as I do, so I decided to take their view on the screen and what they think about it.

They had the following problems with the screens and I quote them:

“This is very confusing”

“This is too much text and information bombardment”

“Looks so bland”

Information architecture

I’ll go through the screen from top to bottom and review each of the flaws one by one

• Header: These are app-related global functions that included Back & Cart, a global search. But I think Share button shouldn’t be here, as it is specific to the product, not a global function. Similar functions are supposed to be proximate to each other.

• Inconsistency in iconography: If you look closely you’ll see that the icons used are inconsistent. Back and Cart icon has a lighter weight than the Share and Search icon.
• Title and classification: Since the app just forwards the name of the product from the database to however it is on this screen, that implies it can be awfully long. So I have to accommodate very long product name.

• Price: Price is bold and bigger, seems fine to me. (but notice the Rs & 207 doesn’t have space in between 😛. I couldn’t help notice it)
• Offers: Here it shows the user brand specific terminology for the discount. Initially, I used to think that is a coupon code but its not. And why are the discounts grouped with the price, I wonder?

• Delivery and Shelf Life: As an online grocery shopper, delivery time and shelf life is a piece of essential information that I want to know. Delivery and shelf life are related, when is it going to come and how long will stay fresh from that day, so they are grouped together. But here they have used iconography to save space which is misleading and is uninformative. Hardly anyone knows about the Express delivery icon which is different than the standard delivery time, so is the Shelf Life icon (I’m still assuming that it’s shelf life). Font size is so small to draw someone’s attention.

• Add to Cart button: This button can all be made easier to click on if their size is increased. According to Fitt’s Law, we need more time to click on something with a pointing device, the further away it is and/or smaller it is. And how don’t know why they have cramped a Save link with the Add button.

Ideation

Since the visual design is very subjective, so I have tweaked the colors and fonts bare minimum that are aesthetically pleasing and are an improvement from the current scheme

I have not changed any text or removed any text considering that the content isn’t supposed to be altered or changed except for their layout and position in the screen.

There are multiple ways of showing this screen visually, and I explored quite a few variations of the same screen. I have tried to focus & pick on one screen design among all the others, however, I have also attached 2 of other variations that I think should also go well.

The reason why I came up with multiple designs and didn’t pinpoint to one screen because I don’t have solid user research data to back it. This is based on my understanding and assumptions of the product, real user data may differ, and then maybe it’ll help me pick a design among the two. But I like the first one better.

Idea 1: Preserving original integrity (Keeping a lot of things intact)

• Rearranged the layout and changes visual cues, hierarchy, and proximity of the components
• Introduced new typography — Manrope
• Tweaked colors, for a refreshed look
• Added new interactions

Later, while compiling this article, I saw some more improvements in this particular design that would go well. Since iteration is key to good design, so I just gave it a try anyway.

Idea 2: Moving things around a little bit more

Here I have prioritized Delivery time as 2nd main label right under the title, and I have enabled direct interaction between the quantity and price.

Idea 3: Just having fun

I can’t conclude a redesign challenge without getting a little bit out of the box and crazy with my design. So I tried another iteration for the same.

Here as soon as the user taps on the quantity, it shows a quantity slider where the user can slide the required quantity and it gets added to his basket.

Conclusion

Content is the heart of every app or website, and it should be taken seriously from the very start of a project. Good information architecture is a foundation of efficient user experience because well-organized, well-structured content makes a product easier to use for your users.

Note: This is an unofficial redesign of the app screen, so BigBasket and Innovative Retail Concepts Private Limited doesn’t endorse or validates any of this. Logos that I have used are all intellectual property of BigBasket and Innovative Retail Concepts Private Limited.

Thanks for reading, claps if you liked it. Please leave your valuable feedback in the comments, that would help me to grow and write better.

If you want to know more about my recent work or complete portfolio, email me at joydeep.roni@gmail.com. Follow me on Dribbble.