Cart Experience Improvements

Cart Experience Improvements

Iterative improvements to cart and checkout experience that increased average order value, conversion rate, and value perception.

Iterative improvements to cart and checkout experience that increased average order value, conversion rate, and value perception.

TEAM

1 PD + 1 SPD + 1 PM

1 PD + 1 SPD + 1 PM

TIMELINE

3 + 1.5 + 3 weeks

3 + 1.5 + 3 weeks

Platform

Mobile - Android, iOS & Web

Mobile - Android, iOS & Web

Company

Noon Minutes

Noon Minutes

Cart Experience Improvements

Iterative improvements to cart and checkout experience that increased average order value, conversion rate, and value perception.

What are we solving?

What are we solving?

The cart page had a few gaps: 1. There was no real estate for relevant product recommendations. 2. Users sending orders to someone else had no way to ensure the delivery call went to the receiver, not themselves. 3. There was little visibility into how much users were monetarily saving before checkout. 3 separate briefs, 1 shared surface, all with one goal: to level up the cart experience.

The cart page had a few gaps: 1. There was no real estate for relevant product recommendations. 2. Users sending orders to someone else had no way to ensure the delivery call went to the receiver, not themselves. 3. There was little visibility into how much users were monetarily saving before checkout. 3 separate briefs, 1 shared surface, all with one goal: to level up the cart experience.

The cart page had a few gaps: 1. There was no real estate for relevant product recommendations. 2. Users sending orders to someone else had no way to ensure the delivery call went to the receiver, not themselves. 3. There was little visibility into how much users were monetarily saving before checkout. 3 separate briefs, 1 shared surface, all with one goal: to level up the cart experience.

How did we solve it?

How did we solve it?

We introduced 3 distinct sections to cart: 1. Cart recommendations to surface relevant products and open up monetisation opportunities. 2. Receiver details, enabling users to add a recipient so delivery communication goes to the right person. 3. Order savings summary to surface the value a user is getting before they check out. Each was designed and shipped independently, and all three were A/B tested before full rollout.

We introduced 3 distinct sections to cart: 1. Cart recommendations to surface relevant products and open up monetisation opportunities. 2. Receiver details, enabling users to add a recipient so delivery communication goes to the right person. 3. Order savings summary to surface the value a user is getting before they check out. Each was designed and shipped independently, and all three were A/B tested before full rollout.

We introduced 3 distinct sections to cart: 1. Cart recommendations to surface relevant products and open up monetisation opportunities. 2. Receiver details, enabling users to add a recipient so delivery communication goes to the right person. 3. Order savings summary to surface the value a user is getting before they check out. Each was designed and shipped independently, and all three were A/B tested before full rollout.

The Process

The Process

1
Process
Each project started with a requirement from the business team, followed by analysing the user data of the existing cart page to understand what was and wasn't working.
2
Competitive Research
With the problem better defined, we looked at how others were approaching the same challenges to shape our direction.
3
Exploration
We explored multiple directions for each problem, keeping the constraints of a high-intent, functional cart page in mind throughout.
4
Review, Iterate, Handoff
Feedback from reviews pushed us to iterate and tighten the designs before we handed the designs off to development.
5
A/B Testing
Solutions for cart recommendations were A/B tested before full rollout. It tested positive in its control groups, and is now live for all users.
6
Post-launch Revisions
Some designs required a update after handoff to account for use cases that came in as a late requirement.

Key Considerations

Key Considerations

3-tab structure was not working

3-tab structure was not working

3-tab structure was not working

Only 2% of users were navigating past the first tab in our 3-tab recommendations section. While the design was space efficient, it was just not working. We dropped the tabbed structure and rethought how recommendations were surfaced.

Only 2% of users were navigating past the first tab in our 3-tab recommendations section. While the design was space efficient, it was just not working. We dropped the tabbed structure and rethought how recommendations were surfaced.

Only 2% of users were navigating past the first tab in our 3-tab recommendations section. While the design was space efficient, it was just not working. We dropped the tabbed structure and rethought how recommendations were surfaced.

Poor horizontal scroll depth

Poor horizontal scroll depth

Poor horizontal scroll depth

Users were scrolling vertically far more than horizontally, which is typical user behaviour. We made the switch knowing it would increase page length, but with ~70% of users already reaching the bottom of the cart, the tradeoff was acceptable.

Users were scrolling vertically far more than horizontally, which is typical user behaviour. We made the switch knowing it would increase page length, but with ~70% of users already reaching the bottom of the cart, the tradeoff was acceptable.

Users were scrolling vertically far more than horizontally, which is typical user behaviour. We made the switch knowing it would increase page length, but with ~70% of users already reaching the bottom of the cart, the tradeoff was acceptable.

Visibility for Favorite SKUs

Visibility for Favorite SKUs

Visibility for Favorite SKUs

Despite low tab engagement, the Favorites tab had the highest ATC rate. So we moved those suggestions upfront on the page and reinforced education around other Favourites entry points in the cart.

Despite low tab engagement, the Favorites tab had the highest ATC rate. So we moved those suggestions upfront on the page and reinforced education around other Favourites entry points in the cart.

Despite low tab engagement, the Favorites tab had the highest ATC rate. So we moved those suggestions upfront on the page and reinforced education around other Favourites entry points in the cart.

Monetised content got its own slot

Monetised content got its own slot

Monetised content got its own slot

There was no existing space for monetised SKUs on the cart, and mixing it with personalised recommendations would conflate two different intents. To avoid that, we carved out a dedicated section for it to keep the two distinct.

There was no existing space for monetised SKUs on the cart, and mixing it with personalised recommendations would conflate two different intents. To avoid that, we carved out a dedicated section for it to keep the two distinct.

There was no existing space for monetised SKUs on the cart, and mixing it with personalised recommendations would conflate two different intents. To avoid that, we carved out a dedicated section for it to keep the two distinct.

Visually separating recommendations from cart items

Visually separating recommendations from cart items

Visually separating recommendations from cart items

We noticed that a few of our competitors were auto-adding products to cart, which is a dark pattern, and received backlash for good reason. We wanted our recommendations to feel helpful, not manipulative, so the suggested items are always kept visually distinct from what's already in the cart.

We noticed that a few of our competitors were auto-adding products to cart, which is a dark pattern, and received backlash for good reason. We wanted our recommendations to feel helpful, not manipulative, so the suggested items are always kept visually distinct from what's already in the cart.

We noticed that a few of our competitors were auto-adding products to cart, which is a dark pattern, and received backlash for good reason. We wanted our recommendations to feel helpful, not manipulative, so the suggested items are always kept visually distinct from what's already in the cart.

Receiver details needed an end-to-end solve

Receiver details needed an end-to-end solve

Receiver details needed an end-to-end solve

While the brief was just for the cart page, this feature needed to reflect across Checkout, Addresses, Order Confirmation, and Order Tracking pages. We expanded scope deliberately to build a consistent end-to-end experience.

While the brief was just for the cart page, this feature needed to reflect across Checkout, Addresses, Order Confirmation, and Order Tracking pages. We expanded scope deliberately to build a consistent end-to-end experience.

While the brief was just for the cart page, this feature needed to reflect across Checkout, Addresses, Order Confirmation, and Order Tracking pages. We expanded scope deliberately to build a consistent end-to-end experience.

A feature with no numbers to justify it

A feature with no numbers to justify it

A feature with no numbers to justify it

The Order Savings Summary section was being built to drive affordability perception, and no hard business metric was attached to it. This made it difficult to get engineering bandwidth, which directly shaped how much time we spent designing and how lean we kept the development ask.

The Order Savings Summary section was being built to drive affordability perception, and no hard business metric was attached to it. This made it difficult to get engineering bandwidth, which directly shaped how much time we spent designing and how lean we kept the development ask.

The Order Savings Summary section was being built to drive affordability perception, and no hard business metric was attached to it. This made it difficult to get engineering bandwidth, which directly shaped how much time we spent designing and how lean we kept the development ask.

A/B testing was our safety net

A/B testing was our safety net

A/B testing was our safety net

The cart is seen by all users. Adding new sections and reorganising a high-intent functional page carried real risk. Testing each addition independently, and ramping recommendations gradually, gave us the confidence to roll out everything.

The cart is seen by all users. Adding new sections and reorganising a high-intent functional page carried real risk. Testing each addition independently, and ramping recommendations gradually, gave us the confidence to roll out everything.

The cart is seen by all users. Adding new sections and reorganising a high-intent functional page carried real risk. Testing each addition independently, and ramping recommendations gradually, gave us the confidence to roll out everything.

Final Designs

Final Designs

the

the

experience

experience

that went

that went

live

live

Outcome

• Releasing cart recommendations gradually to our users initially reduced cart-to-checkout conversion due to first-time exposure effects, but metrics stabilized as users adapted. • Receiver Details continues to see steady usage among a small segment, indicating sustained value despite limited adoption. • Order Savings Summary is a perception-led addition with no hard metric tied to it, reinforcing the need to anchor even perception-led features to measurable outcomes.

• Releasing cart recommendations gradually to our users initially reduced cart-to-checkout conversion due to first-time exposure effects, but metrics stabilized as users adapted. • Receiver Details continues to see steady usage among a small segment, indicating sustained value despite limited adoption. • Order Savings Summary is a perception-led addition with no hard metric tied to it, reinforcing the need to anchor even perception-led features to measurable outcomes.