Background:

The Gap iOS app is a multi-branded e-commerce app (Shop from Gap, Old Navy, Banana Republic, and Athleta all in one)

It was launched in 2017 with all organic traffic and no marketing effort. It is rated 4.8 or above with tens of thousands of ratings.

Buy Online Pickup In-Store

BOPIS was a large a business initiative to give customers an omni-channel shopping experience by avoiding shipping costs and getting items faster. We started this feature on the most popular brand (Old Navy) first, then with its successful performance, rolled it out to all of the brands within the app. 

“In a competitive retail environment, it’s more important than ever to meet the
customers wherever and however they like to shop.“

-Steve Peters, Senior Vice President of BR

Duration
  • 3 Months
Team Members
  • Tela Cheang
    PRODUCT DESIGNER
  • Phillip Lee
    PRODUCT DESIGNER
  • Gloria Chu
    SENIOR PRODUCT MANAGER
Deliverables
  • Competitive Analysis
  • Wireframes
  • Clickable Mobile Prototypes
  • Intercept Testing
  • Final Visual Design

RESEARCH AND DISCOVERY

Personas

Because each brand has different types of users and customers, we made trade-offs when deciding on which key attributes to focus on by asking:

  • How might we make this easier to use for the busy mom?
  • What kinds of context are they dealing with?
  • Where and at what time are they using the app?
  • What do we need to improve on in terms of accessibility?

Competitive Analysis

We looked at several other big e-commerce mobile apps to evaluate their feature strategies and noticed similar patterns

  • Top level in UI
  • Friendly informative copy
  • Geo-location or custom “home store” to set location
  • Multiple entry points:
    1. Filter on Catalog Page
    2. Product Page
    3. Cart / Bag / Checkout

CONCEPTS & TESTING

Concept Validation and Testing

For concept validation and usability testing, we create test scripts, scenarios, and use Flinto to make high-fidelity animated prototypes which we took to actual Gap and Old Navy stores for intercept testing with actual customers.

1. Category Page Selection Concepts

After weighing pros and cons of a few concepts, we converged down to two main options for testing and iteration:

Intercept Test Findings

  • Copy needed to be clearer
  • Tabs made results seem binary– e.g. only pickup items and only ship items on each tab
  • Toggle was clear and preferred over tabs

2. Product Page Selection Concepts

Intercept Test Findings

  • A and C was best for usability, with C preferred by users
  • Link and disabled color was too similar and confusing
  • Find in store feature needed to be more separated from buy and pickup
    (Users were confused they are different)

FINAL DESIGNS

Combining the findings from testing, we fleshed out the toggle direction on the Category page, mindful to make the tappable space on the same row distinct for toggle selection and store location selection.

When accounting for different modes in checkout, we added a swipe to reveal in the bag for users to quickly switch pickup items to shipping. In order to educate users this function exists, coach marks will also appear to first time users of BOPIS.

Live App Interaction video:

Detailed Interaction Flow:

Because of limitations on how inventory was checked, it was crucial to map out every state based on how the user enters the Product Description Page, if they have selected BOPIS, the store, or the product size and color.

With the successful rollout of BOPIS in the Old Navy App, we expanded the feature to the other 3 brands to expand the omni- channel in-store experiences.

During my time with the team, we organically grew from about 4% of all online revenue to 6%.