Illustration by Avirup Basu
eCommerce websites have evolved drastically over the past years, and so has our understanding of how designers can apply user-centered design best practices in order to increase conversions, sales, and revenue.
At the end of the day, the success of an eCommerce site depends on the experience the user has as they shop on your website. Design is your chance to make a good first impression, enticing the user to shop around and explore additional products. As UX best practices evolve over time, it’s important to apply them to eCommerce sites.
Anatomy of an eCommerce site
As you define the structure of your eCommerce site, it’s important to follow suggested website best practices. However, it’s even more important for eCommerce sites to follow these principles, since the main goal of the site will be to convert your users— which impacts your revenue and overall net income. Therefore, it’s important to pay extra attention to eCommerce design trends including web layout, navigation, content, and typography.
To be successful, you’ll need to take these website best practices a step further and apply them to the four main areas of your eCommerce site. Once we understand these four main areas, we can dive deeper into the best practices within each.
The four main sections of an eCommerce site are:
- Homepage
- Product Listing Page
- Product Page
- Checkout Page
Homepage
Your homepage is your first chance to captivate a visitor’s attention. With so much competition out there, you need to ensure they don’t leave your site and buy from a competitor. If the user gets a bad first impression, they will easily bounce from your website and purchase from someone else who looks more professional and authentic.
So, how do you gain your user’s trust? Follow these eCommerce design best practices.
Include a search bar
A search bar is an incredibly important element of any eCommerce site. This allows the user to quickly find a particular item or category they are looking for, making it even easier for them to purchase.
Incorporate solid branding
In today’s world, where identity theft is a very real threat, most users prefer to buy from established brands when shopping online. You’ll need to appear professional and well-established to gain the trust of your visitor—not just some faceless website trying to steal their credit card information.
To do this, start by creating a design system so that your company’s branding stays consistent across all pages. This branding consistency will help effectively convey your brand’s attributes, values, and ultimately, why a customer should purchase from you, which is why it’s important that consistency be evident to your user. Establish a cohesive brand identity by incorporating visual identity through logos, typography, and color scheme. Finally, create your own, unique website as well, in addition to Facebook and other social platforms. These are great ways to begin incorporating solid branding for your product.
Highlight your value proposition
The homepage is your opportunity to hook your users, making it immediately clear why they should shop with you instead of your competitors. Your copy should reflect your brand identity, get users excited to shop with you, and state the benefits of your products in a very concise way. Using white space to your advantage can allow your value proposition to stand out clearly to your user. Consider placing your value proposition above the fold, so the user gets an immediate impression of who you are and the value you bring.
End with a detailed footer
The footer section is your opportunity to include additional information that the user may need, such as your contact information, physical address, social media accounts, privacy policy, and any copyright information. Include anything that is important to the user but not important enough to live in the main sections of your website.
Product listing page
After you have gained your users’ trust and enticed them to shop on your site, how do you present the products to them in the most effective way? Looking to competitors for eCommerce design inspiration is a great way to understand how to visually appeal to users in your market. If you are selling guitars, check out a competing guitar seller’s website, see how they designed their product listing page, and make yours even better. Additionally, take note of bad eCommerce website design you encounter and make sure to not include it in your design. Lastly, analyze eCommerce giants such as Amazon and eBay, as they often yield great inspiration for design. As you create your wireframes, here are some other things to consider when designing the product listing pages on your site.
Build easy-to-use navigation
Designing easy-to-use, effective navigation is the best way to help a user locate the exact product they’re looking for. The quicker the user can locate this item, the more likely they are to convert and return to your website later on. If the user can’t easily locate the item they came to purchase, they will likely abandon your site in frustration, never to return. Creating a wireframe map within your design process is a good way to ensure you’ve optimized your user flow.
Filtering and sorting options are also helpful for your user, as are breadcrumbs. This helps the user understand where they are on your site, how they got there, and how to get there again later if needed. This simple tactic is a great way to improve your website’s navigation to help yield more conversions.
Image of breadcrumbs outlining the current location with regard to overall navigation of the website. Image credit Justin Morales.Highlight best sellers or new arrivals
Hick’s law states that the time it takes to make a decision increases with the number and complexity of choices presented to the user. Therefore, minimize their decision-making process by presenting them with “Best Sellers” and/or “New Arrivals” to help guide them as they shop on your website. Including a list of top 5 or 10 best sellers is a great way to get your user to focus in on a small group of products. Additionally, listing out new arrivals is a great way to showcase new products, while giving users a small list to choose from in hope of increasing conversion rates.
Make content scannable
Also, make sure the user can scan items on the page while shopping. Avoid long descriptions below products; they can always click into the product page to learn more if they’d like. Presenting your products clearly, displayed in rows, is a great way to do this. Use a layout grid to ensure the spacing and alignment on your page is consistent between products. This will help the user browse your products with ease as they find the perfect match.
Image of product listing page with products in a line allowing for scalability. Image credit Justin Morales.Spotlight promotions
Customers love a good bargain, and leveraging promotions and sales is a great way to increase conversions. The discount may be the deciding factor between them purchasing the item or not. Therefore, consider displaying products that are currently on sale, or highlight any promotions designed to increase buying behavior such as “buy two get one half off” promotions, etc. Red is a popular color to promote sales, while incorporating iconography such as a sales tag can drive users to particular products. Banners are a great way to highlight particular promotions in an effort to increase conversions.
Product details page
Once the user has pinpointed a specific product, they will click into the individual product page to learn more. Here is your opportunity to really make the product shine, guiding them one step closer to the checkout process. Below are some considerations when designing your product details pages.
Use high-quality photos
Using high-quality photos will make or break your eCommerce site. A recent study from email provider ExactTarget showed that using high-quality, related images will help increase conversions by over 40%. So put your camera phone away and invest in professional quality photos of your products.
If you want to take it a step further, consider adding video of the product. For a guitar product page, for example, how wonderful would it be to hear the instrument alongside the photos?
Write compelling, detailed copy
Product copy is a key ingredient in the decision-making process. This is your opportunity to speak to the consumer in a way that will sell the product. Be extremely descriptive and paint a picture of how the product will solve their needs. Explain the benefits of the product while providing helpful details about it. Consider including a section dedicated to the materials used, dimensions, history, or any pertinent details that will help describe and sell the product.
Feature ratings and reviews
According to a recent case study, 67% of consumers are influenced by online reviews. Showing the user peer ratings and reviews is a great way to influence their buying behavior. When a user sees four stars, they are immediately drawn to that product. Consider using a star-rating system in your design as a user is more likely to purchase a product that has numerous positive reviews.
Encourage cross-sells and up-sells
Another great way to boost your conversions is to build out a section dedicated to upselling and suggesting related products on the product details page. Here you are able to show users products that will complement their product in order to increase your company’s average cart value. For example, if a user is purchasing a digital camera, suggest a memory card to purchase as well. If you are selling clothing, display an entire outfit after the user makes a selection. This allows them to see how pieces fit together, making them more inclined to purchase more than just one item.
Checkout page
After your high-quality photos, compelling copy, and peer reviews have convinced the user to purchase from your site, you must get them through the checkout process quickly, with ease and no distractions. When money gets involved, you must make the user feel 100% secure that both the product and the transaction are authentic and safe.
Show a progress indicator
Giving the user a visual indicator as to where they are in the checkout process will guide them through each step leading up to the final sale. Including these visual cues will keep the user concentrated on the purchase, in an effort to avoid distractions that lead to cart abandonment.
Image of progress bar in the checkout process. This shows the user is on Step 2. Payment and Shipping. Image credit Justin Morales.Allow for various payment options
Giving users payment options is a great way to increase conversions for those who may have security concerns or prefer a third-party payment option. PayPal, Venmo, and Stripe are some common payment methods you can include alongside your traditional credit card or debit card options.
Include an order summary
Before the user submits the final payment, it’s good practice to present them with an order summary. The customer can see an itemized list of their purchase, including the cost associated with each item. Make sure to include tax, shipping, and any discounts as well. Providing the user a snapshot of their order will give them the transparency needed to feel safe to submit final payment.
Image of an order summary page. Image credit Justin Morales.Emphasize security badges
Security badges or detailed copy are other ways to ease your customers’ lingering security questions. It is important to make sure the users know that they are in a secure online shopping environment. Adding security badges and/or copy will help eliminate the chances of customers abandoning their carts last minute due to security concerns.
Conclusion
Creating a successful eCommerce site is heavily dependent upon the user’s experience leading up to the final sale. Following these best practices will ensure that you are setting yourself up for success. As you guide users to find what they need and move through a seamless, safe checkout process, you’ll end up with increased conversions and happy, repeat customers.