eCommerce Website Design: Beautiful, Usable Web Sites that Sell
Tags: website, ecommerce, design
Published: 2019-09-10 09:10:55

<h2>What’s so Special about eCommerce Web Design?</h2>

eCommerce sites ultimately need to perform sales transactions. A great eCommerce site needs to do a whole lot more than have a shopping cart. Your site needs to be competitive in design and usability, while your store must be competitive in selection and price. Your web site is not just a storefront, but also an educational site, potentially a social media site, and a representation of your brand/company.

This article will help you to consider the design and usability concerns of your eCommerce site, and determine if a do-it-yourself approach is for you (think Shopify), or if hiring one of the <a href="https://medium.com/theymakedesign/best-web-design-companies-3ecc85b32071">experienced website design studios around will better serve your needs</a>. <a href="https://www.ramotion.com/agency/web-design/">Check out an agency</a> to get a feel for what they do and how they can help.

<h2>Brand and Personality</h2>

Your online store should reflect your brand personality in every manner, from the color scheme to the content tone of voice. One of the major functions is a marketing website, particularly if your only sales channel is your site. Experienced agencies can help you establish your brand and apply it consistently, and effectively, to your site.

Online shoppers have lots of options. A unique brand can help you stand out by delighting potential customers. Speak their language, use bright colors, and keep the site simple and crisp.

<h2>Navigation, Search, and Taxonomy</h2>

eCommerce sites rely heavily on customers being able to find and select the products they want or need. According to Nielsen / Norman Group, “Participants in our research indicated feeling anxious and overwhelmed with options when shopping online…”

The more products you sell, the more important it is to have robust options for navigating and searching your site. For example, Uncommon Goods provides multiple options for navigating. They want to ensure that if you don’t have a particular product in mind, you can still make a purchase. The example below shows how uncommongoods.com helps you browse for a gift. They employ a complex taxonomy for their products that allow them to suggest options for different occasions, prices, or recipients.

<img src="https://thepracticaldev.s3.amazonaws.com/i/l02glkynzrpiazq53444.jpg">
<h6>Figure 1: UncommonGoods.com</h6>


If you offer multiple formats or channels, and you should, consider navigation options for mobile versions and apps as well. Boxed.com provides nested navigation for categories and subcategories, as shown. However, when you are browsing their mobile site, you can navigate to the categories, but not a subcategory.

<img src="https://thepracticaldev.s3.amazonaws.com/i/ng0xf2vn8pah8q9yi8pf.jpg">
<h6>Figure 2: Boxed.com - Full Site</h6>
<img src="https://thepracticaldev.s3.amazonaws.com/i/v63ra3ajztdha8rud3yk.jpg">
<h6>Figure 3: Boxed.com - Mobile</h6>

<h2>Product Pages</h2>

Once your customers find potential products, they want as much information as possible. They need to be able to compare, view the product almost as if in person, and easily see all the available options. Images should be crisp and clear. Offer multiple views and zoom options. You should consider updating the images when the user selects different buying options as well.

If important information, like price, changes based on selections, it should be very clear. The example below shows the base price in the primary information but hides the updated price in the purchase button, which is hard to read.

<img src="https://thepracticaldev.s3.amazonaws.com/i/lnpmqeaf5fh3onlckv35.png">
<h6>Figure 4: Ratio Coffee</h6>

As with tone of voice, the text chosen for buttons, or any “call to action,” needs to be carefully considered. Hubspot recommends customizing CTAs for known users. However, you should avoid embedding dynamic content like price in text that users commonly scan past. Keeping with common online patterns helps users that are moving quickly, so simple text like “Add to Cart” works best.

Many online retailers include social elements like sharing and reviews. This helps customers compare products, feel confident in their selections, and helps to promote your site/product. Related items or “frequently purchased together” recommendations on the product page can help increase the total purchase.

<h2>Shopping Cart</h2>

One of the biggest reasons small retailers opt for an out of the box solution is the ability to easily set up a shopping cart and purchasing process. However, your customer base may indicate the need for unique options. For example, Nielsen / Norman group recommends including payment options that are more widely used in other countries if you plan to ship internationally.

Your shopping cart should be easy and obvious to access. Failing to pay attention to the user experience for your sales funnel can result in lost sales. Features need to include an easy way to modify quantities, view shipping options, add discount codes, and enter payment options. Keep this simple and short, preferably to a single page. Not all customers want to set up a long profile or account for a quick purchase, allow customers to check out without providing their life stories.

<h2>Summary</h2>

Whether you decide to create your site using an eCommerce platform or engage a design agency you will want to follow best practices for usability and marketing to ensure you attract and keep your customers. Allow them flexibility, ease of navigation, and a short check out process to ensure you keep them on your site and returning for future purchases.