A year has passed since the start of the pandemic—a tough year for sure, and it cast a shadow over everyone. Throughout the year, we had to think faster and more creatively than ever before to stop the bleeding and to overcome all the adversities we faced. By the end of 2020, we’d developed so many bright solutions, both brand new ideas and ones that we already had but that hadn’t disrupted the market enough before. As we’re now beginning to prepare for the post-pandemic world, some of these ideas have become the new norm, setting trends in their respective fields. One of these ideas is BOPIS: Buy Online, Pickup In-Store.

The idea behind BOPIS has been around for a very long time, although it was limited to top-notch retailers. By the end of March 2020, the US had reported around 120,000 confirmed COVID-19 cases, which was the most of any country at the time, and in the absence of a federal government-level order, this number was expected to rise. States and corporations started to take matters into their own hands, imposing state-level lockdowns and new remote work policies. One of the steps that many click-and-mortar retailers took was shifting their delivery models to incorporate BOPIS. At first, they simply wanted a way to limit human interaction in physical stores (ex: curbside pickup) and to find a better way to ship products across states. However, later that year, many of these retailers found out that they’ve hit a jackpot by implementing BOPIS.

What is BOPIS & How does it Function?

BOPIS is short for “Buy Online, Pick In-Store.” This delivery business model allows shoppers to buy their items online but pick them up from nearby physical stores. The main advantage of this model is that it allows vendors to blend the customer’s online experience with the traditional physical one. There are multiple models for BOPIS, such as:

• Store Pickup
• Curbside Pickup
• Reserve Online, Pick in Store
• Buy Online, Return in Store

Now, after more than a year since March 2020, more and more retailers are making the shift towards BOPIS, and it’s now very clear to any business analyst that BOPIS is here to stay. 90% of US retailers intend to implement BOPIS by the end of 2021¹.

The Science Behind BOPIS: Why did BOPIS prove so efficient?

BOPIS presents retailers with a chance to build and maintain a win-win relationship with their own customers—when it’s done right. The key to the success of any BOPIS implementation is achieving mutual benefit for the retailer and the shoppers alike.

• The shoppers’ advantage:

As per Business Insider, 70% of Americans have placed more than one BOPIS order during the last two years². This number is predicted to rise in the upcoming years. In 2019 (pre-pandemic), BOPIS order numbers saw a slight increase of 37%. However, in 2020, BOPIS boomed, with a shocking 500% increase from the year before, especially within locked-down states³.

Why do shoppers prefer BOPIS?

A few months ago, I was reading a report published by Salesforce on their 360 blog, titled “Millennials, Gen Z, Boomers, and Beyond: How Each Generation Shops Differently.”⁴ The report demonstrates the difference in shopping patterns among 3 different generations. One of the findings caught my eye because it was quite astonishing: based on their surveys, all three generations prefer to shop in physical stores rather than online. Therefore, Salesforce advises retailers to empower their physical presence. Based on the report, customers prefer the physical experience for three main reasons:

• Customers can preview the products before actually making the purchase;
• Customers can easily return the items if they’re not satisfied;
• Customers don’t have to deal with high shipping fees and long shipping intervals.

Given this info, I believe now you can see why blending the online experience with physical presence makes sense for the shoppers, right?

• The retailer’s advantage:

The number of retailers implementing BOPIS is increasing rapidly. For instance, a few months ago, Walgreens, with the support of Narvar Inc, launched a package pick-up and returns service at more than 8,000 of their locations ⁵.

Why do retailers shift to BOPIS? Largely because surveys and reports are showing promising results for merchants who successfully implement the service. 49% of BOPIS customers have bought extra items when they went to pick up their online orders ⁶.

Another big advantage with BOPIS is eliminating last-mile delivery costs. The highest shipping fees are usually paid at the last leg of the shipping journey, from the transportation hub to the final destination. Replacing the shoppers’ addresses with the vendor’s physical stores’ addresses can significantly cut shipping charges.

For a long time, fully online companies like Amazon and AliExpress have had an edge over click-and-mortar companies. However, the special blend that BOPIS offers to the latter presents these vendors with a unique chance to provide their customers with a service that fully online companies can’t match.

Planning for BOPIS: The Basic Flow

• Store selector banner at the header of the site
• Store selector modal
• Delivery option in Quick Views and PDPs
• Splitting up the cart page
• BOPIS shipping indicators in each checkout step

Basic Requirements for a Successful Delivery:

BOPIS, as I’ve mentioned before, presents merchants with a unique edge over their competitors if implemented properly. However, one of the disadvantages that can arise is that it pushes customers away if implemented poorly. Therefore, the quality of the technical implementation may decide the success or the failure of the project, and it can significantly affect the business aspect of your brand. From my own experience in such projects, there are multiple basic requirements that you need to provide for your engineering team to ensure a perfect delivery of the feature.

1. Solid online experience with a mobile-first vision:

   What shoppers like and dislike when shopping online is not that different than their preferences when shopping in physical stores⁷. This is something that needs to be taken into consideration when implementing BOPIS. Most shoppers prefer self-service when shopping in physical stores. Therefore, BOPIS presents the perfect experience for most users. However, the application or the storefront should provide an easy to use layout and an easy checkout process, with clear instructions and very obvious CTAs. We want the user to finish their order easily, without needing extra help, and we certainly don’t want to push the user away from the site.

   Small but important details must be taken care of to provide an exceptional online experience for your shoppers. For example, page load speed, single-page checkout and harnessing the power of magical moments are all vital to ensure a successful and impactful BOPIS implementation.

   Moreover, you need to ensure your brand provides a solid smartphone experience. Based on a Salesforce report, smartphones account for 92% of the growth in digital commerce⁸. People like to shop using mobile devices, so any BOPIS implementation should come with a smooth mobile experience. Of course, this in no way means we should ignore the desktop experience.

2. Real-time inventory check capabilities:

   You know what’s more frustrating than finding your item out of stock in your selected store? It’s when the site tells you the item is in-stock and allows you to add it to the cart, only to find out that the item is actually out of stock when you try to place the order. If your site creates these experiences, it might cost you a loyal customer. Studies show that around 73% of shoppers would abandon a brand after three or fewer negative experiences⁹. To avoid such backlash, you need to equip your site with real-time inventory check functionality.

3. Real-time delivery availability services:

   I’ve worked on multiple BOPIS implementations in the past two years. One of the major issues my clients usually ran into was late deliveries. For example, a user goes into the site and orders a specific item to be delivered to a specific store. Based on our delivery date service, we display the expected delivery time. The customer goes to the store at that specific time, only to find out that the delivery time was not met.

   

   Such scenarios should definitely be considered critical to avoid. The site should implement a very accurate real-time delivery time check service that takes into account national (state and federal) holidays, store opening hours and closing hours on each day, lead time needed to prepare orders, when the store is busiest, etc.

4. Lead time for large orders:

   One of the clients I worked for needed a huge lead time (up to 48 hours) to prepare big orders. We had to implement a logic that would modify the Check Delivery Availability’s service response to take this lead time into consideration, so we never would end up over-promising.

5. Reliable store selector experience

   Some shoppers might not pay attention to your store locator’s CTAs. So, the site should provide an accurate and automatic store selection mechanism based on the nearest geolocation. Accuracy is key here. I remember one of my clients opening a bug report with our dev team because one tester was trying out the feature while driving his car between two of the physical stores in that area, and the tester was slightly closer to store A by a mile or two, but the geolocation service we had kept selecting store B. Never settle for less than perfect, even if it’s only a few miles.

Let’s talk technical: Behind the scenes:

Implementing an accurate store locator:

As I’ve discussed before, each storefront should implement an accurate store locator. The main objective here is to proactively choose the physical store nearest the customer. If your store locator is not accurate enough, it might be better to leave the store unselected so the user can choose it themselves. Not having the feature is better than having an inaccurate one. However, if this is the case, you might need to spend some time to make your store locator CTAs standout, to ensure that users don’t miss them when using the site.

To implement an accurate store locator, you’ll need to rely primarily on frontend geolocation services, like Google’s Geolocation API. These services provide higher accuracy than their backend counterparts. However, if the user has declined to grant location permissions, we can fallback to using the backend ones.

CDAs and OMS calls:

I’ve talked about how frustrating it is for a customer when the storefront displays an out of sync inventory status on the PLP, PDP and throughout the checkout process, and then makes a final real-time inventory call at the time of order placement. I’m bringing this up because businesses always try to work around service fees by trying to limit the number of OMS calls. To be fair, limiting the number of service calls is essential, and I’ll discuss that later on. However, from my own experience, investing in this part of the storefront always bears fruit in the long run, as it increases customer satisfaction and allows for more flexibility in other projects that need real-time OMS calls.

How to handle multiple deliveries in the cart:

After implementing BOPIS, you’ll open up the possibility for shoppers to select multiple delivery methods for their orders. That possibility introduces new technical challenges across your whole platform. Let’s think about it for a moment: what would be the best way to display a mixed cart? How can you handle multiple delivery methods in one cart, and how are you going to communicate that with your OMS system?

In the BOPIS projects I’ve been involved in, one thing all UI/UX consultants seem to agree on for the frontend is the need to split the cart into multiple sections based on the items’ shipping methods.

As for splitting the order in the backend, here’s where it gets tricky:

• Multi-shipment orders:

  All major digital commerce platforms (like SFCC or HCL Commerce) provide the functionality to split orders into multiple shipments out of the box. This feature can be leveraged to handle multiple delivery methods within a single cart. Each shipment line item would be treated separately from the others (calculation and delivery-wise). However, some old legacy OMSs might not support this feature.

• Splitting items into multiple orders:

  A tech lead who’s a friend of mine once mentioned that a client of his requested the ability to split shipments into different orders altogether. The plan here was to hold a flag on BOPIS items, and once the order is placed, it gets split into two. This approach introduced so many challenges in capturing payments, calculating taxes and promotions, deciding the eligibility of certain gifts and payment methods, etc.

• Not splitting the order at all:

  Keep the order as-is, but use certain flags to identify each item’s delivery method. This is the most straightforward solution, and it’s totally supported by all modern and legacy OMSs. However, because of its nature, the performance (processing time) might suffer a bit, as we will have to loop over all items to identify the delivery method for each item. It also doesn’t offer the flexibility needed if we need to leverage shipment splitting in other parts of the storefront.

Choosing the right approach is a decision that shouldn’t be taken lightly. There are a lot of moving parts that need to be considered before committing to an approach. For example, if your OMS doesn’t support handling multiple shipments, that’s a deal breaker if you’re considering the first approach.

From my experience, the first approach is the optimal one, if it’s supported by your OMS, as it offers high flexibility for handling shipments and price/tax/promotion calculations. However, if this functionality is not supported by the OMS, you’ll either have to follow another approach or update your OMS. The second-best approach is keeping the order as-is. However, we might need to do simple tweaks to our OMS scripts, so the OMS can own the heavy lifting in processing these orders.

The second approach is not recommended at all because it limits flexibility, requires a complex implementation process and is highly error-prone.

Everything Ajax with fewer controllers:

We’re not living in the 90s anymore! Refreshing the whole page is not the expected behavior and is highly frowned upon. This UX also neglects the mobile-first approach we’ve talked about earlier. Therefore, we need to leverage AJAX calls across all aspects of the site.

Rearranging shipments at the start of the checkout:

The basket, with its nature as the order sandbox, can become somewhat error prone. I’ve noticed that when customers keep changing the delivery methods for items in the cart, some of the items get out of sync. This didn’t just happen with one implementation—it’s a pattern I detected over the multiple projects I was involved in. This issue is hard to track because of its sporadic nature, but it can possibly have a huge negative impact on the shopping experience. For example, some shipments might be shipped to different locations.

To fix such an issue, we need to implement some sort of functionality at the beginning of the checkout process that checks for errors and anomalies in the order and the selected delivery methods. Then it needs to rearrange shipments if an error was detected.

Disable changing delivery methods in Checkout:

To add to the previous point, the checkout process should be the source of truth. Therefore, I don’t recommend allowing the shoppers to change the delivery methods within the checkout process.

Limit the number of calls you make to services:

By making service calls, you’re most likely trying to fetch or post data to a third-party service. Each request would cost you a bit (fees, bandwidth, etc.). Therefore, limiting the number of calls is extremely important when implementing any service. You need to keep in mind that some service calls shouldn’t be limited because they provide vital data to shoppers (ex: CDAs). Try to limit your service calls by implementing circuit limiters, caching, or optimizing the code efficiency, but always keep the business requirements at the back of your mind while doing so.

Good luck, and enjoy implementing BOPIS. :)

References: