Buy Experience: Bag and Checkout Redesign

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

Opportunity

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

Challenge

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

Product OUTCOMES

Allow customers to see all their savings in bag- applicable promos, credit card rewards and redeemable bounce back program dollars (called bonus cash) AND qualification for free shipping
Remove shipping cost calculations from shopping bag
Create Gap’s version of single click checkout

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.

Promos and rewards applied as last step in checkout would make customers lose their free shipping

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

A snapshot of prominent competitors

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.

A/B testing removal of shipping calculation from shopping bag

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.

IDEATION

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

They allow for multiple promos (at most 5) per order with many possible exclusion criteria
Marked down or promotionally priced products also show up as “savings”
Some promos are automatically applied- this is not necessarily always clear to the customer
Some promos are for card holders only and can only apply if the same card is being used to pay for the order
Bounce back program credits work as promo code
Rewards work like tender

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

Comprehension- all dollar amounts should have a clear purpose and easy to compute manually with “just enough” detail
Consistency- promo application should behave in a predictable manner every time
Encouragement- Accrued or earned savings should be celebrated and easy to utilize
Conservative- Changes to the bag should not alter its core behavior and layout

Final Designs

This final design addressed all customer concerns and tested extremely well

Not disrupting existing mobile layout- one of the key principles

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

Live: https://secure-www.gap.com/buy/shopping_bag.do

next steps: Visioning

Building on top of the existing bag, I created an interactive prototype to show to collaborators and leaders of how we could include more of the roadmap items like Apple Pay and credit card reward redemption in bag.