B2B Lead Genereation

How we increased the add to cart rate by providing customers with relevant delivery information.

Table of Contents

The Problem

Customers were not getting any real information in regards to how they might receive the items that they purchased. They were forced to choose a delivery method but not told when they would receive it or how much it would cost.

Statistics in the e-commerce space:

  • 50% of online shoppers we surveyed in the US have abandoned orders solely because extra order costs were too high.

  • During desktop testing, 27% of the participants missed notices of “free shipping” in site-wide elements, such as in the header, in the footer, or as a banner.

  • 64% of participants begin thinking about shipping costs as early as the product page

The Solution

To enhance the micro experience of ways to get your order, we implemented a few design principles such as:

  • Progressive disclosure is needed to ensure we aren’t frontloading the experiences with controls they didn’t request.

  • Chunking and labelling to have clearly defined information blocks.

  • Priming customers with the estimated delivery date ensures they can get the product when they want or earlier.

  • Iconography helps with the ability to scan the page and identify the shipping information when a customer is looking for it.

  • Enable autofill so that if a customer enters a postal code, they can see the nearest store availability.

Results:

  • 48% up from last year in Same day and next-day delivery orders, with 5 months left in the year

  • 3.14% increase in product page conversion.

Develpoment Implentation

Due to limitations in development and requirements from the business, the original implementation had to shift slightly to meet the business’s needs.

Here are the changes that happened between the design proposal and the release:

  • Included radio buttons as the back end required this information to flow down through the journey.

  • Highlighting same-day delivery with a banner.

  • Leverage the input modal used in other places on the site.

  • Remove the return policy

  • Introduce a free shipping condition as they changed to a higher tier.

The Process

Product Discovery

Although this was a small ticket, the final solution required quite a bit of discovery. We first had to identify our delivery options and conditions before trying to figure out a solution.

Standard Delivery

  • $8 shipping fee

  • Free for orders over $29

  • Free for HBC Mastercard holders

  • 5-10 business day delivery

Express Delivery

  • $13.99 Delivery fee

  • 2-6 day delivery

Same Day/Next Day

  • SDD/NDD is available to those within 15 km of our distribution store, which has only 2 so far.

  • In the current journey, SDD/NDD is only for people who are logged in.

  • SDD/NDD only shows when you get to checkout, and sometimes in the cart.

  • SDD available from 12 am - 12 pm. NDD Available from 12 pm-12 am.

Pickup in store

  • Available to everyone, guests or logged-in customers.

  • Stock availability is dependent on the store, no cross-store shipping.

User Testing

We tested the designs with a general English-speaking group to gauge usability. Here are our key takeaways from testing:

  • Users were able to easily gather shipping and pickup information.

  • The information present was considered sufficient, as the cheapest and fastest options were enough to make a decision.

  • The general layout of the page is very overwhelming.

  • Testers found it weird that shipping and pick up were labelled, but not the section above.

  • A lot of feedback around other elements on the page.

Secondary Research

Within the e-commerce space, we are lucky that Baymard has a large-scale research repository that helps designers draw from real-life learnings.

From Baymard, we were able to gather this information:

  • How to Display ‘Free Shipping’ Tiers

  • Display or Link to the Return Policy from the Main Product Page Content

  • Place “Free Shipping” Information In or Near the “Buy” Section

  • Include “Find in Store” Information Near the “Buy” Section

  • Provide an Estimated Delivery Date or Range Near the “Buy” Section

Final Thoughts

The solution itself was not difficult to get to; the hardest part was the growing processes in a growing design organisation. At The Bay, every ticket needed to go through multiple rounds of senior leadership approval and getting time in their calendars was difficult. Although many changes were added, the final product is something I was confident would help our customers build confidence in information gathering when looking to make a purchase.