MEC. Buy Online Pickup In-store (BOPIS)
Buy online pickup in-store (BOPIS) was a companywide initiative aimed to introduce 2-hours instore pickup for online orders and increase the number and share of online orders with in-store pickup delivery method.
Winner of Vancouver UX Award 2019 for e-commerce
Project became a winner of 2019 “Vancouver UX Awards” within E-Commerce category. This category was assessed based on the following judging criteria: emotion, elegance, clarity, innovation and impact. The e-commerce also category required that submissions were live during the past year (October 2018 to 2019) and included metrics that matter and can demonstrate their impact.
More details on vancouveruxawards.com
My Role
I’ve started as UX strategist at MEC in fall 2018 and joined “back of the funnel” product team to work closely with the product owner, senior backend engineer, frontend engineer, and UI designer. The team was recently formed and aimed to focus on checkout, fulfillment, account management, order tracking, and post-purchase experience. BOPIS project was defined as a companywide priority back in 2018 and was our team’s main focus for the first half of 2019. As a UX strategist, I was responsible to design end-to-end ecomm BOPIS experience.
Project kickoff
When I joined the team the companywide initiative “Buy online pickup in-store” (BOPIS) for 2018 has been already defined and store operations and capacity teams were already working on increasing the number of orders that can be fulfilled in-store decreasing fulfillment time to 2 hours. Our team was asked to work on a plan to increase the amount of online in-store pickup orders during 2019 and promote a 2-hour pickup by the time stores are ready to meet this promise. We started with gathering market data, looking into previously conducted user research and GA data.
Market research
The top reasons for choosing in-store pick up (PWC)?
"Avoiding delivery fees" is the #1 reason for choosing in store pick-up (51%)
To avoid crowds (43%)
To make checkout experience faster (29%)
To make last minute purchse (28%)
The top reasons for choosing in-store pick up (Internet Retailer)?
Avoid shipping fees (73%)
Store is nearby/convenience (32%)
Didn't want to wait for delivery/need the item today (30%)
Were going to the store anyway (22%)
In-store pickup popularity among Canadians
11% regularly use pick-up in store
35% have used it on occasion
24% have not used in store pick-up but would consider it for future purchases
What did we know about MEC customers?
40% of members live within 20 minutes of a store
42% of orders can be fulfilled as pick from store
60% of members are interested in the same-day store pick up
52% of members expect a store pick-up to be ready within 3 hours
User research
As our team’s product owner was working on identifying project goals and targets, I booked some time to conduct user interviews, and look into the voice of customer data (feedback from Post Purchase Survey, Live chat, Opinion lab).
I’ve also organized and facilitated user interviews with our existing customers to learn more about delivery method preferences and context for choosing a delivery option. We had 10 research participants that were chosen from an existing customer base and came to our office for a 1-hour interview. Questions we wanted to answer:
what delivery method they choose under different circumstances
when do they prefer to pick up their online order in a store
when it’s more convenient to ship their order home
what are the critical step within a purchase funnel when delivery method decision is being made
what information is important to choose a delivery method
Data synthesis
As a result, I ended up with a great amount of data both from the voice of customer and from user interviews. Data synthesis helped to identify common themes and main painpoints/opportunities to focus on in further design.
User Needs and Job Stories
Once the data synthesis was completed 4 main themes/groups of user needs within BOPIS initiative emerged.
User wanted to know (4 main user needs):
Preferred store location
Accurate Inventory
Delivery Time Information
Delivery Cost Information
After analyzing main areas of focus for BOPIS project there was one theme that was defined as a foundation that we need to build before continuing to work on the project - Preferred store location. All other information was already available on our side, but preferred store was something that user has to proactively provide us. Without knowing the user’s preferred store we are not able to get relevant information about stock levels, calculate pickup time estimates or delivery costs. So the team made a decision to work on “Set up preferred store” project first before continuing with BOPIS. Click here to learn more details about “Set Preferred Store” project.
BOPIS Job Stories
SITUATION
When users are looking for a needed product online within a product discovery phase
MOTIVATION
They want to be able to evaluate relevant delivery/shipping costs, delivery time and inventory information as part of the overall product discovery and purchase evaluation process as early within a purchase funnel as possible
OUTCOME
So they can make an informed purchase decision.
SITUATION
When users consider to do in-store pickup or buy a product in-store
MOTIVATION
They want to know the most convenient store location
OUTCOME
So they can efficiently plan a trip to a store.
SITUATION
When users are discovering and shortlisting products
MOTIVATION
They want to be able to know delivery/pickup time and compare delivery time options as early within a product discovery phase as possible
OUTCOME
To efficiently make purchase decisions.
SITUATION
When users are ready to submit an online order
MOTIVATION
They want to be able to easily find precise information about delivery or pickup time for every item in their order
OUTCOME
So they can efficiently plan how to get an order and when to make a trip to a store.
Tech limitations
after defining high-level job stories and a list of user needs and problems that we wanted to focus on it was time to start mapping out the end-to-end experience. But first we wanted to know the list of possible tech limitation that could shape and define the experience.
After talking to our Store Operations, Order Management, ERP (Enterprise Resource Planning) team, and some other stakeholders we identified a list of technical limitations that informed our design. These were the main findings:
Iteration 1 of the BOPIS project will not have order splitting (ship to home and store pickup in one order; time store pickups to make one trip; store pickup at 2 different locations) due to ERP (Enterprise Resource Planning) platform capabilities.
If there’s more then 1 item in the order and one of items is available for a 2-hour pickup it will be fulfilled separately from other items and user will be notified on items readiness separately. We can’t merge and send out 1 notification as that’s considered order splitting in our ERP system.
There are specific types of products that have to be excluded from 2-hour pickup because they are oversized and require more handling. These products are flagged in the system, we can use these flags in our algorithm.
For bikes, we should be adding 24h to 2 hours fulfillment time when calculating estimated pickup time, as they require assembling. Bikes are also flagged in the system, we can use these flags in our algorithm.
End-to-end journey mapping
Ideal user journey
Taking into consideration all the technical limitation I’ve mapped out the end-to-end design solution for ideal user journey:
Preferred store. Once user lands on a website we enable them to set their preferred store either manually or by allowing geo-location.
PLP. Ideally, the user’s journey started on PLP where they would be able to filter products that are available within two hours at their preferred store. Functionality should also let them change their preferred store without leaving PLP page and set it from here for the rest of their journey if they don’t have one.
PDP. 2 hour pickup availability is introduced on PDP along with new functionality that will allow the user to choose their preferred delivery method directly on PDP. Functionality should also let them change or set their preferred store. If the user adds a product to cart with a selected delivery method, this method along with store should be set as default for further browsing.
Cart. The shopping cart should be defaulted to a delivery method selected on PDP with pickup estimated time listed on the order level and on the product level (insights for user testing). The user has an opportunity to change delivery method and
Checkout. To make the checkout process faster with fewer frictions we decided ideally to remove the delivery method and pickup store location choice and move it to cart completely. The user sees information about the estimated pickup time, but in order to change the delivery method or pickup store location, they need to go back to a cart. The order confirmation page includes estimated pickup time for every product and on the order level as well.
PDP for 1+ Cart. Once the user added product to a cart with the delivery method and pickup store selected we default their choice on every PDP. If for some reason they decide to change the delivery method or store when adding 2nd item to their cart, we have to warn them that we will be changing delivery method preferences for their entire order, not just for 1 item, and that estimate pick up time may change for the rest of their order.
MVP solution mapping aka “Morning wake up” agile exercise
After an ideal end-to-end journey that took into consideration all current technical limitations was presented to a team, we started to work together on MVP that will provide value to a customer but can be completed within a shorter time so we can validate our solution, iterate base on results and complete end-to-end journey incrementally.
First of all, the closer we’ve been moving to the beginning of the user journey the more complexity we’ve been facing, especially considering the fact that we were not able to split orders or allow users to pick up items from different store locations.
So we decided to start our journey from the end - from checkout and slowly move to the front of a purchase funnel. Improve delivery method choice visibility on Delivery method step in checkout and introduce 2 hour message throughout the checkout journey.
We also wanted to test if informing users about 2 hour in-store pickup on PDP is efficient and delivers any value for them. Will they be more willing to purchase products knowing that they are available for express pickup as early as on PDP. So we decided to add 2 hour message on PDP for eligible products without providing delivery choice.
There could be a scenario when the user will have multiple items in his cart, but only some will qualify for 2 hour pickup. In order to provide a consistent experience from PDP to checkout, we decided to have order level and product level estimate pickup time messages. So the user can easily see which products are qualified for 2 hours pickup in checkout on a product level, and the order level message will inform him about the soonest pickup time.
Once the MVP scope was defined we mapped out this experience on our features board together with the team, slicing it into epics and stories, and moved to the phase.
2 hour message logic
After MVP user journey was defined we started to work on 2 hour message message logic.
To provide a solution that would accommodate main user need we needed to design our experience based on the following variables: store preferences, product type, stock availability, and time.
Store preferences
Here you can find a detailed description of “Set Preferred store” project.
The entire experience kicks off once a user has set a preferred store. The location determines whether a product is available at the store and what time zone the estimated pickup time message will be. We gave users two ways to set their store - manually or by using geolocation, we also identified all other touch points in the shopping journey where they could set their store. We carried the preferred store through the user's shopping journey - pre-selecting the store on product detail pages, and inside checkout. This enables us to pre-populate the product detail pages and checkout with appropriate pickup messaging.
Product type and stock availability
Once we know the preferred store, it’s time to check the product eligibility. The product type and stock level will determine if the order can be fulfilled within 2 hours.
We had 3 main product types: standard products, products that require additional assembly, oversized or special products. Standard products are eligible for 2 hour pickup. If the product is eligible, we look at inventory levels at the user’s preferred store. If the product is “in stock”, then we show the 2 hour pickup message on the product detail page and throughout checkout. If the product is “out of stock” or “low stock” the message will not appear. Considering the potential of having stock level discrepancy, we remove the message for low stock items to ensure we can fulfill the order and delight our user. For products that have size and colour variations, we calculate availability for all size/colour combinations. The pickup time message is at the sku level meaning it ultimately tells users that this blue jacket in size 6 is available for pickup in 2 hours.
Time
In order for our pickup estimation messages to be precise and relevant we consider the following factors: time required to fulfill the order in a store based on product type; time of the day, when the user was shopping on the website; store operating hours (when the store is open and able to fill orders, and when they close); and store time zone. Taking all those factors into account we came up with the following scenarios to make sure our users get the most relevant pickup time estimation messages:
1) If the user is shopping online within his preferred store open hours - we show the order/product is available for pickup in 2 hours. Ex.: “Pick up in 2 hours.”
2) If the user is shopping before store open hours (from 12 am till store opens) - we show the order/product is available for pickup today, 2 hours after the store opens (to give the store staff time to prepare the order). Ex.: If the store opens at 10 am the message would say “Pick up today after 12 pm.”
3) If the user is shopping online 3 hours before the store closes (that’s when we would stop same day pickup promise to avoid risk of user coming to a store when it closes) till 12 am - we show the order/product is available for pickup tomorrow, 2 hours after the store opens. Ex.: If store opens at 10 am the message would say “Pick up tomorrow after 12 pm.”
Furthermore, all the messages shown are based on the store time zone. And for products that require assembly, we add 24 hours of assembly time into our calculation.
On the order confirmation page, after the user has completed their transaction, we change the pickup time estimation format to “Pick up on {Day}, {Month} {Date} after {Time}” (for ex.: Pick up on Monday, April 6 after 2:00 pm). This is beneficial because we’ve already done the calculation for the user and removed friction by providing the exact time and day the user can pickup their order.
Product Level and Order Level Message Logic
Lastly, we show both order level and product level messaging in checkout to ensure clarity throughout the user’s journey when items in the order had different estimate pickup times.
In the instance that the order has only one product or multiple products that are all available at the same time, product level message and order level message were the same. For example, if everything was available in 2 hours, we display "Pick up in 2 hours" for the product as well as the entire order.
In instances, an order has multiple products and delivery time varies, we would show “mixed message” quoting the soonest pickup time on order level, and relevant pickup times for every item on a product level. For example, if on a product level we are displaying "Pick up in 2 hours" for one item, and "Pick up in 1-3 days" for another item, on an order level user will see “Some items are available in 2 hours”.
Non-merch items like e-gift cards and membership share are excluded from pickup time calculation.
Our release
Set my store
Screen recording show how users would set their preferred store manually or by accepting geo-location.
2-hour message on product pages
Screen recording shows how 2-hour pickup message changes depending on user’s browsing time, store open hours, store time zone and product availability.
Estimate pickup time messages in checkout
Screen recording shows how 2-hour pickup message is carried over from PDP (product description page) throughout the checkout steps and appears on order level and on product only for eligible product types.
Order confirmation page.
Screenshot of an order confirmation page that users see once they complete a transaction.
Each merchandise product has a pickup estimation time.
If merchandise product is available for pickup in 2hours, we show precise pickup time and date in “Pick up on {Day}, {Month} {Date} after {Time}” format.
Pickup estimation time is hidden for non-merchandise items such as memberships and e-gift cards.
Results
Store pickup orders compared to the previous year
Since showing 2 hour pickup messaging, we’ve seen a 43% increase in store pickup orders share compared to the previous year.
Store pickup orders growth compared to the trend
We had expected a growth of 32% (from June to September). Our actual growth was 43% significantly exceeding our target and trend.
2 hour pickup message on the product detail page
Showing that a product can be picked up in 2 hours on the product detail page has resulted in a 4.31% increase in cart to detail rate, compared to when the message was hidden (cart-to-detail rate: The number of products added to a shopping cart per number of product-detail views).
When a product is available for pickup in 2 hours, the buy to detail rate is 14% higher, compared to when the message was hidden (buy-to-detail rate: How many products were purchased per number of product-detail views).
The average order value is 8.37% higher when a product has 2 hour pickup messaging, compared to when the message was hidden.
2 hour pickup message in checkout
We redesigned the delivery method selector component to call out the store pickup option in the checkout process. The design change resulted in a 50% increase in interactions.
Once we added the estimated pickup time to the component, we saw a 38% increase in interactions.