Overview: Enhancing the in-store experience for Gap Inc’s family of brands was a significant milestone from the Executive team in Q2 of 2018. In order to focus on a mobile-first strategy, Gap Inc. aimed to offer a standard of immediacy in their mobile experience similar to apps like Uber, Postmates and Amazon Prime. Known as “Buy Online, Pickup in Store”, the feature would be created as a simple proof of concept for Old Navy. With success, this feature would go on to being adopted into the entire family of brands (Gap, Banana Republic and Athleta) and would fundamentally change the way Gap Inc. customers could quickly receive purchased items.

Challenge

When making a purchase on the app, users do not want to wait for the item to be shipped to them. When completing a transaction on mobile, Gap Inc. needed to provide a ‘pick-up-in-store-option’ so customers could get their items on the same day. Prior to designing this interaction flow, user research was performed which I was not a part of. Because of my background in interaction design, I was able to help Gap Inc’s mobile team define the ideal interaction for Buy Online Pickup in Store based upon information provided by the internal research team.

The Opportunity

Old Navy had an area of opportunity to engage their users that was unique. Because of the low price point of many of their items and because of the number of brick and mortar locations (1,106), shipping didn’t always make economic sense for Old Navy customers. It stood to reason that if Old Navy’s customers (who tended to be more budget-conscious and tended to live in more suburban areas) had heavy engagement with BOPIS, then there was a strong chance that BOPIS would also work for more urban shoppers from Gap and Banana Republic.

Objective: Design an interaction that marries the digital transaction experience with an in-store pickup experience

My Role: Product designer

Channels: ios

Timeline: 3 MonthS

Team: PHILL FARRUGIA (IOS ENGINEER), SAGAR NATEKAR (API ENGINEER), TELA CHEANG (PRODUCT DESIGN), ROLANDO GALINDO (PRODUCT DESIGN), RAFA KELLY (BACKEND ENGINEER)

Wireframing the Interaction

When I joined this team, BOPIS was conceptually well defined. The team began by sketching the screen flow in simple language (free from drawings or UI elements). I relied on the design studio methodology to collaboratively create the initial wireframes during a design workshop. Through prototyping, iterating and user feedback, we established the following set of wireframes.

Finalized Functionality

Simple ON/OFF toggle for BOPIS option:

1. Clear ‘Call-to-Action’ (ON/OFF button) to enable the feature (globally appears at the top of all ‘Category description pages’)

2. In-line ‘Store Locator’ (based on Geo/Zip) when “Pick Up in Store” option is ON making store selection quick and less interruptive

3. Enabled mobile text support and de-coupled payment details (card holder information) from pick-up person details giving users maximum freedom to pay and pickup as their individual circumstances dictated

Final Results

Promos (not my design work but showing how Gap Inc. talks to users about the feature as it exists on desktop)

APP FEEDBACK