Background:

The native app was launched in 2017 with all organic traffic and no marketing effort. All four brands are rated 4.8 or above with tens of thousands of ratings for all the brands.

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. 

“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 to test 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:

Findings

  • Copy needed to be clearer and directional
  • Tabs made results seem binary– e.g. only pickup items and only ship items on each tab
  • Toggle was clear that it was a filtering function, maps to mental model of native iOS users

2. Product Page Visual Selector Concepts

General observations and findings

  • A and C was best for usability
  • Link and disabled color was confusing
  • Find in store needed to be separated from buy and pickup

Final Design

Interaction video:

Interaction Flow:

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%.