BOPUS (Buy Online Pick Up In Store) Solution Developed for Large Retailer

Woman in dress holding shopping bags and credit card for payment

Case Study: Digital Experience and Mobile

SITUATION & BUSINESS CHALLENGE

A large American retail and outdoor recreation services corporation was revamping its online purchasing experience to integrate the increasingly popular Buy Online, Pick Up in Store (BOPUS) function for customers. The complex project, whose importance and visibility grew alongside rising customer demand and sales projections, involved a cross-divisional effort of teams in digital, supply chain, retail, merchandising, sales and customer service, and IT application development.

However, as development teams worked to improve the cart and checkout experience, they ran into numerous technical challenges, including how to solve for customers’ mixed fulfillment orders, where one item in an order is shipped and another is picked up from a store. Additionally, the project’s focus grew far beyond BOPUS to include logistical elements, such as inventory issues and how to move items from one location to another.

Holistic backend architecture changes would be required to sufficiently address the technical issues, which was not an option on the table. Consequently, the project accumulated additional challenges:

  • Project teams instituted numerous crafty solutions and workarounds that involved multiple sources of truth, adding more complexity as the project evolved.
  • That logic bled to the front end, often resulting in the need to check multiple systems to ensure correct values, such as the status of an item in inventory.
  • Some scope creep occurred with designs being changed during the building of a solution.

Teams had been working arduously for nearly two years on the project that had now passed its original launch date, and organizational leaders felt increasing urgency to deliver the new functionality to customers. They turned to senior engineers from AIM Consulting’s Application Development and Digital Experience & Mobile practices for guidance and assistance.

SOLUTION

AIM solved the issues impeding the retailer’s progress with modern technologies that did not involve major architectural changes, pushing the project to completion in a matter of only four months.

AIM contributed to both major components of the BOPUS solution:

Shopping Cart

AIM rebuilt the site’s shopping cart using the JavaScript framework Vue.js along with Vuex as the data store implementation.  This improved data synchronization and helped to solve the issue of inaccurate inventory counts. AIM also helped to mitigate scope creep.

Checkout

With extensive knowledge of the website’s technology stack, AIM also helped to complete the checkout process. It was written in Riot.js, and although Riot is slower-performing than other frameworks, in the interest of time, it remained as the chosen framework. The core application was a separately hosted Spring Boot microsite, which fetches data and cashes it locally on end-user devices.

Additional Use Cases and Features

AIM is known for introducing innovative approaches and alternative ways of thinking to help solve for edge cases. AIM worked closely with leaders of the development effort and challenged certain decisions that had been made at the outset in order to determine opportunities for improvement. It was the fresh perspective brought by a consulting partner that helped drive the project to completion in a timely fashion.

AIM derived numerous edge cases that the development teams had not considered and if left untouched would have created confounding scenarios for customers during the checkout process. One such case involved a customer checking out while logged in to an account, and not wishing to use the email address associated with the account because the purchase was a surprise gift for a spouse who has access to the same email address. AIM worked closely with the client to find solutions for many such cases that had not been previously considered in the rush to complete the project.

AIM’s expertise helped to close the loopholes in the project, resulting in the launch of the new cart and checkout experience, with BOPUS and including the following additional functionality:

  • Support for multiple fulfillment types in a single order
  • Selecting ship or pick-up for an item as early as the product page
  • Ability to pick-up from multiple stores in one order
  • Improved use of screen real estate by optimizing the layout and interactions for a cleaner, simpler flow on smaller screens
  • Earlier visibility into product availability and estimated arrival dates for pick-up items
  • Seamless address management for shipping, billing, and membership

RESULTS

The new cart and checkout experiences with BOPUS functionality were released with resounding success and have earned glowing positive feedback from customers.

In the first week, more than 39,000 orders passed through the new cart and checkout systems without hiccups, vastly exceeding financial forecasts. More than 18,000 BOPUS items were ordered in its first two weeks, with 30% of orders coming from mobile devices. Some customers noted in feedback that their first BOPUS experience was so easy that they placed more orders the same day for additional BOPUS items.

Joining a long-running and overdue project, AIM drove excellence into software development processes and found the right answers to deliver new features in a timely manner. The solution continues to operate efficiently.