Creating the Best E-commerce Customer Experience with Design

As e-commerce sales skyrocket, all businesses are looking for ways to grow their sales by relying on the limited channels at their disposal. According to Salesforce, Q1 e-commerce sales in 2020 received 20 percent revenue growth, compared to 12 percent in Q1 of 2019. In particular, there was a 41 percent spike in digital revenue during the final 15 days of the quarter.

Customers are frequenting websites for everything, from groceries to family-friendly games. A poorly-designed e-commerce site that is difficult to navigate, challenging to shop, and has a confusing or complicated checkout process will not endure. These points of friction can result in the loss of sales, but there are ways to avoid these issues by considering design decisions from a customer’s point of view.

Here are a few thoughts to keep in mind from a design and UX perspective to ensure the best customer experience.

Avoid Overly-Complex Navigation and Layouts

There are many ways navigation can affect websites and customer experience. Ultimately, the main goal is to allow customers to find what they are looking for within the fewest clicks and garner a sale.

Therefore, it’s important not to reinvent the wheel in terms of layout. Adhering to design standards means customers will know where to find what they are searching for and don’t have to get used to a different method of navigation. Modifying established frameworks – like, for example, renaming the Pricing page to something else – could create confusion in the customer and eventually lead to a loss in sales.

One way to ease the process is to simplify the Search function and make filtering a priority. Since customers don’t always know how to find what they’re looking for, place the Search function prominently on the page, and allow in-depth filtering options.

Once said products are located, their product page should include compelling, useful images, straightforward navigation, and breadcrumbs to easily see related products.

Keep the Design Minimal

While a visually-appealing design is vital for branding identification purposes, an over-the-top design may be overwhelming to a customer or slow the site down. Limit the color palette to a neutral color with one or two accents dictated by the brand colors. Adobe Color and Color Safe are helpful resources to create a beautiful, accessible website color palette.

When choosing fonts, pick one font to use primary headings and one font for the main body text.!

The body text font should be easy to read in smaller, denser paragraphs – those are usually the sans-serif types. The font you choose for the headings can take on a little more personality due to its more substantial sizes. Google and Typekit both offer font-pairing tools that allow experimentation with different combinations. Remember to think through the best weight and color of the font when considering readability.

Product imagery should be compelling and highlight the features of the product, or the least the ones that people would be most interested to see if they were in a physical store. The size of the photos has a significant impact on the website’s speed, and long loading times may result in an impatient customer.

One way to increase speed is to optimize images by reducing size and quality. Also, while sliders and carousels are attractive, they usually use a lot of JavaScript to operate. Replacing a slider that features multiple photos with one static image can cut down on load time, while also being more mobile-friendly. Using a fast, optimized for e-commerce hosting can additionally impact site speed, as the quality of your hosting is directly related to the site’s performance.

Make Mobile a Priority

While it may seem obvious, many e-commerce sites are surprisingly not equipped for mobile. For some retailers, including Amazon and Walmart, more than half of their e-commerce site views are from mobile-only visitors. Similarly, 36 percent of millennial customers are making purchases from their mobile phones, with that number steadily growing in the current climate.

When customers browse websites on their mobile devices, they are usually on 2G, 3G, or LTE, which is generally a slower connection than what they use within their homes.

Therefore, it’s a best practice only to show what users need to see on their mobile device in an optimized, lighter mobile version of the website, rather than a shrunken version of the entire website. Make sure that the site is responsive, meaning that all content stays on the page, but moves around to fit on the screen and does not require sideways scrolling.

Allow forms to auto-complete for customers to easily enter shipping and billing data that they already have saved. Make all buttons and links large and make all text easy to read. Wherever possible, reduce the size of images and files to make the site faster to load.

Design an Optimized Shopping Cart

Once customers navigate the site and find items they are interested in, be sure that adding items to their cart is a streamlined experience. Make all calls-to-action easy to find by spelling out all product options (such as sizes, colors, tiers, or other price points) in a visible location. No matter where they take action, the customer should know that their addition was successful through a popup, menu, or another visual cue.

Now that an item is added to the cart, it’s crucial to make its contents easy to view from any page. Some sites add a cart icon to their primary or secondary menu that displays the total cost and or total quantity of items. Often, clicking on this icon will reveal a “mini-cart” or smaller interface that contains a summary of all products, with the ability to visit the main cart page to view more details or check out.

Once a sale is ready to be finalized, make sure customers can check out no matter where they are on the site. If possible, try to keep the process to a single page to reduce the amount of friction needed to complete the purchase. If it’s necessary to use a second page or send customers offsite, be clear on the steps involved and make sure the integration is clear and smooth.

Most importantly, allow the customer the option to checkout as a guest, without requiring them to have or create an account. One extra step may lead to cart abandonment.

E-commerce sites are not a one-size-fits-all approach, but there are many best practices to measure success within design and user experience. Keep these thoughts in mind when considering website updates to increase site visits and boost sales.