eCommerce design and visual merchandising

Visual Merchandising definition:

“Visual merchandising refers to the aesthetic display of the merchandise to attract the potential buyers, prompt them to buy and eventually increase the sales of the store. In simpler words, visual merchandising is the art of displaying the merchandise to influence the consumer’s buying behaviour.” – Management Study Guide

Web design, especially when it comes to web design for eCommerce, is very similar. When designing an eCommerce website, a designer must think about how to present the products or services best in order to market them successfully to that brand’s customers, and lead the user through the site in the most appropriate way. This is done through branding, site layout, use of photography, illustrations, icons, and loads more.

Communicating visual concepts

A visual merchandiser’s job is to communicate concepts to customers. This will be done in a variety of ways, including dressing mannequins in specific clothes that will get the best reception, moving products around in order to promote specific collections, categories, or individual items, checking if promotions are well marketed in store, and ensuring that the way the store looks is on trend and easy to navigate for maximum conversions.

While physical stores have items you can test out, try on, and touch, online stores have to communicate the benefit of each product in a purely visual way. Common ways to do this are through written descriptions, images, and videos. Designers have to ensure that each of these is presented well for all types of browsers and devices, as well as the product’s target market.

As they are the first things you see when you land on a site, the website’s homepage or key landing pages are designed so that they display products or the ethos of the brand or campaign, much like a window display.

VIvderma influencing buying behaviour
Vivderma’s homepage banner clearly promotes a specific product in a beautiful and appropriate way. It allows the user to click straight through to the product, and has a simple message to market it to users.

It’s usually clear where a product might be in a store due to store layouts, where certain categories will be displayed in certain areas (CDs in a supermarket would be in the tech section and this would be marked clearly with an overhead sign). Online it’s not so simple, as the user cannot see the whole store from the homepage. This is why designers need to know about best practise for navigating an eCommerce site. These include:

  • A good search – while it’s the developer’s job to ensure that the functionality of the search is top class, the designer ensures it is put in an obvious place on the website. This is usually the top right corner. The designer will also customise the search, ensuring that it is on brand.
  • Top navigation bar, which is often in a mega menu format for the user to quickly select both primary categories and sub-categories
Increasing conversions in ecommerce sites
Vivderma’s megamenu clearly shows each category and sub category when the user hovers over the Shop link in the top navigation menu


Giving products the spotlight

If you present products in an aesthetically pleasing way, your product looks more appealing to your users, and ultimately ups conversion rates. So, how? This is the question both web designers and visual merchandisers have to answer – often placing an outfit on a mannequin shows shoppers how it will look, and, if done well, will silently sell the outfit to them.

Art Direction

Great product photography is a must, though the photography itself usually isn’t a designer’s realm. However, a designer will often have input, giving the photographer a brief which has creative vision. Art Direction often includes having elements of branding or the web design that the photographer should keep in mind – e.g. a clean, white, and minimalist feel, or an angle at which the products should be photographed.

Clearly visible images

The product images shouldn’t obstructed by anything and placed on a clean background to avoid any attention being taken away from the product. The reason we now see so many minimalist sites with lots of whitespace is because this is ultimately the easiest way to ensure the content (products, images, text) is the focus.

Some sites can look very busy and often the products are lost amongst other distracting elements – you wouldn’t want to spend time in a messy or disorganised shop, and the same is said for a website.

Increasing conversions in ecommerce sites
ASOS use whitespace to their advantage – all product images, text, and their CTAs are the main focus on every page.

Attracting the user’s attention

This is what any company sets out to achieve. In a physical store this is done by various methods of merchandising carefully displayed around the store – sale posters, front-facing tables to display products, certain products in targeted places in store, window displays… you get it.

For eCommerce, a web designer must try to replicate that experience. Instead of mannequins or front-facing tables to promote products, there might be featured images on the homepage to quickly attract attention.

CTAs (call to actions) are used throughout sites in an attempt to lead the user through a designated path, ultimately getting them to convert from user to customer. These are often in accent colours to draw attention, and will lead to the checkout, a sale, or other key area of the site for conversions.

Web design influences behaviour | visual merchandising
Tile Monkey use their brightest brand colour as their CTA.

Careful product placement

Nothing is put anywhere in a shop without careful consideration.

Ever wonder why Ikea is a maze you have to follow through all departments before you get to the flat pack boxes? Or why bread and milk are all the way at the back of a supermarket so you have to traipse through the shop, picking up other bits on your way?

Shops like Primark or H&M who sell little bits and bobs as well as clothes or homewares often have these low-price-point items next to the till. These are there because if you’re buying something anyway, what’s another couple of quid going to do? Did you go into H&M for sale jewellery or hairbands? Did you make a special trip to Primark for a multi-pack of Pez? No. But you got them anyway. Online shops can use similar visual merchandising tactics, like up-selling or cross-selling functionality, to remind users of last minute products they might like to add to their basket.

Increasing conversions in ecommerce sites
BetterYou have a great upsell functionality which pops up when users add something to the basket. If you scroll down, the upsell is there if they want it, but it doesn’t invade or put pressure on the user.

Visual merchandising is a crucial part of a web designer’s everyday life, whether it’s labelled as such or not, and though these two jobs require different skills, a web designer’s knowledge on visual merchandising in-store (as well as general shopping behaviours) can help a lot when thinking about how to replicate it online.

We’ve got a whole blog detailing specific ways in which designers can further influence buying behaviour – you can read that here.

A Marvellous blog by Simon

Simon co-founded Marvellous in 2005, with the aim of building a dynamic digital agency – combining the latest technology with cutting-edge visual design.

See all our Marvellous blogs