Adding a local pickup option to WooCommerce
Product: WooCommerce
Role: Product Designer
Problem Summary
How might we improve the checkout experience in the Checkout Block to differentiate local pickup as an alternative shipping option and provide a seamless process for customers to select and collect their orders in person?
Project Objective
Order pickup requests have increased to 57% since the pandemic, and this is a behaviour that is predicted to stay. In the US, Adobe Analytics reported:
“…buy-online-pickup-in-store (or curbside) options continued to see traction, growing 67 percent YoY (Feb 2021). In an Adobe survey of over 1,000 U.S. consumers, 30 percent of online consumers prefer curbside/in-store pickup over standard delivery options.”
In the existing local pickup checkout experience, we require the customer to provide a shipping address even when local pick-up is selected. This can be a confusing step and could deter a potential sale.
I documented both the customer experience and the merchant experience flows, with the aim of prioritising improvements to the customer experience. However, enhancing the customer experience will necessitate improvements to the merchant setup and maintenance experience.
We had already updated the cart and checkout process by creating a no-code block that enabled customization of styles and elements. This would be an ideal starting point to enhance shipping options, particularly the local pickup option.
How might we simplify the local pickup configuration process for merchants to enhance their checkout experience and increase the likelihood of customers selecting this option?
Enhance the checkout process for local pickup, and provide merchants with improved tools to manage local pickup orders.
Customer experience UX audit
Issues with the customer experience
The customer is required to provide their shipping address even if they opt for local pickup. However, the location of the pickup point is unclear, causing some merchants to resort to providing post-purchase instructions via email.
In addition, there is no information provided about the expected pickup timeline, and the UI still displays a message about shipping to the inputted address during checkout, even when local pickup is selected.
After purchase, the order confirmation does not include any information about the pickup location, timelines, or next steps. Presumably, merchants now message their customers directly with these details.
Furthermore, there is no follow-up email sent to the customer when the pickup is ready, nor is there a confirmation email sent once the customer has collected their order. None of these indicators are defined in the My Account > Orders section.
Merchant experience UX audit
I broke the merchant flows into two tasks:
setting up local pickup in the checkout
and managing orders in their store.
Issues with the merchant experience
It was unclear where in the admin to add a local pickup option. I will note they could find it in the support documentation, but there could be more clarity on the setup process and what their customers should expect to see on the front-end.
There was no way to input the local pickup address to be displayed to the customer.
There was no way to input/manage multiple local pickup addresses. ie. if one becomes unavailable, having the ability to temporarily disable it as an option at checkout.
Local pickup orders weren’t visually indicated in contrast to shipped orders in their order list, and there is no clear way to record the order has been picked up.
No way to customise the post-purchase communications experience. Either by email as the default choice or even an SMS option.
Order confirmation
Pickup ready
Pickup completed
The “new order” email from the system the merchant receives doesn’t highlight it as a local pickup option.
When it comes to setting up their store, some merchants may have a clear intention to offer local pickup while others may not be aware of the option. Here are some of the considerations merchants may be thinking about:
The onboarding process for shipping doesn't mention local pickup, so how can I be sure it's available?
How do I manage orders for local pickup?
Why does the checkout block display a different amount for local pickup than the one I selected? Why aren't my settings being reflected?
Why do I need to select a shipping zone for local pickup before anything else?
How can I update the order status to indicate when an item is ready for pickup or has already been picked up?
Defining opportunities
Merchant opportunities
Shopper opportunities
Updating the design
I partnered with a designer who had prior experience working with WooCommerce admin and shipping configuration to have a design jam focused on generating ideas and exploring the customer journey. Together, we examined various aspects of the user journey, starting from the merchants' store setup and admin settings, to the WooCommerce checkout block configuration, and the shopper's experience on the front end.
During our design jam, we identified some of the following opportunities to improve the local pickup experience for store owners/merchants:
Present a clear value proposition for WooCommerce blocks to merchants who are setting up their store for the first time.
Include a clear next step after completing a shipping task.
Consider providing local pickup options for larger stores with multiple locations.
Create an email template for local pickup that can be edited and provide customised information for each location.
Provide clearer statuses in the order dashboard for different types of shipping including local pickup.
Present local pickup as its own option, separate from shipping zones.
We also identified a few opportunities to improve a few pain points in the shopper experience:
Store locator search for local pickup.
Provide accurate pickup information to help inform the decision at checkout – date available, address, opening hours.
Trigger clear communication via emails post-order through to pickup.
Upon identifying opportunities, I decided to prioritise the following actions as the next steps for enhancing the checkout block configuration and front-end design:
Improving the checkout UI so customers don’t need to input a shipping address first. This can reduce friction in the checkout process. We could also look into using geolocation to suggest pickup locations based on the user's location.
Displaying a clear location for pickup. This is essential to ensure that customers can easily find the pickup location. We should display the pickup location on the checkout page, as well as in the order confirmation email.
Displaying a clear time estimate for pickup (or messaging that indicates they will be contacted when the order is ready). This is crucial to managing customer expectations and avoiding frustration. We can display the estimated pickup time on the checkout page, as well as in the order confirmation email. Additionally, we should send a follow-up email when the order is ready for pickup.
Suggest improvement(s) to enable the merchant to easily set up the pickup address in their store settings.
Beyond scope for this project, but I made note of where we could improve clarity in post-order email communications.
For the local pickup experience to effectively address the problems, a comprehensive solution is required. The foundation of this solution lies in configuring the core settings. Without these modifications, any adjustments we make to the block editor component would be superficial and not aligned with the functioning of other sections of the store.
