HubBox Widget UX Guidelines
Getting the user experience right at checkout is one of the most important factors in driving pickup adoption. A well-designed pickup experience does not just look good — it directly influences whether customers choose pickup over home delivery, and whether they come back to use it again.
This guide covers HubBox's recommended UX patterns across the full customer journey, from pre-checkout awareness through to post-order confirmation. Following these recommendations will help you maximize your pickup take rate, reduce cart abandonment, and deliver a seamless, branded experience for your customers.
HubBox provides high-fidelity UX mockups and consultancy as part of the onboarding process. Your HubBox Integrations team will work with your product and UX teams to iterate on designs specific to your checkout. Contact mailto:clientsupport@hubbox.com to request UX support.
Why the Pickup UX Matters
The pickup option is only as effective as the experience that surrounds it. Retailers who invest in a well-considered pickup UX consistently see stronger results across every key metric.
When you create a well-designed pickup experience, you benefit from:
- Increased customer satisfaction — a seamless, intuitive experience leads to happier customers, positive word-of-mouth, and improved brand loyalty.
- Competitive advantage — offering a better experience differentiates you from competitors who treat pickup as an afterthought.
- Operational efficiency — a fluid pickup experience reduces customer service workload and shipping costs related to missed or failed deliveries.
- Improved conversion rates — reducing friction throughout the pickup process leads to higher conversion rates and fewer cart abandonments.
- Higher pickup take rate — the percentage of total orders where a customer successfully chooses pickup is the core KPI for your HubBox integration. Every UX improvement directly impacts this number.
Retailers who optimize their checkout UX for pickup see reduced customer friction and a greater return on investment, ultimately increasing revenue and customer loyalty.
The Pickup User Journey
Understanding the full customer journey is the foundation of a good pickup UX. The journey consists of the following stages:
- Browsing and add to cart — customers browse the product detail page (PDP) or product listing page (PLP), select their desired products, and add them to their cart.
- Initiating checkout — customers proceed to checkout, where they are presented with their delivery options.
- Selection of pickup option — if customers select pickup, they are prompted to search for and select their preferred pickup location using the HubBox Widget.
- Provision of additional information — depending on your checkout requirements, customers may need to provide additional details such as personal information or contact details.
- Review and confirmation — customers review their order details, including their selected pickup location, before confirming their order.
- Order processing — the order is processed and customers receive updates on order status and readiness for collection.
- Customer pickup — customers visit the selected pickup location to retrieve their order, following provided instructions or signage.
By understanding each stage of this journey, you can identify where friction occurs and optimize accordingly.
The Three Core UX Components
The HubBox pickup experience is built around three distinct UI components. Each must be implemented thoughtfully to maximize adoption.
| Component | Description |
|---|---|
| 1. The Launch Experience | The UI components within your checkout that allow customers to discover and select the pickup option. This is where customers first encounter pickup as a delivery choice. |
| 2. The Widget | The interactive map and location search interface that allows customers to find and select a nearby pickup point. Powered by the HubBox Widget iframe. |
| 3. Post-Selection Confirmation | The in-checkout display that shows the customer's confirmed pickup location after they have made their selection, before they complete their order. |
The 5 Core Principles for High-Performance Pickup
While HubBox software is calibrated out-of-the-box to drive performance, the retailer's implementation strategy is the final variable in success. To maximize pickup volume, retailers should adhere to these five principles.
Deviating from these principles — particularly regarding pricing and placement — will directly impact the efficacy and ROI of your pickup integration.
1. High-Visibility Positioning
The pickup launch experience (where the customer first sees the option) must be prominent and impossible to miss.
- Prominent integration — whether the pickup option is embedded within the shipping list or presented earlier in the checkout, it must be highly visible and always paired with clear data on price, speed, and convenience. This positioning encourages direct comparison, highlighting pickup as the superior, more cost-effective choice and giving shoppers the confidence to switch from home delivery.
- Universal coverage — ensure the pickup option is available across all journeys, including guest checkouts, logged-in profiles, mobile apps, and one-click payment processors (such as Apple Pay or ShopPay), to maximize the number of customers who can select it.
2. Drive Awareness Up-Funnel
Pickup should be treated as a value-added feature, not a hidden setting. Actively marketing this option builds trust before the customer even reaches the checkout.
- Proactive signposting — use website banners and dedicated marketing emails to introduce the service.
- Funnel integration — the earlier a retailer mentions pickup in the shopping journey, the higher the conversion. Simple site-wide signposting and launch campaigns have been shown to meaningfully increase pickup adoption.
3. Strategic Pricing (The 1% Rule)
Price is the primary lever for behavior change. A customer will rarely pay a premium to collect their own parcel.
- Preferential pricing — pickup must be cheaper than, or at least equal to, the lowest home delivery rate.
- The risk — if a retailer offers an "economy" home delivery rate that is cheaper than pickup, pickup selection typically drops below 1%.
- Transparency — display the price advantage early and often. Dynamic savings copy showing the exact price difference is one of the most effective nudges available (e.g., "Save on shipping — Pickup Point: $2.99 vs. Home Delivery: $4.99").
4. Clear Value Proposition
Don't just offer a button — sell the benefit. Use concise micro-copy to explain the solution's advantages:
- Lower cost — "Save on shipping."
- Convenience — "Collect on your schedule."
- Proximity — "Thousands of locations near you."
5. Post-Purchase Continuity
The digital experience must transition seamlessly into the physical pickup. To drive repeat usage, the post-purchase flow must be flawless:
- Precise communications — notifications must explicitly name and map the selected pickup location.
- Real-time updates — provide proactive tracking and digital receipts that clearly explain the "what, where, and when" of the collection process.
Pre-Checkout: Building Awareness Before the Basket
Ensuring customers are aware of the pickup option before they reach checkout is one of the most impactful things you can do to drive adoption. Customers who already know pickup is available are far more likely to choose it at checkout.
Don't hide pickup away as a surprise at the end of the checkout journey. Educate customers early and often.
Recommended Pre-Checkout Touchpoints
Prominent display of the pickup option
The pickup option should be visible and accessible on all devices and platforms, particularly during the browsing and cart stages. Use clear labeling, relevant iconography, and banners to draw attention to the option.
Providing clear information
Offer detailed information about the pickup process, such as available pickup locations, estimated delivery times, and any related charges. Transparency helps customers make informed decisions and sets firm expectations before they reach checkout.
Location-based suggestions
Leveraging geolocation data to suggest nearby pickup locations enhances the experience through convenience, even before the customer has started checking out. If your platform supports it, consider surfacing a "pickup available near you" message on the PDP or cart page.
The Launch Experience: Presenting Pickup at Checkout
The Launch Experience is the most critical phase for driving pickup adoption. It is the moment at which customers decide whether to choose pickup or home delivery. Getting this right has a direct and measurable impact on your take rate.
Key Principles
Integrate seamlessly within the checkout flow
The pickup option should integrate naturally within your existing checkout flow. Avoid requiring customers to navigate to separate pages or perform additional steps to access pickup. Every extra click is an opportunity for drop-off.
Make pickup visible above the fold
Display pickup options prominently — ideally above the fold on both desktop and mobile — so customers see it without having to scroll. On mobile in particular, placement is critical.
Pickup should appear first in the delivery options list
Pickup should always be the first option in any shipping list to maximize visibility and drive performance. It is also typically easier to implement from a technical perspective.
Use clear, benefit-led language
Avoid jargon. Concisely explain why customers should choose pickup: it's cheaper, more secure, better for the environment, and guarantees delivery. Make these benefits stand out visually alongside the option itself.
Website Copy Recommendations
Visually highlight pickup — especially when it is the cheapest option
Use visual cues such as "Cheapest Option", "Free", or "Best Value" tags to draw attention to pickup. Changing customer behavior requires an incentive. Customers are disproportionately influenced by the cheapest or free shipping option, and pickup must speak to this directly. Highlighting pickup when it is the cheapest or free option is critical to nudging customers away from the default of home delivery.
Provide clear progression indicators
Give customers a clear sense of where they are in the checkout process and what happens next when they select pickup. Uncertainty causes abandonment.
Maintain consistency with your site's design
The Launch Experience should feel like a natural part of your checkout, not a third-party widget bolted on. Use your brand's colors, fonts, and design patterns. HubBox's Widget configuration allows full theming to match your brand identity.
Offer easy switching between delivery options
Customers should be able to switch between pickup and home delivery without disrupting their journey. Use clear toggle or radio button patterns that make the options equally accessible.
Launch Experience Design Patterns
HubBox supports several Launch Experience design patterns. The right choice depends on your checkout layout and platform:
- Toggle / stacked button pattern — for platforms like Shopify where a choice between "Home" and "Pickup" is presented earlier in the journey, stacked (vertical) buttons are recommended over side-by-side. Testing confirms that vertical stacking delivers stronger conversion rates regardless of which option is listed first.
- Radio button pattern — standard radio button selection within a shipping method list. Works well for checkouts that already use a shipping method step. Pickup should appear as the first item in the list.
- Shipping method integration — pickup presented as a named shipping method (e.g., "DPD Standard Pickup — £2.00") within the standard shipping method selection step.
Search and Selection: The Widget Experience
Once a customer selects the pickup option, they interact with the HubBox Widget to find and confirm their preferred pickup location. This step is crucial for ensuring convenience and meeting customer expectations.
Key Principles
Minimize the number of clicks to reach a location
The best implementations allow customers to reach their goal with the fewest clicks possible. Avoid hiding the Widget behind extra screens, dropdowns, or popups. The Widget should be immediately accessible when the customer selects pickup.
Provide clear and comprehensive pickup point information
Each pickup location card should display:
- Location name and full address
- Distance from the customer's location
- Opening hours
- Any relevant amenities or access information
This transparency ensures customers can make informed decisions and plan their collection.
Intuitive search functionality
Enable customers to search by address, city, postcode, or zip code. The search bar should be clearly labeled and easy to find. Support geolocation so customers can find nearby locations with a single tap.
Interactive map and list views
The HubBox Widget provides both an interactive map view (showing location pins) and a list view. Both should be accessible and easy to switch between. The map provides a visual overview; the list view is often preferred on mobile.
Clear confirmation and next steps
Upon selecting a pickup point, display a clear confirmation of the chosen location — including name, address, and opening hours — and make the next step in the checkout process obvious. Customers should never be left wondering what happens next.
Post-Selection Confirmation: Reassuring the Customer
After the customer has confirmed their pickup location, the Widget closes and the customer returns to the checkout. At this point, it is essential to display a clear confirmation of their chosen location within the checkout flow.
What to Display
The post-selection confirmation component should show:
- The name of the selected pickup location
- The full address
- Opening hours (or a link to view them)
- Distance from the customer's location (if available)
- A "Change location" link allowing the customer to reopen the Widget and select a different point
Key Technical Considerations
Billing address
When a customer selects a pickup point, the pickup location address is used as the shipping address. Because the shipping address is a pickup point rather than the customer's home address, the "Use shipping address as billing address" option must be removed or disabled. Billing address fields must be mandatory and collected separately.
Shipping rates
If specific shipping rates or options are available for pickup (e.g., a discounted or free pickup rate), these should be surfaced and selectable once the customer has confirmed their pickup location. Ensure your checkout logic applies the correct rate when a pickup point is confirmed.
Locking the shipping address
Once a pickup point is confirmed, the shipping address fields should be locked or hidden to prevent customers from accidentally editing the auto-populated pickup address. This is particularly important on platforms like Shopify where address fields are editable by default.
Implementation Best Practices
1. Create Visibility Before Checkout
Don't hide pickup away as a surprise at the end of the experience. Educate regular pickup users that you cater for them, and introduce new users to the option before they reach checkout. Here are three proven ways to achieve this:
Use banners to promote pickup availability
Homepage and top-strip banners are one of the most effective ways to drive awareness. Link banners to your shipping information page or a dedicated pickup landing page.
Create presence on the product page
Adding pickup messaging to the product detail page educates customers at the point of intent — before they have even added an item to their cart.
Include links in the footer
A dedicated pickup information page linked from your site footer provides a persistent, low-friction way for customers to learn about the service at any point in their journey.
2. Checkout Prominence
Display pickup options prominently during checkout. Include pickup options above the fold — the visible part of the page on load — especially on mobile devices.
Use clear language and avoid jargon. Concisely explain why your customers should use the service: cheaper, better for the environment, secure, guaranteed delivery.
Refer to the Launch Experience section above for detailed guidance on design patterns and placement.
3. Highlight Benefits Within the Delivery Method Selection
Clearly present pickup options alongside other delivery methods. Use clear language and avoid jargon. Concisely explain how pickup works and why customers should use it — cost savings, environmental benefits, enhanced security, and guaranteed delivery. Make these benefits stand out to help customers make an informed choice.
The three core value propositions to communicate are:
- Over 250,000+ convenient locations — customers can find a pickup point near home, work, or anywhere that suits them.
- Secure and guaranteed delivery — no more missed deliveries or parcels left on doorsteps.
- Up to 85% reduced carbon footprint — consolidated deliveries to pickup points significantly reduce last-mile emissions compared to individual home delivery attempts.
4. Pricing Incentives
Pricing is one of the most powerful levers for driving pickup adoption. The following strategies are recommended for optimal results:
- Cheaper than home delivery — this is the most effective strategy for driving adoption. Even a small price advantage over home delivery can meaningfully shift customer behavior.
- Same price as home delivery — while less effective than a discount, parity pricing can still encourage some customers to try pickup.
- Free pickup shipping — offering pickup as a free delivery option is highly effective, particularly for first-time users.
- Discount codes for pickup — targeted discount codes for customers who choose pickup can drive trial and repeat usage.
Post-Selection: Completing the Experience
After the customer has selected their preferred pickup point and confirmed their order, the experience does not end. A smooth post-order experience is essential for building confidence and encouraging repeat usage.
Key post-selection considerations include:
- Order confirmation and tracking — provide clear order confirmation including the selected pickup location name, address, and opening hours.
- Digital receipts and order history — ensure the pickup location is clearly displayed in order history and email receipts.
- Real-time order updates — notify customers when their order is dispatched and when it arrives at the pickup point and is ready for collection. See the Customer Notifications guide for detailed guidance.
- Feedback and ratings — consider collecting post-collection feedback to identify areas for improvement.
Additional considerations depending on your platform and customer base:
- Loyalty program integration — reward customers who choose pickup with loyalty points or benefits to encourage repeat usage.
- Order modification options — where possible, allow customers to change their pickup location after ordering if their circumstances change.
- Customizable notification preferences — allow customers to choose how they receive pickup notifications (email, SMS, push).
Measuring Success: The Pickup Adoption Funnel
Understanding where customers drop out of the pickup journey is essential for ongoing optimization. HubBox tracks pickup adoption through a four-stage funnel:
| Stage | What It Measures | How It's Calculated |
|---|---|---|
| Exposure Rate | Are customers being offered pickup? | Sessions with pickup option visible / Total checkout sessions |
| Engagement Rate | Are customers clicking to explore pickup? | Sessions with Widget opened / Sessions with pickup option visible |
| Discovery Rate | Can customers find a suitable location? | Sessions where a location is selected / Sessions with Widget opened |
| Confirmation Rate | Do customers confirm a location and complete their order? | Sessions with location confirmed / Sessions with Widget opened |
| Overall Take Rate | Core KPI: the ultimate success rate | Total orders completed with pickup / Total ecommerce orders |
Each stage of the funnel represents a potential point of friction. If your engagement rate is high but your confirmation rate is low, customers are opening the Widget but not finding a suitable location — which may indicate a coverage gap or a UX issue within the Widget itself. If your exposure rate is low, the pickup option may not be visible enough in your checkout.
Work with your HubBox Client Success Manager to review your funnel data and identify the highest-impact optimization opportunities.
FAQs
Should pickup be pre-selected by default?
Ideally, yes. Data shows that making pickup the default choice increases customer engagement significantly compared to defaulting to home delivery. While feasibility depends on where pickup sits within your specific user journey and platform constraints, pre-selection should be the starting point for optimization wherever it is technically achievable.
Should pickup appear first or last in the delivery options list?
Pickup should always appear first in any shipping list to maximize visibility and drive performance. Placing it first ensures it is seen before the customer's attention moves to other options, and it is typically easier to implement from a technical perspective as well.
Should I use a toggle, radio button, or shipping method pattern for the Launch Experience?
The right pattern depends on your checkout architecture:
- Stacked toggle pattern — recommended for platforms like Shopify where a choice between "Home" and "Pickup" is presented earlier in the journey. Vertical stacking is preferred over side-by-side, as testing confirms it delivers stronger conversion rates regardless of which option is listed first.
- Radio button pattern — works well within existing shipping method lists. Familiar to customers and easy to implement. Pickup should appear as the first item.
- Shipping method integration — best for checkouts that already have a dedicated shipping method step. Pickup appears as a named option (e.g., "DPD Standard Pickup — £2.00") alongside home delivery options.
HubBox can provide high-fidelity mockups for each pattern tailored to your specific checkout. Contact your HubBox Integrations Manager to request UX designs.
Should pickup be visually highlighted in the delivery options list?
Yes — especially when pickup is the cheapest or free option. Use visual tags such as "Cheapest Option", "Free", or "Best Value" to draw attention to pickup. Customers are disproportionately influenced by the cheapest or free shipping option, and pickup must speak to this directly. Highlighting the price advantage is one of the most effective nudges available for shifting customers away from the default of home delivery.
What messaging should I use to describe the pickup option?
Keep messaging short, benefit-led, and jargon-free. Focus on the three core value propositions:
- Convenience — "Collect from thousands of locations near you"
- Security — "Secure and guaranteed delivery — no missed parcels"
- Sustainability — "Up to 85% reduced carbon footprint"
Avoid technical language like "Access Point" or "Parcel Shop" unless your customers are already familiar with these terms. Use language that resonates with your specific customer demographic — for example, security messaging tends to resonate strongly with urban customers, while environmental messaging performs well with younger demographics.
All Widget text is fully configurable via your HubBox configuration. See the Widget Configuration guide for details.
How do I handle the billing address when a customer selects pickup?
When a customer selects a pickup point, the pickup location address is used as the shipping address. Because this is not the customer's home address, you must:
- Remove or disable the "Use shipping address as billing address" option.
- Make billing address fields mandatory and collect them separately.
- Ensure the pickup address is locked or read-only to prevent customers from accidentally editing it.
Failure to handle this correctly can result in orders being shipped to incorrect addresses or billing failures. Refer to your platform-specific integration guide for implementation details.
Where should the pickup option appear in the checkout flow?
The pickup option should appear as early as possible in the checkout flow — ideally at the delivery method selection step, before the customer has entered a shipping address. Presenting pickup early reduces friction and avoids the situation where a customer has already committed to entering a home address before discovering the pickup option.
On platforms where the shipping method is selected after the address, consider using the Launch Experience toggle pattern to present pickup and home delivery as equal choices at the top of the shipping step.
Can HubBox provide UX designs and mockups for our checkout?
Yes. HubBox provides high-fidelity UX mockups for the complete pickup experience specific to your checkout as part of the onboarding process. This covers the Launch Experience, Widget, and Post-Selection Confirmation components.
If you are an existing client and need UX recommendations or updated designs, contact mailto:clientsupport@hubbox.com. HubBox's UX team will work alongside your product and UX teams to iterate on designs. If you can provide existing checkout designs via Figma or a similar tool, this significantly reduces the time required to produce recommendations.