12 Key eCommerce UX Guidelines for Black Friday & Cyber Monday 2022

For eCommerce businesses, Black Friday and Cyber Monday (BFCM) are two of the highest revenue-generating days of the year. And the 2022 holiday shopping season is expected to be even larger for eCommerce brands than in the past few years.

Key Takeaway:

BFCM and the holidays present an ample opportunity for your eCommerce brand – your brand could generate millions in revenue. You also have the chance to turn seasonal shoppers looking for Black Friday deals into long-time, repeat customers.

If you want to make the most of the upcoming holiday season, start preparing months in advance. Run performance tests on core web functionalities to ensure your site can handle an influx of visitors. In addition, UX optimization strategies, such as simplifying your checkout process and including a clear product navigation hierarchy, will boost conversion rates.

Black Friday & Cyber Monday Sales 2022: The Opportunity

This year, Black Friday weekend starts on Friday, November 25th. But eCommerce businesses should be prepared weeks before Black Friday sales begin.

According to Adobe, consumers spent over 10 billion on Cyber Monday and 8.9 billion on Black Friday 2021. 

But the United States is only one of many countries to now participate in the sales. Consumers worldwide are taking advantage of the discounts and promotions BFCM offers. 15% of orders from Shopify merchants were cross-border during cyber week 2021 – a trend that will likely continue growing.

And with CACs up across all eCommerce industries, BFCM may be an opportunity to acquire new customers for less, and even strengthen your customer loyalty.

The Impact of a Fast, Responsive Site

Online shoppers will bounce from a slow-loading website within 10 seconds. Moreover, they’ll be less likely to return to your website again.  

Website speeds are synonymous with security and good user experience. A fast website will earn you more revenue. A slow website costs your brand consumer trust, and more than one potential customer.

According to Portent, B2C websites in 2022 that load in just one second have a 2.5x higher conversion rate than a site that loads in 5 seconds. 

eCommerce brands can expect almost double the amount of inbound traffic during BFCM. So, making sure that your website can not only handle the tremendous influx of visitors but that each visitor’s experience is excellent, is crucial.

How to Conduct a Successful Website Audit 

Months before November (ideally sometime in the summer), run performance tests, analyze the results, and then try to solve any problems you find. As we just mentioned, you’ll want to allocate enough time to run multiple tests throughout the process to ensure that your speed is improving. You also need enough time to fix the problems impacting your site speed the most.

It’s highly likely, however, that you may find more problems than you have time to solve – as finding a balance with technical debt is often a constant.

Instead, invest most of your time into the most important functionalities of your site, like checkout pages and shopping cart pages.

Leveraging Google Analytics to understand where your most essential functionalities are can be helpful if you need help figuring out where to start.

Other ways you can improve your site speed include: 

  • Code splitting: Helps a page load only what’s necessary. Instead of having all of your website load at once, split your pages and code into more than one piece. That way, only what is needed for a specific page is loaded first.  

  • Responsive image: Let a user’s browser choose the images it needs to load based on their screen size.

  • Prioritizing mobile: Try writing your code for mobile before desktop for better efficiency of time – and to ensure you have a great mobile site.

Benefits of a Holiday Code Freeze: What Is a Code Freeze? Why Should You Consider It?

A code freeze is a period of time when there are no changes to your website’s backend. Many eCommerce brands choose to implement a code freeze during the holiday season. A code freeze helps guarantee that changes or insertions on the backend won’t interfere with sales during a high-volume time. 

Code freezes can benefit your holiday sales by giving your brand: 

  • The opportunity to collect qualitative data on your customers

  • The chance to reduce tech debt and optimize site speed

12 High-Priority UX Optimization Practices to Increase Conversions During the Holidays

For higher conversion rates during the holiday shopping season, aim to optimize your UX near the top and bottom of your website funnel. Consider your checkout process UX, your shopping cart UX, as well as how effectively a user can navigate through your product catalogs.

Here’s exactly how to optimize your website for UX on Black Friday and Cyber Monday.

Help Users Navigate Through Your Product Catalog

How do potential customers currently find products on your website? 

Clearly labeling your product categories and including them on the top-level navigation bar of your website is often the best way to help users begin their shopping journey. 

Moreover, carrying your main navigation bar from one page to the next provides an anchor to users as they browse through your website and move away from the homepage. 

Below is an image of a product detail page from the outdoor apparel brand and Anatta partner, Stio. Even when users have moved away from Stio’s homepage, they can still jump quickly between Stio’s five product catalogs. All they need to do is hover over the product category, and the main drop-down menu is accessible.

UX research organization, the Baymard Institute, has found that: “The inconsistency of only having the drop-down menu accessible at some pages confuses users and renders them unable to accurately switch scopes.”

Designing your product navigation UX like Stio’s allows users to seamlessly move from product page to product page as they add items to their cart or narrow their purchase decision. 

The easier it is for users to explore your available products, the more likely they’ll find the product they’re looking for. And the more likely they will add that product to their cart.

Stio’s main product categories are always just a click away. 

What Kind of Content Should Your PDPs Include?  

Once a user lands on your PDPs, they need two key pieces of information to convert. 

First, your product descriptions should be easy to read. 

Large blocks of text with no whitespace in between them will look more intimidating to a user, so they’ll read your content less often. When that happens, a user misses out on essential product information that may have helped encourage them to buy.

According to the Nielsen Norman Group, only around 16% of users will read website content word-for-word, with the vast majority opting to scan content instead.

With this in mind, break up your product description copy into bullet points that can be scanned, and only include the most relevant information about the product. 

The Strong Greens PDP from Bare Performance Nutrition shown below highlights top product features using short sentences and interesting icons. A user can efficiently read through the copy and come away knowing the most important benefits Strong Greens powder provides.

Relevant product images or videos are the second most important types of content to include on your PDPs. 

Providing users with an online shopping experience similar to shopping at retail stores is one of the biggest challenges an eCommerce business faces.

Pictured below on Mack Weldon’s PDP for its Atlas Jogger pants, a user can see the product from multiple angles and what it looks like when worn. An eCommerce brand is limited in how much it can replicate an in-store experience on an online store. But including various high-quality images helps users contextualize the product in their lives. 

The right product images will lead to more conversions, and even reduce the number of item returns requested. Because even with clear product descriptions, a user can gain a better sense of your product when they see it in use. This is especially true for apparel items, cookware, or furniture. 

In fact, according to research from Invesp, product pages that include video content convert up to 80% better than pages without video content.

Users can quickly view multiple angles of Mack Weldon’s Atlas Joggers. 

Additional PDP Content Tips: 

  • Include product videos in your image gallery: Try to include product videos inside your product’s image gallery. Placing a product video below the fold lowers the chance a user will actually see your videos. 

  • Include a variety of angles: Creating a 360 view of your product through images helps showcase the product benefits you talk about in your product descriptions. 

Ways to Enhance the Convenience of Your Add-to-Cart UX

During a user’s purchasing journey, a user may get interrupted by things happening in their day-to-day. This can mean a user accidentally bouncing from your site with items in their cart, or users losing track of the product pages they’ve visited. 

Adding a “Save for Later” option to your cart interface will help users pick up where they left off. 

Additionally, including a “Recently Viewed” section on your shopping cart will allow users to quickly add an item to their cart that they may have mistakenly thought was already added. The image below shows this feature in action on the eyewear brand, Roka’s website.

Additional Shopping Cart UX Tips: 

  • Always show full cost before checkout (shipping cost included): When a user has added your products to their cart, be sure that the total price is displayed before the user reaches the checkout page. The price shown on your PDP may not be an objection to users. But if multiple add-ons, like shipping costs, only show up at the very end, you risk losing users right before they convert. It’s also wise to feature sale prices as the final cost.

  • Cross-sells should be relevant: According to the Baymard Institute: “Cross-selling during checkout can enhance users’ shopping experience, as long as the product suggestions and offers are relevant and don’t get in the way of users completing their purchase.” A cross-sell section in your shopping cart UI, such as “You may also like,” is a better option than a non-personalized cross-sell. 

  • Consider sending abandoned cart emails: Abandoned cart emails have historically high open rates.

Why You Should Implement Clear Shipping Timelines 

During the holiday shopping season, consumers expect fast delivery of their orders. Therefore, you should always provide precise shipping estimates so users can plan accordingly. But make sure to show when their order will arrive before the last minute. 

Let a user know upfront what date they can expect to receive their package, and they’ll be more likely to actually make the purchase. The best way to do this is to include delivery estimates on your PDPs. 

Additional Shipping Timeline UX Tips:

  • Consider offering both status trackers and progress updates: Some users may prefer to receive SMS notifications about their order over checking their email or visiting a progress update page. And vice-versa. 

  • Clear progress updates: When providing updates to users via text or on an order progress page, your microcopy should be clear from jargon. Avoid using terms such as “fulfilled” and prioritize a clear delivery timeline with dates instead. If shipping delays occur, communicate with your customers quickly.

3 Elements of an Effective Checkout Process UX

In 2022, the average cart abandonment rate is 69.99%, according to the Baymard Institute. A brand’s checkout process UX may be a contributing factor. The same research indicates that 1 out of 5 users abandon their cart due to an overly complicated checkout process. Here are a few best practices to make your checkout experience more seamless. 

1. Reduce the number of form fields 

Try reducing the amount of information a user needs to enter while checking out. For example, allow users to check a box that indicates their billing address is the same as their shipping address. This change may seem like a small addition, but in reality, it can reduce the amount of friction between a customer and that last “Place Order” click.

2. Allow for Guest Checkout 

If a user is forced to create an account during checkout, a user is more likely to abandon. Therefore, always allow a user to choose “Guest Checkout” when they don’t want to go through the steps of creating an account.

This is especially important since you’ll have more first-time customers and visitors during the holiday season. Ensuring new users can easily place their orders without the additional inconvenience of account creation is critical.

3. Offer Third-Party Payment Options

Offering third-party payment options at checkout, like Amazon Pay, PayPal, or Shop Pay, allow users to make their purchases more quickly. These applications store a user’s credit card information for seamless use across multiple online retailers. 

Additionally, offering users the option to use a “Buy Now Pay Later” payment method like AfterPay or Klarna help users break down higher price tags into smaller, more manageable monthly payments. If a user might have objections to your product’s price, allowing them to pay for the item over the course of a few months may be just what a user needs to purchase.

In 2021, 91% of merchants saw revenue, average order value, or conversion rate boosts after offering BNPL options. Providing BNPL options during Black Friday and Cyber Monday will likely encourage more users to participate in the upcoming sales.

The option to use AfterPay allows customers to break down an $89+ shoe order from Cariuma into four payments of $22.45.

Gifting Features that Help Users Get into the Holiday Spirit 

Throughout the holidays, many users will be looking for the option to send a product as a gift. The option to pay for an item to be gift-wrapped, or to include a personalized message, can encourage holiday shoppers to visit your site again in the future. 

When designing your gifting UX, try to: 

  • Make it clear what gift options are available before a user is checking out.  

  • Allow users to send the gift item to either the recipient’s address or their own. 

  • Distinguish items added to their cart from gift items and non-gift items 

Create Pathways to Products Featured in Bespoke Imagery

Featuring your products in inspirational imagery on your website is a great way to capture a user’s attention. But the products you showcase in your imagery should be easy to find. Including direct links to products displayed in inspo imagery allows customers to seamlessly find a product that may have caught their interest. 

Professional bespoke imagery is powerful for an eCommerce brand. They encourage a user to imagine a product in their homes, or how the image could benefit their life. Not including quick pathways to showcased products hampers their full potential – and your brand loses sales. 

Society Social has included an adjacent product list with items featured in the main image. Finding the pictured product is just a few clicks away.

Shipping and Returns: Provide Useful Information to Transform an Inconvenience into a Smooth Experience

According to data from the National Retail Federation and Appriss Retail, online purchases had an average return rate of 20.8% in 2021. While brands may be unable to stop returns altogether, making the process seamless when returns do happen helps retain consumer trust.

How can eCommerce brands accomplish hassle-free returns? By first making shipping and return information easy to locate on their website. Some users will look for return and shipping links on a brand’s product details page. But many users will scroll to the footer of a brand’s website for the links. 

Either way, provide multiple paths to your brand’s shipping and return policy information, and you’ll help build a user’s confidence in your customer service.

Don’t Neglect Mobile: 3 Key Mobile UX Best Practices

During last year’s Black Friday sales, almost 43% of all orders were placed on mobile devices. Therefore, your mobile UX needs to offer the same quality experience as your desktop UX. 

These last three optimization tips from us are focused on mobile UX. 

Place Product Information Where Users are Scrolling  

On mobile especially, placing product information where users are actually scrolling is crucial for increasing add-to-cart KPIs. For example, utilizing clickable, expandable tabs that reveal more information can help keep a user’s screen clean and easy to read. 

However, these expandable tabs should be aligned vertically on a page instead of horizontally. When users are scrolling up and down on a brand’s PDPs, they’re more likely to miss information that’s not directly in their field of view.

Mobile users may miss the horizontally aligned “How To Use” and “Ingredients” tabs of this PDP.

Additional Tips on Placing Product Information for Mobile Users: 

  • Try to prioritize placing content above the fold. While it’s a common myth that users don’t scroll below the fold (they do), placing your most engaging, essential information above the fold helps encourage a user to scroll down. 

  • Be sure to include generous white space on your PDPs. Text and copy with space between sentences, or broken up with bullet points is much easier to read on mobile devices.

Design Hit Areas for Thumbs, Not Mouse Pointers

Can you count the number of times you’ve miss-tapped a link or button while browsing the web on your mobile device? Thumbs and fingers are simply not as precise as mouse pointers on computers. High-quality mobile UX design takes this principle into consideration. 

The Nielsen Norman Group claims that “interactive elements must be at least 1cm x 1cm to support adequate selection and prevent fat-finger errors.” 

Providing sufficient hit areas for mobile users helps reduce the risk of mistakes, and most importantly, allows a user to give their undivided attention to browsing your products. 

Mobile Product Catalog Navigation: Always Leave Breadcrumbs!

Breadcrumbs are visual navigation UI that helps a user understand where they are on a website. Breadcrumbs also enhance a user’s browsing experience by illustrating what product collection a user is currently viewing, and where a user can go to find similar products.

Even though a mobile device has a built-in navigation UI, an eCommerce website should still include breadcrumbs as part of its mobile UX. Neglecting to include breadcrumbs can lead to user error, confusion, and frustration. Especially since the majority of users are familiar with breadcrumbs and have used them before. 

Without a proper mobile navigation hierarchy, a user might feel lost on this PDP. 

Wrapping Up

For a successful holiday shopping season, your website speed and UX are paramount, because they contribute the most to your customer experience. During Black Friday and Cyber Monday, eCommerce sites will have an influx of new site visitors alongside a large turnout of existing customers.

It’s more important than ever to have your website performing at its absolute best. Online sales are likely to be at their highest volume than at any other point in the year. So, you should take the time to ensure your user experience is enhancing your brand’s reputation – not hindering it. Because even with the best deals or deep discounts, a lackluster UX is going to leave money on the table.

Taking steps to improve your UX and site speed now will pay dividends in the future by increasing the likelihood that your brand acquires more loyal customers.