Integrating BOPIS and Enhanced Delivery Date for Vans and The North Face (Phase 2)
I led the UX effort to integrate BOPIS (Buy Online Pickup in Store) and EDD (Enhanced Delivery Date) for two of VF Corp's brands, Vans and The North Face. All work was simultaneous with both brands and VF's product and technology teams.
Phase 1 was an MVP limited in scope to launch quickly with minimum effort. As VF's shipping and inventory logistics were improved, they was ready to plan Phase 2.
Phase 2 began with mobile-only interaction flows to keep the planning focused on the highly complex scenarios and dependencies.
All pickup and delivery logic starts with location
The combination of BOPIS and EDD hinged on knowing each shopper's location and store, whether explicitly known, derived, or inferred. A flow chart was built in collaboration with the back-end team as an easy-to-follow roadmap.
PLP (Product Listing Page)
Help users discover in-store pickup while browsing
Feature discovery was key in getting users to learn about and consider store pickup options. We introduce the feature early at the listing page in a high visibility position.
PDP (Product Detail Page)
Give user precise store availability at the product level
At the product level, we give users detailed availability, time sensitive cutoffs, low stock, and nearby availability.
Cart
Help users recover if items become unavailable
The cart serves to confirm choices prior to checkout. But if availability changes while shopping, we planned guided recovery choices to save sales.
Checkout
Accommodate any order scenario at checkout
The complex logistics on the back-end allowed us to accommodate complex order scenarios on the front-end. Users could checkout with a mix of shipped and pickup items to multiple locations and stores.
Gifting, custom items, and large order quantities introduced even further complexities for which we designed detailed logic for.
Alternate payment methods
Allow payment by ApplePay and PayPal
Alternate payment methods proved a great challenge with differing capabilities across ApplePay, PayPal, and in-browser payment request APIs. We clearly laid out the major question marks and arrived at a solution that met the needs of compliance, operations, technology, business, and, ultimately, the customer.
Keep user informed on status
Every complex scenario needed to be applied to the email campaigns as well, for which we built diagrams and wireframes with dynamically configurable content.
Visual Design
Visual designs were rapidly created from the design patterns we already had in place for each brand. UI was styled on top of the mobile wireframes and then scaled to desktop. Below are a few samples.
User testing
We performed a series of usability tests across a complex series of tasks on mobile prototypes with significantly high success rates across all tasks.
Everything was greenlit and significant back-end development was already complete before the project got put on hold, as VF's focus turned to the operational effort of relocating every brand to a central Denver campus.