Guidelines
March 22, 2021

Structuring Your eCommerce Site

A mastery of the basics is essential in creating an eCommerce website that converts visitors into buyers. Five key elements of a website's structure make design & content more effective. Laying out these common elements in a familiar way improves usability & reduces confusion, resulting in a trustworthy first impression.

Building an Intuitive eCommerce Store

250 car models were available in the United States in 2020 [1]. Each of these vehicles has four wheels, a steering wheel, an accelerator, and a brake pedal. These similarities enable any trained driver to operate a vehicle without a learning curve.

If you wanted to build a car that would sell to a mass market, you wouldn't build it with the wheels on top or the steering wheel in the back seat. While it's much less likely to cause a public safety issue, a website that doesn't keep key elements in a familiar pattern is a recipe for confusion.

Most websites get this right, yet some designers overthink it and end up creating something that's not intuitive. You can't go wrong by creating a structure that's typical, at least at its core.

5 Key Elements of Website Structure

A lot goes into an exceptional website design, but there are a few key elements that can make a structure feel more familiar to visitors. Key elements are patterns and pages that shouldn't be over-designed; you can think of these components as the highway signs of your website.

Key elements form the backbone of the buyer's journey, they should enable quick and effortless navigation of your eCommerce site.

Website navigation examples from Tracksmith, Otherland, Muri Lelu, & Monastery
Featured (from top to bottom): Tracksmith, Otherland, Muri Lelu, & Monastery

Navigation

Your navigation is the most used component on your website. It provides access to your entire customer journey and should be treated accordingly. The simplest form of navigation is the most typical—logo to the left, links to category pages in the middle, and account and cart information to the right. Recently, companies have used this valuable space to bring visitors closer to their products with the use of mega menus. While they're more engaging, mega menus can also help visitors browse more easily by visualizing categories and products.

Product card examples from Swatch, Ritual, Jinx, & Comme Si
Featured (from left to right): Swatch, Ritual, Jinx, & Comme Si

Product Cards

Cards show up, most often, on your home page or your category pages. You may also find them at the bottom of product pages as recommendations. Product cards are interactive introductions to a product. At minimum, they should include a high quality image, price, product name, and—most importantly—a call to action (usually "Add to Cart").

Product cards should include five attributes at most; anything more can overwhelm visitors. Some sites showcase an additional product image (in-use or a stylized product photo) on hover. This is a great way to keep your design tidy while also offering the visitor a further glimpse without requiring a click.

Product page examples from Marine Layer, Not Pot, The Bouqs, Greater Goods Coffee, Pineapple Collaborative, & Clare
Featured (clockwise from top left): Marine Layer, Not Pot, The Bouqs, Greater Goods Coffee, Pineapple Collaborative, & Clare

Product Page

Nearly every product page follows a similar pattern. Shoppers are able to quickly find the information they need with this typical product page layout—image(s) to the left with the name, price, description, reviews/ratings, and Add to Cart button all to the right. Product pages are a key element that's vital to your buyer's journey. Create an impact with immersive imagery; craft descriptions that allow your visitor to visualize how the product will improve their life.

eCommerce shopping cart examples from Porter Road, Le Labo, & Idyl
Featured (left to right): Porter Road, Le Labo, & Idyl

Cart

This one is nearly foolproof if you're using a platform like Shopify but it requires mention on a site called A Work of Cart. Shopping carts are purely utilitarian. All that's required is the visitor's ability to see what's in their cart, adjust the quantity or remove items, view the sub-total of their purchase, and click to check out. Carts don't need to be void of personality, but you'll see a pattern with the examples above—they all clearly communicate the current status of the cart and the next step (checkout) is the element with most contrast, indicating that it's the central call to action.

Checkout page examples from Le Labo & Porter Road
Featured (left to right): Le LaboPorter Road

Checkout

Another utilitarian element, checkout is meant to be used without any friction. A visitor is at the bottom of the funnel, the only goal now should be to avoid messing that up. Le Labo (above) is able to use their minimalist aesthetic throughout their checkout process since it doesn't get in the way of usability. Porter Road takes a more scaled back approach by only including a swath of their off-white brand color to the right of the screen. Using a Shopify store gives you an even more familiar structure by default (Porter Road, right, uses Shopify). It's likely that anyone who's made a purchase online has seen this checkout form before—use that to your advantage.

Key concepts

home page wireframes showing similarities between popular website layouts

Familiarity

Like a familiar face in a crowd of strangers, recognizable design patterns help people feel more comfortable on sites they've never visited. Research conducted by Google in 2012 showed that, as long as they weren't too visually overwhelming, websites with a familiar structure were rated nearly 50% more aesthetically pleasing by visitors. Google also found that this assessment was made by participants within 1/20th of a second. [2]

home page wireframes showing areas of the page where aspects of a story are told

Storytelling

How you tell the story lands squarely in the field of creativity, but where the story is told falls on your structure. Conversations, especially with strangers, generally follow a similar pattern—an introduction, some background, searching for similarities, and so on—that we all follow to make these interactions more fluid. Think of your website as a conversation. Captivating your visitors gives you time to build credibility and earn their admiration.

Footnotes

[1] Statista—Car Models Since 1990

[2] Google—The role of visual complexity...