Enhancing the ‘Wishlist’ experience for Bigbasket

An Evaluative design project

This is a case study for Design project, during which a team of people come together to improvise on different areas of Bigbasket app, within a limited time while utilizing shared resources to have a positive impact on Business metrics.

The project is evaluative in nature. Now a question pops up — what’s this fancy term ‘Evaluative’. To elaborate, it is a hypothesis presented to evaluate and improvise on ’Save for later’ feature which already exists on Bigbasket app.

Rather than simply listing down the highlights, I would like to take you through my journey of improvising on this design. In the kick-off call our team was allotted the applications to work on, and soon the team was on the meeting discussing possible approaches, helping each other with blockers and boosting morale, which was an obvious need. As each one of us selected a specific feature, the final observations are based on individual contributions.

Selection of Problem Statement

As the time was limited, since we had 3 weeks to evaluate a user flow, I decided to work on something which was as simple as a feature but something impactful at the same time.

So, after initial observations and few iterations of traversing through Bigbasket app, I found ‘Save for Later’ feature that allowed the products to be saved for later purchase, a bit tedious. Though it is one of the secondary features, I figured out that it can significantly impact on Retention and Conversions for the app. Hence, I chose to improvise on this user flow for my case study.

It may well be my implicit bias, which needs to be cleared with upcoming research.

Existing Flow

Flow : Home Screen → Search for the product → Product listing page → Tap on the product → Product description page → Tap on ‘Save For Later’ → Product saved/Button disabled → Tap on Cart icon → Cart page → Scroll down to view saved products

Revamped User Flow

Flow 1: Home screen → Search for the product → Product listing page → Wishlist the product → Tap on ‘Wishlist Page’ icon → Wishlist page → Review wishlist

Flow 2: Home screen → Search for the product → Product listing page → Tap on the product card → Product description page → Wishlist the product→ Tap on ‘Wishlist Page’ icon → Wishlist page → Review wishlist

Flow 3: Home screen → Tap on ‘Wishlist Page’ icon → Wishlist page → Review wishlist → Tap on ‘Options’ icon → Tap on ‘Empty List’ button → Empty the wishlist

Comparision:

I conducted 4 user interviews as a part of primary research. Also, for competitor audit, did a detailed user for analysis for wishlist feature on apps — Amazon, Blinkit, Zepto, Flipkart. Following were the observations:

• ‘Save for Later’ button is available only in the product description page. There is no direct way to use this feature
• Once the product is saved to purchase later, the button is disabled, which seemed quite confusing to the users, they wondered how it can be undone
• Users complained to have no dedicated space to review the wishlist, and found it inconvenient to review it from the cart

Based on the feedback I tried to revamp the existing design with following justification -

Existing flow v/s Revamped flow

Added ‘Wishlist’ button on product card

Why did I make this change ?

During primary research, few users used Bigbasket to buy products/groceries which are used on a daily basis such as Milk packets, Eggs, Chocolates, etc. In such scenarios, they suggested that it would be convenient for them if an option was available to wishlist the item from product card. As most of the users were working full time, they preferred to save the product on-the-go during office hours, the moment they think of it to buy for later. Having a short and quick user flow would be satisfactory during this time, giving users a sense of control and freedom.

Why did I make this change ?

Replaced ‘Save For Later’ button with a ‘Wishlist’ icon

Observations during primary research :

• Users expected a toggle approach for wishlisting the product, where they can simply add/remove the product with a tap on the button. This was missing in the existing design.
• Once the product was added to the wishlist, ‘Save For Later’ button was disabled immediately, which left most of the users confused. They were not sure where can they view the product or how can they undo this action.
• The users were unable to remove the product for list directly, unless it was added to the cart. Users felt as if they are made to buy the product mandatorily.

Changes made on the screen :

• Replacing ‘Save For Later’ with a toggle ‘Wishlist’ button allowed users to easily switch on this feature. The shape of button was specifically kept heart-shaped, since it was already used by competitors, hence users will already be familiar with it.
• Also, the feature was made independent of products available in the cart. Users can remove the product from wishlist irrespective they want to include it in the cart or otherwise, by a simple toggle. This will give a sense of freedom among the users.

2. Re-arranged the ‘Share Product’ icon along with Product image

• ‘Share Product’ icon was moved below product image, to convey users its relation to the product in a better way by reducing the proximity with product description.
• The icon is placed on the top navigation bar in the current design, which is relatively far from the product elements, given that the feature shares information related to the respective product.

3. Added a ‘Wishlist Page’ button and Pop-up Notification

Observations during primary research :

• 3/4 users were unable to find the list of saved products, when prompted. They need to go to cart and further scroll down to the end, to view these products.
• Users felt existing flow to be inconvenient, they were left clueless as to where to navigate further once they wishlisted the products, to view them.

Changes made on the screen :

• ‘Wishlist Page’ icon was added on the top navigation bar, which can be used to navigate directly to review wishlisted products, which is more integrated and intuitive within user flow unlike the existing design.
• Once user saves an item a pop-up notification is given on this button, which consiously confirms user on their action and further suggests them where to navigate to view these products. Also, a counter of number of products added is notified to the users.

4. Enlarged ‘Add To Basket’ button, CTA for the screen

• ‘Add To Basket’ button was further enlarged than the existing design to fit towards bottom of the screen, since it acts as a CTA for this page. This was in accordance to Fitt’s law.

Wishlist Page

Why did I make this change ?

Observations during primary research :

• In the existing design, there is no dedicated screen to review wishlisted items. When users were asked to save the product, the feature simply disabled leaving them clueless what to do next. Most of the times I prompted to check in the cart section. If there are already products added to the cart, they need to further scroll down to finally land on the list.
• Also, few users used wishlist just as a reference to cross check and tick-off the items they have bought in the recent purchase.
• Hence, there was an ask from most of the users I interviewed for a separate view on the items they have saved. Furthermore, I did a competitor audit across various online e-commerce platforms which suggested the same.

Changes made on the screen :

• Newly added ‘Wishlist Page’ button explained previously, would navigate to ‘Wishlist’ screen dedicated to review the products that user has saved. Once user saves any item, a pop-up notification suggests them where they can view their list.
• Product card on this screen have an option to remove the saved items, irrespective of the user’s wish to add them to the cart, unlike in existing user flow.

Share Wishlist

Why did I make this change ?

• This feature is inspired by few of the competitors across the market. User can share their wishlists to friends and acquaintances, which wil allow them to convey what they wish/plan to buy or expect from their social connects on occasions such as birthdays.
• This would considerably help in acquiring new users on the application, positively impacting the organic Traffic for the platform.

Prototype

Comparison : Post Usability Testing

During usability testing, one of the users was confused between ‘Wishlist’ button below the product image and ‘Wishlist’ page since both were same in visuals in previous design. So they ended up tapping on the one present on the top navigation bar, when prompted to save the product.

Hence, I changed the ‘Wishlist Page’ button to a solid heart-shaped icon to convey its usage more appropriately.

On wishlist page, on of the users expected to navigate back to navigation description from product card. This seemed like a viable flow, thus changes were made to the flow accordingly.

Prototype : Post usability testing

Wireframes for improvising the ‘Wishlist’ flow

4 features were mainly in focus while improvising user flow :

1. Product listing : Make saving products easier while listing the products available on app.
2. Product description : Make saving products easier on product description page.
3. Wishlist review : Avail an overall review of wishlist to the users.
4. Wishlist share : Avail sharing option for the wishlist that user creates.

Inspiration used

Future scope for this project

• Wishlisted products can be further grouped into sub-lists, based on the purpose they are saved for. For example : Gifts, Daily Grocery, Electronics, etc.
• User can have shared access over the lists of their social connections based on invites.

Thanks for sticking till the end of my case study! I would really like to know your constructive feedbacks, which are of most value.