There are two main reasons why people purchase anything online – price and convenience.
Due to the lower overheads that exclusively online companies work with, they are able to slash their prices more dramatically than traditional brick and mortar stores. On the convenience side of things, we are talking about avoiding long drives and dealing with crowds.
For the second condition to remain a factor, purchasing online has to actually be convenient. This is where customer experience comes in. For the online part of the omnichannel retail and ecommerce, a huge deal of customer experience (and subsequently how much they spend) has to do with the web design of the online stores.
It should also be pointed out that customer experience in the ecommerce field is often referred to as user experience (UX), taking cue from the name for website users in general.
Start with Speed
Before we get to the more specific aspects of web design and how it affects customer experience in online stores, we should take a moment to point out the paramount importance that the duration of loading times plays in ecommerce UX.
Just to illustrate how important the speed of an ecommerce website is, take a look at these statistics:
- Almost half of online shoppers expect a web page to load in under two seconds (keep in mind, this was in 2011)
- In 2006, Amazon said that increasing page speed by 100-miliseconds added 1% to revenue (in 2006!)
- For an ecommerce website that makes $100,000 a day, a 1-second delay can translate to $2.5 million in lost sales per year
You can find even more staggering statistics in this Kissmetrics post.
For online stores, speeding up the website can be somewhat trickier than with other kinds of websites due to the need for plenty of visual content (more on this later), most notably images. That being said, there are plenty of things that can be done by designers to shorten loading times and speed up ecommerce sites.
This will include using PNG image files only when necessary (opting for smaller JPEG format), optimizing image sizes and metadata, reducing the size of pages through compression and minification, enabling caching, using Content Delivery Networks and more.
It is not really that difficult to see an analogy with traditional retail here. If your customers are waiting too long to be serviced and to make their purchases, you can rest assured that they will leave your store for good. This is why identifying traffic cycles and adjusting your staff accordingly is so important.
It should also be pointed out that ecommerce web design has to walk a fine line between providing an attractive, alluring experience and a streamlined, comfortable one.
Setting up a retail space to provide the best CX possible and to increase one’s conversions is one of the most complex and intricate aspects of running a business. People have written books and created courses around store layout. Various store layouts will come with their own advantages and disadvantages, for example.
The good news is that ecommerce store layout is somewhat simpler in that the only consideration is making it as simple as possible for customers to find what they are looking for. And while this generally entails less decision-making than setting up a physical retail space, there is still quite a bit to keep in mind.
For one, this will entail a very obvious search bar. Some ecommerce stores decide to be adventurous with the placement of their search bar, moving it to one side or lowering it a bit, but the best bet here is to do the expected and stick it at the very top of the page. The reason for this is excruciatingly simple – that is where customers expect it to be.
Another thing to keep in mind when designing an easily navigable ecommerce site is the way your customers can gradually narrow down their search. This is done through categories and subcategories which should always be governed by a simple hierarchy.
A nice example of this is H&M’s site. Their website features clearly-defined categories listed at the left side of the page:
Clicking on one of the categories shows a number of sub-categories, bringing the customer closer to the item they are looking for.
Some ecommerce stores add other categorization factors. This is especially true for apparel ecommerce stores who sell products by different designers.
This is a perfect example of this, as the store provides “traditional” categories, but also allows the customers to search for items by specific designers.
One of the most important things to keep in mind is that your ecommerce navigation should never distract the customer from their browsing experience. For instance, invading a certain category with items from another just because you want to promote them is a bad idea.
Imagine if a customer at your physical apparel store was browsing a rack with men’s jackets and one of your employees started throwing swimming trunks on the rack. It wouldn’t make for a satisfied customer, would it?
Visual and Branding
One of the most important factors that will determine how successful your ecommerce store is and how good of an experience your customers have visiting it will be the visual elements they will encounter. These will involve the actual look of the website (the graphic design), visual branding elements that will let them know which site they are on, as well as product images.
Product images are generally considered to be among the most influential factors when it comes to customer experience and conversion rates. In fact, they are so important that many experts say that a product without an image might as well not be featured on an ecommerce website
Ecommerce product images should be at least 72 dpi and the optimal original image size is 1000px x 1000 px (remember the speed caveat). The images should be clear, non-grainy and as professional-looking as possible. Many ecommerce sites use images provided by manufacturers, while some hire professional product photographers.
One product image is the bare minimum and, generally, the more the better. This is especially true for products such as clothing or accessories that people would usually touch and rotate to inspect them better. For the most part, half a dozen images will do the trick. In addition to this, an image showing the product in use is always a good idea.
It goes without saying that this is merely scratching the surface of product images and rules for doing it the right way.
When we are talking visual branding, the basics apply to ecommerce websites too. This means being very careful about the “feel” that the website will give off – from playful to very serious, from sleek to almost cluttered and from toned down to rather colorful.
Balenciaga has recently gone super extreme with their impossibly basic design.
Yes, they really did this. Kudos.
It is also important to prominently feature the logo of the company, as well as to maintain the same visual identity across various parts of the website.
Omnichannel retail companies, i.e. those that sell both offline and online, should be particularly careful about translating their visual identity to their new online store. Namely, a well-designed online store will always be just a continuation of the physical store in the visual sense (in other ways too, more about that later).
A good example of this is the Sunburst Music website which added an online channel to a decades-old Sydney guitar store. The wood-heavy visual identity that helped the store stand out as a down-to-earth, old-school kind of place is translated to the website which uses the same earthy tones and does away with most frills.
Someone more cynical might say that visual branding does nothing for the customer and that its only purpose is to benefit the company, but they would be wrong. Visual branding helps online shoppers differentiate between different stores (an average online shopper will frequent many) and it streamlines their experience by reminding them of past experiences with that same store.
When it comes to the visual design of the website (independent of visual branding), there are a few things to consider if one wants to best serve their customers.
For one, clutter is never good. An online shopping experience is meant to be simple and as streamlined as humanly possible. This cannot be done by cramming pages with unnecessary elements or confusing the customer with various calls to action. Not only will this annoy the customers and cause them to leave the online store, it will also be disastrous for the store’s conversion rates.
The All-Important Customer Journey
The customer journey has been one of the most crucial parts of the retail experience since forever and it has changed dramatically in the last couple of years, especially with the rise of omnichannel retail.
In online retail, customer journey is just as important, probably even more so since the interactions with store staff are minimal and often non-existent. It also combines everything that we have mentioned so far in this article.
The entire experience will start on the home page where the company will present its brand in the most efficient and effective way. The “above the fold area” (the area visible without scrolling, also called the Hero Area) will take care of this, featuring images that represent the brand and featuring the company’s strong points.
The home page will also guide the customers to various product categories and invite them to search for what they are looking for. It will also allow the customers to easily gain access to other pages they might find useful, such as those describing the shipping methods and prices, customer service and various terms and conditions that people need to be aware of.
The design of the home page needs to be as clutter-free as possible and focused on providing an overview of what the website is about to the customers.
For the majority of ecommerce stores, the next step in the customer journey are the category pages which have to feature a clear hierarchy and which provide additional info about the products that will feature in separate categories. This is also where ecommerce websites will feature SEO-friendly copy, but that is a story for some other occasion.
Once again, the design is all about functionality and guiding the customers to individual products.
Individual product pages are the actual meat of ecommerce websites and, as such, they are the most important to get right.
They need to feature any and all information that is available on individual products, truly going into details on products such as computer screens, for example. This is also where the aforementioned product images will be featured heavily. Another feature that most ecommerce experts agree on can be extremely effective are customer reviews.
This is a great example of an efficient and well-designed product page (you can check out other great ecommerce web design examples here, by the way).
The purchase button should also be very visible and the action of putting a product in the shopping cart should be clearly visible to the shoppers.
The cart page is the last step in the customer journey (at least in the most basic sense) and it has to be designed with utmost care. The reason for this is that cart abandonment is one of the most common ways in which ecommerce websites lose customers.
The cart page needs to provide every piece of information that the customer might need – product, size, quantity, color, availability, estimated delivery date, shipping costs, etc. You should also make sure to allow your customers to change the quantity of products and to easily navigate back to buying more.
The checkout button should be the most visible element on the page.
The Omnichannel Interplay
When we are talking omnichannel retail companies, it should be pointed out that the online customer experience has to be in perfect unison with the offline experience and an extension of it.
It will start with the visual identity which has to indirectly inform the customers whose online store they are visiting (like we mentioned above).
The customers should also be able to find the products they may have seen in your physical store and to see that they are truthfully presented on the website. You may also use insights that you gained from your physical store to better recommend products to online shoppers and guide them to more likely purchases.
In case you have a loyalty program of some kind in place, you should make sure that your faithful customers are also rewarded online through regular deals and discounts. The same goes for vice versa.
Customer experience of online shoppers depends on a number of factors and web design is definitely among the most important ones. When we are talking omnichannel experiences, the interaction between online and offline CX is of paramount importance, which will also include web design decisions, especially when it comes to visual branding.
About the writer: Emma Miller is a Sydney-based writer with a degree in marketing. Interested in digital marketing, social media, start-ups and latest trends, Emma’s a contributor at Bizzmark blog.
- [INFOGRAPHIC] Optimizing the Path to Purchase Blog
- “Always On” Requires Rethinking of Retail’s Seasonal Calendar Blog
- Holy Sh*!, Amazon Bought Whole Foods … Now What? Blog
- Deep Learning, Artificial Intelligence and Your Not-So-Distant Store of the Future Blog