If the past two years are any indication, we are still in the early days of a disruptive megatrend that’s driving e-commerce penetration around the globe. With worldwide retail e-commerce sales expected to climb 16.8% and reach $4.9 trillion in 2021, the steady march towards the new digital economy will likely intensify in the years ahead.
That’s why now, more than ever, implementing e-commerce best practices is critical to success.
At fabric, we work closely with mid-level and enterprise companies to develop e-commerce strategies to help them meet the rapidly evolving expectations of consumers. This involves the implementation of e-commerce design best practices on their website to deliver shopping experiences that increase traffic, decrease cart abandonment, and increase average order size.
While design and UX are not the only categories of e-commerce best practices—technology, customer service, and merchandising matter, too—implementing e-commerce design best practices on your homepage, product detail pages, and other web pages is imperative for selling more.
In this article, I will share tips for improving e-commerce through design based on my audits of over 20 e-commerce websites for the FDS team. But, before we dive into my learnings, we need to review which e-commerce metrics to track so you can measure the effectiveness of the best practices you implement.
While there are many website analytics options to choose from for tracking e-commerce metrics, Google Analytics is a good place to start. However, as you grow, you’ll want to consider using more specialized e-commerce analytics tools. As for Google Analytics, here are some of the available e-commerce reports and metrics you can track:
This data and other Google Analytics data can help you understand the bottom line return of e-commerce best practices you implement. It can also help you understand which products sell well, which products are best suited for your customer base, and which are supported by your best marketing efforts.
Now that we have some metrics to track to gauge success, let’s review some pivotal changes you can make to increase gross merchandise value (GMV) generated from your website.
|Simplify product detail pages (PDPs)
|Declutter PDPs with UX features like collapsible containers and hover effects to convey product information quickly.
|An EyeQuant study found that cluttered website designs decrease user engagement and lead to higher bounce rates across all industries.
|Reduce unnecessary clicks
|Offer quick and efficient purchase paths for customers with the ability to find critical information quickly
|Users will make an emotional decision about an experience in about 90 seconds, making it vital to provide a positive experience very early on.
|Don’t force loyalty unless absolutely necessary
|Offer a guest checkout option to reduce friction and cart abandonment during the checkout process.
|Baymard Institute found that 24% of shoppers abandon an order because the website forces them to create an account.
|Search result organization
|Provide more relevant results by incorporating natural language processing (NLP) and auto-suggest into search.
|Forrester found that nearly 80% of visitors abandon carts due to poor site navigation and search results.
|Modernize your homepage
|Update homepage’s color management, typography, visuals, branding, written content, and information architecture.
|Research has shown that the visual appeal of a website can be assessed within 50 milliseconds (ms).
|Optimize the number of items and reduce the complexity of navigation
|Limit the number of options in your website’s top-level navigation. Too many options can overwhelm the customer.
|Clutch recently found that 94% of consumers believe that easy navigation is the most important website feature to have.
|Surface loyalty programs
|Offer a paid loyalty program option to increase spending, drive higher purchase frequency, basket size, and brand affinity.
|McKinsey found that members of paid loyalty programs are 60% more likely to spend more on brands after subscribing.
|Simplify the checkout process
|Offer a 1-page checkout and include options to auto-save payment and shipping information.
|Baymard Institute found that 18% of US online shoppers abandoned orders due to a “too long/complicated checkout process.”
|Use interactive features
|Live chat is an interactive feature for customer support, lead generation, and conversions.
|82% of customers consider immediate responses as “important” or “very important” for marketing or sales questions.
|Add company values into the user experience
|Share a list of the company’s core values and incorporate them into the website’s design, branding, and user experience.
|According to Kantar Monitor, 68% of consumers expect brands to be clear about their values.
The product detail page (PDP) provides pertinent information to the customer to make an informed buying decision. Optimizing the PDP may include simplifying the design, decluttering the page, incorporating white space design, and displaying enough relevant information above the fold when a user first views the page.
A perfect PDP will also contain several essential elements, including the appropriate amount of visuals, personalized pricing and promotions, and customer ratings, to name a few. Companies should use product information management (PIM) software to import, enhance, and organize product information.
While the 3-click rule for web design has been debunked, it is still important to limit the effort required for a customer to access key information or accomplish a task. Best practices include ensuring that:
In addition, there are many ways to improve the shopping experience and reduce unnecessary steps. Common strategies include providing flexible payment options and organizing your products into logical category buckets with clear names.
Customers expect speed, convenience, consistency, friendliness, and a human touch when purchasing products online. Forcing loyalty by disrupting the purchase path creates unnecessary friction and causes cart abandonment during the checkout process.
A 2021 Baymard Institute study found that 24% of shoppers abandon orders because websites force them to create accounts. Offering a guest checkout option is a great way to improve the UX for the consumer.
Gartner explains that product discovery is a critical part of a digital commerce funnel and can be seen as low-hanging fruit when considering value-for-money innovation with a potentially high impact on conversion. E-commerce best practices combine commerce search with personalized product recommendations, semantic search using natural language processing, and AI-powered relevance.
Because a company’s homepage is often the first point of contact with a customer, businesses should follow e-commerce design best practices to boost user engagement.
For example, color management, typography, visuals, branding, written content, and information architecture should receive special attention. Cards and carousels can be used to condense information but should be used sparingly (if at all) because of usability issues. Also, adding interactive features such as scroll animations, horizontal scroll, animated text, GIFs, videos, and interactive images and content can enhance the browsing experience.
E-commerce homepage best practices should also include quick load times, a mobile-first design, product promotions, simplified search and navigation, personalized product recommendations based on browsing or purchase history, social proof with reviews and testimonials, social media engagement, and community involvement. Including these elements can modernize the homepage and improve the overall shopping UX.
A headless and modular storefront software solution and site builder can build out homepages, category pages, and PDPs.
The navigation menu is an organized list of links to other web pages that allow visitors to access the most useful pages quickly.
A common misconception about information architecture (IA) is that menu items should be limited to around 7. This follows research by George A. Miller, who found that the short-term memory of most people holds about seven items, plus or minus two. However, users don’t memorize navigation menus. Instead, websites can base the number of options on:
For example, a big-box retailer may surface many more categories and products than a simple t-shirt business. Allbirds does a great job of simplifying the navigation of the site while also showcasing its core values:
Another e-commerce design best practice is to emphasize your loyalty program throughout the website. Loyalty programs can drive purchases and sales by building relationships with customers. Best practices include promoting loyalty benefits and adding options to sign up to the program in several locations, including the homepage, product pages, and during checkout.
However, it’s important to note that a one-size-fits-all approach does not work. Instead, brands must create a unique loyalty program offering to provide real value to their customers. Using a loyalty management system (LMS) is a great software solution for collecting, accessing, and managing customer data.
It is common for shoppers to abandon the checkout flow if it takes too long or if the process is too complex.
Some strategies to reduce friction and improve the checkout process include improving the time to interact (TTI) and site speed, creating a 1-page checkout (versus a multi-page checkout), making it easier to add coupons and gift cards, offering a guest checkout option, clearly displaying shipping costs and taxes, and offering more payment and deliver/pickup options.
E-commerce websites can use many interactive features to create a more engaging shopping experience for users.
For example, questionnaires and surveys can lead to more personalized product recommendations, live chat can help with customer support and sales, and 3D images and augmented reality for products can give users more useful product information.
Incorporating company values messaging is another e-commerce website best practice. According to a study by 5W Public Relations, 71% of consumers prefer buying from brands that align with their values.
However, it is not enough for companies to simply create a core values page. Company values messaging should be seamlessly incorporated throughout the website’s design, branding, UX, and navigation.
We’ve also compiled a shortlist of additional tips that can be combined with the best practices mentioned above to create better online shopping experiences for customers. These include: