Nothing is more annoying than going through checkout on a site only to discover that free shipping is only available through a promo code or based on a minimum you didn’t meet. You ask yourself, “Why didn’t I see that when I came to the site? How did I miss this? Why wasn’t this made clear to me during checkout?” Good design and clear communication could have prevented your frustration, and it’s likely that knowing the free shipping threshold up front would have increased the size of your order.
We know the irritation. We’ve been through the struggle. We needed a solution! So we did what UXers do – we tested it!
Rosetta’s User Experience team conducted tests to identify the best placement for a “Free Shipping” banner on a home page. Seven sites were evaluated to compare placement of the banner, whether it was within the utility navigation menu or below the top navigation. Thirty users participated in two rounds of testing; both five-second tests and click tests were utilized for each of following sites:
- Abercrombie & Fitch
- The Limited
- J. Crew
- Vera Bradley
- Victoria’s Secret
For the five-second test, an image of the home page was displayed along with instructions for the user to pay close attention to the promotions on the page. The follow-up consisted of questions regarding what the user saw.
The results from this round of testing determined the following:
- More users were able to see “Free Shipping” promotions when placed just below the top nav toolbar.
- Users were drawn more to ads, which offered a visual separation from the rest of the page, much like those used by Justice and Abercrombie & Fitch. Banners were highlighted in a different color and/or text from the rest of the page and the “Free Shipping” message was the only content being advertised within that space.
To learn about the length of time users took to discover the “Free Shipping” banner, seven click test variations were prepared. Users were asked where they would go if they were shopping online and interested in free shipping.
Results from this round of testing identified some overlapping themes from the first round:
- Again, sites that housed their “Free Shipping” banner below the top nav were more attractive to users. Their average response rate was faster than those shown within the utility nav.
- Despite the placement of the banner below the top nav, other factors created a distraction for users generating a lag in response time:
- The Limited’s “Free Shipping” banner appeared in the top utility nav in small gray font. Since the message was housed directly next to a large brand logo, this banner was easily overshadowed.
- The Victoria’s Secret banner, though it was placed underneath the top nav, blended in with the home page and got lost. While the banner appeared in black text with a white background, all of the other promotions on the page were highlighted with a pink background and larger text.
Following these best practices should keep tempers cool and order sizes up:
1) Users naturally see what’s at their eye level and that’s not the utility nav. Introduce the free shipping promotion below the top nav and continue this experience throughout the site.
2) Automatically apply the free shipping promotion code, if applicable, to keep users from abandoning the checkout flow to look for a code – once they leave the checkout screen, they may not come back.
3) Don’t just assume users see the banner when entering the site. Go the extra mile to include enticing, targeted messaging near the total in the cart when the user is nearing the shipping threshold.
By making it easy for the user to understand how they can qualify for free shipping, you not only avoid annoying your customer, but you may just convert a few extra dollars on their sale.