From the Desk: Designing for cart changes on checkout

🛒 How we reduced friction for users in the checkout process by handling cart changes gracefully.

Role

User Experience Designer

Collaborators

Haziq Mir — Head of Design
Pranay Merchant — Product Manager

Timeline

2–3 weeks

Abbreviations used

OOS* — Out of Stock
SKU* — Item Unit
MOV* — Minimum Order Value

It all started when…

We started receiving feedback from our external users(LinkedIn, AppStore, etc) as well as from internal users (Slack) about how Dunzo’s handling of OOS items on checkout is confusing and a total mess!

Snapshots of feedback we got from folks from social media and internally

The problem statement…

Due to a high number of out-of-stock sessions (around 15%) and unintuitive handling of the scenario, users are often dropping off at the cart due to dissatisfaction with the overall experience. This is also creating a negative impact on our brand due to the issue surfacing on social media.

And a few constraints…

1. With current tech limitations changes made on any page other than checkout are out of scope
2. Use of existing widgets as strictly as possible
3. With current tech limitations, we cannot reduce the number of OOS sessions for a user (operational)
4. Reservation ideology out of scope (operational)

Example illustrating reservation ideology

Breaking down the facts —

Total Out-of-stock cases (15% of total CP sessions), out of which —

1. 80% of sessions have some item(s) OOS,
2. 10% of sessions have all items OOS, and
3. 7% of sessions have a change in item quantity.

Understanding the pain points 😫

1. Communication is confusing — pointed out by many users.
2. The user is still shown the bill with the delivery fee and stuff even when all items are out of stock; the user has no clear way to proceed.
3. The permanent OOS msg box takes up an unnecessary significant space on CP.
4. In the case of a change in item quantity, the user is blocked from continuing to pay without knowing why.

Goals 🥅

• How might we ensure an intuitive experience for users facing stock scenarios with their cart item(s) on checkout
• How might we fulfill user needs so that they can contently place an order even after an out-of-stock scenario?
• How might we ensure clear communication so that the user can make an informed decision?

We want to fix a broken UX loop, but there is no clear metric that this improvement would impact.

Assumption

The user is willing to place an order with the given changes in the cart.

Based on the assumption outlined above, below is the flow for changes happening on the cart.

Brainstorming on scenarios…

We sorted the issues based on their occurrences and the level of hindrance to the overall checkout experience.

Brainstorming high-level solutions for all use cases.

Brainstorming high-level solutions for item out-of-stock use cases.

We are going to focus on the below scenarios one by one —

1. Some items are out of stock
2. All items out of stock
3. Change in item quantity

Scenario 1 👉 Some item(s) out of stock

Existing design & pain points

Key focus elements

💡 Insight: Some of our users have contacted customer support to report that they did not notice items were out of stock before placing an order but only realized after receiving it.

1. Has the user acknowledged the change?
2. Do we need to make users acknowledge the above fact forcefully? — Yes.
3. Once acknowledged, can the user move forward intuitively?

Ideating on solution approaches

There were two directions explored in which rapid prototyping was done —

created at very early stage, do overlook irregularities in designs (if any) 🙈

Both iterations had their pros and cons, with the major decision point being —

1. In approach 1, a blocker would act as a possible hindrance to user flow however makes sure that the user acknowledges the change, while
2. In approach 2, if we don’t block users, there is a considerable chance of the user missing out on the change — resulting in breaking the trust in the brand itself

After considering several factors, including user feedback from customer support and current industry practices. We decided to move forward with iteration 1, choosing the lesser of two evils.

removing individual out-of-stock item

removing all out-of-stock items

Scenario 2 👉 All items are out of stock

Existing design & pain points

Key focus elements

1. Is the communication intuitive and upfront?
2. Does the user know what to do next?
3. Are we making sure that the user acknowledges the change?

Opportunities

1. recommend items on checkout based on OOS items and purchase history — can do
2. re-direct users to the home page — can do
3. get users notification permission to notify them about stock items — not in scope

Final designs

clearing cart with all out-of-stock items

Scenario 3 👉 Change in item quantity

Existing design & pain points

Key focus elements

1. Is the communication intuitive and upfront?
2. Make sure to not over-communicate
3. Does the user know what to do next?
4. Are we making sure that the user acknowledges the change?

Final designs

Ideas that could not make it 💔

👉 Out-of-stock item recommendations

The idea is that instead of reminiscing about an item that went out of stock, the user can add a suggested replacement (similar to the item) to their cart.

👉 Notify users when an item is back in stock

Trade-offs

1. With current tech limitations, we cannot suggest a replacement for an OOS item.
2. Notify about items back in stock as a feature requires separate logic and timeline to be built, hence can’t be covered with this project

Ending notes 🌸

We want to fix a broken UX loop, but there is no clear metric that this improvement would impact. However, with the release of this project, the number of complaints from users regarding OOS handling has become negligible.

Highlighting the fact that we actively listen to our users and constantly strive to meet their needs :)

That’s it, folks! For those who made it till here…

Want to discuss more? Let’s chat about anything and everything — Say hi on Twitter or Linkedin 👋