Buy Experience: Bag and Checkout Redesign

Designing several business driven UX improvements to Gap Inc’s bag and checkout experiences


Gap Inc has a single bag and checkout experience for all four of its brands. Design decisions constrained by legacy systems, different technology stacks and organizational cautiousness due to business sensitivity resulted in a sub-optimal customer experience. Two different teams were initiated to solve “low risk, high impact” issues with an overarching “do no harm” philosophy.

My Role

UX Lead

Collaborators:  Product management, visual design, marketing, customer insights, content writer, brand leaders, engineering


How might we improve the promo redemption and checkout experience for known shoppers?

Business Goal

Save shipping revenue by awarding free shipping to customers on net bag total (after all promos are applied) versus gross bag total. This change was projected to have an incremental earning of $13M in shipping costs


Existing Experience

Gap’s shopping bag featured a breakdown of the costs of the items in the bag and a selection of shipping methods. A threshold amount of $50 was required to enable the free shipping selection.

Free shipping is a very standard customer expectation. And it was a well-documented customer behavior to add items to bag just to meet the free shipping threshold.

However, customers could apply promo codes they receive only one step before placing their order in checkout.

If valid promo codes brought their final total below $50, they were automatically switched over to the basic $7 shipping fee option.

Inevitably customers would try to apply their promos at this last step in checkout bringing their total to less than the $50 threshold and thus losing the free shipping.

Loss of free shipping led to checkout abandonment.

Competitive Research

Looking at over 30 other retail experiences, a landscape of threshold shipping and promo code relationship emerged

TWo key competitive insights

  • Uncommon to repeat promo codes in bag and again in checkout
  • Uncommon to have both promo codes and shipping method in bag

The restrictive sequence in which Gap was offering application of its promo codes and qualification for free shipping was not what customer’s were experiencing at other retailers.

Business Considerations

  • Some brands like Old Navy desire prominent promo usage while others like Banana Republic desire the opposite customer behavior
  • Greater transparency around promo exclusion messaging in order to minimize call volumes
  • Same or improved online P&L as a result of any change with zero tolerance for any dips
  • Improving customer loyalty through better communication and easier application of all rewards and bounce back program earnings

Shipping Method Experiment

A typical beginning is a team brainstorming session where we whiteboard all known facts/data points and assumptions the team has around the perceived problem.

In this case, we had factual data about- checkout abandonment in promo module, how competitors were offering “qualified for free shipping” and promo, reported problems around promo use (through numerous surveys and call logs over the years) etc.

Some assumptions we made included:

  • Customers wanted to see ALL savings ahead of checkout,
  • They always wanted to have/qualify for free shipping,

The first hypothesis to be tested in this case was IF we remove shipping method selection from bag, customers would continue to checkout in order to make a selection which we can measure by comparing bag conversion rate.

This was the smallest possible experiment to learn whether pushing all shipping related selections to checkout have any effect on bag conversion.

Promo Module Experiment

Following a similar brainstorming process on the project objective the next hypothesis was around moving the promo module out of checkout and into the bag.

IF customers are allowed to see all of their possible savings in bag including qualification of free shipping then they are likely to checkout during the same visit to back as measured by increased bag conversion

This required considerable technical development to create an A/B experiment.I decided to go with a more traditional approach, first creating divergent concepts of how all savings could be shown in bag.


While these concepts were focused on the larger picture of how all possible savings could be shown in bag, the experience had to be mindful of a few unique features of how Gap businesses show savings and promos

The concepts were  reviewed by UX leaders and the three best ones were selected for rapid interviews with customers.

Learning Agenda

This is something I typically always set up to orient researchers, product managers and other designers on the team. Some questions here included

  • Are customers expecting to apply promos in the bag?
  • Where do they expect promo field to be?
  • How do they expect savings to be shown?
  • Which savings are expected to be shown at this point? Do they expect both rewards and bonus cash to be shown?
  • Do they understand the difference between the different types of savings?
  • What would make them continue to checkout? What would stop them?

Prototype and Learnings

Interactive prototype for usability testing (developed by colleague)

fig: findings report

  • Users were not clear that the shipping threshold had been reached
  • Users wanted to know which promo was applied to which item and how much they saved
  • Breakdown of overall savings was not of interest
  • Promo exclusion messaging was well received
  • Merchandise credit (mark down items) were not clearly distinguished from promos
  • The arrangement of the numbers- subtotal at the top and my savings at the bottom was not clear

Design PrincipleS

Final Designs

Highlights and impact

  • All promos applicable to the product and mentioned besides it
  • The amount of savings per product is also shown clearly
  • By adding the bar, it was very clear whether free shipping was achieved and what was needed to do so
  • Savings and number of items applied to were mentioned per promo

The final designs went through reviews with UX leaders, product partners, business experts and leaders. Over several months of developer pairing, the product was launched on Gap sites.

Overall savings on shipping calculations were reported. There were also lower call volumes with regards to promo redemptions