How To Design Your E-Commerce Store? Here's What Matters

Liam Tucker

•

Published: January 8th, 2019

First off, a quick intro. I’m an independent designer/front-end developer and general tech entrepreneur kind of a guy (hard to find a label these days) based out of London who’s been working with brands and startups in the e-commerce space for about the last 10 years.

I’ve worked with both huge brands like Netflix and Mulberry through to early stage startups. I now almost exclusively work on Shopify stores (not by design, it’s just the best solution out there for big or small businesses alike). My clients sites generate millions of dollars per year and I’ve been fortunate enough to be involved in almost every aspect of launching a new e-commerce business, something which I’m now applying to my own ventures.

I’ve learnt a lot about what‘s important and what’s not, and over time I’ve come to understand where to focus your efforts when designing or building your store.

A lot of the time many of us get hung up on things that don’t matter. It’s natural as these ventures are our babies and we attach meaning to them that goes beyond logical thought.

Disclaimer: Before I go into the list it’s important to know it’s a never a one size fits all solution. You need to cross reference this with your market, your ambition and the type of company you are building. Also the landscape changes, consumer habits change and so you need to adapt accordingly.

Things that DO matter

To me this is the single most important aspect of any site. Navigation does more than just move people around the site, it educates them on your product line and what they can expect as a first time visitor. It’s hard to do well and it never gets enough thought.

how-to-design-your-e-commerce-store-here-s-what-matters

Bellroys navigation does a great job of educating on the product range as well as a navigation.

You want to be clear with how your products are grouped, sometimes that even means changing the way your SKU’s are set up a little.

Imagery

In a place where somebody can’t physically see and touch your product, great product imagery is absolutely key. This is literally the difference between someone buying your product and not. If I only had a small budget I would spend it all on getting good imagery.

Allbirds.com have great product imagery that’s dynamic and fits with their brand ethos. They also include product video which is another great aspect if you have the resource.

Ugmonk.com also is well known for it’s great product imagery. It has clean images on grey backgrounds and lifestyle imagery combined (hint: this type of layout works really well if you want to use a mix of imagery styles)

The truth is most of the time people don’t care what you’re site looks like. If the information is compelling and it’s frictionless to move around you’ve won 80% of the battle.

Load Times

One of the single biggest impacts I see on conversion rates are the load times. Your site can look great but if it hangs for a minute it instantly registers as a negative experience. Don’t blame the ‘impatient generation’ either because we all get frustrated.

The truth is most of the time people don’t care what your site looks like. If the information is compelling and it’s frictionless to move around you’ve won 80% of the battle. I’ve found that the visual design is more about brand consistency than anything else.

Make sure you’re testing your site using something like Google PageSpeed Insights

Getting your load times performing well is a hard tasks for your developers, especially when you’re insisting on having 3 videos autoplay on the page and animations all over the place.

Which brings me onto my next point…

Simplicity

Simplicity is hard! Most client discussions start with ‘lets just keep it clean and simple’ because people correlate simple with easy and fast. The truth is simple takes time. We all have a tendency to overcomplicate things so the process is usually about starting with everything and carefully reducing until you have only the essentials remaining.

To me Nike always do a great job of this. When you look at their pages there’s only the information you care about and no ‘fluff’ (it helps when you’ve already built up that brand equity).

Another great example for me is Harrys.com. On their collection pages they combine titles and prices onto one line and are able to include all the product information in such a small space. When I scroll down the page I can process the information easily but also understand exactly what’s in each product. It’s all the information I need but in the simplest way possible. It seems simple but it’s hard to get this right.

Can you remove all that copy and explain it in a single image? Do you need all that content there or is there a better way to explain it? Be ruthless on what you can combine and what you can remove all together.

Delight With Details

Look for low effort ways to add a small smile. This could just be a clever piece of micro copy or a fun illustration. These register as micro-positive experiences which in turn make the overall experience memorable.

Casper does a great job at small details. Subtle things that you may not notice but you really feel the brand as you move through the site.

The thing with adding social proof is it has to be genuine. Too many people just shove quotes in and thats it, but the reality is we know you’ve cherry picked them or even made them up. Let the customers speak for themselves without forcing it too much.

Utilise reviews if you can. If you’re using Shopify there are plenty of easy options here such as Yotpo or Judge.me which will send out automated emails asking your customers to review. My tip though is wait until you have a few before you publish them as a product with 0 reviews is worse than not showing reviews at all.

Mobile, Mobile, Mobile

Because nobody is using a laptop except you!

Not many people do mobile well but Nike and Warby Parker have pretty streamlined mobile experiences.

Mobile is harder to get right than you think. You need to strip it down to it’s simplest form, but in doing so you can also end up with a barebones desktop site so it’s a tough balance to crack.

Things that DON’T matter

Desktop

Ok so this isn’t strictly true and Desktop still has a role to play among certain audiences. But from a consumer perspective it’s dying. In 2018 I’ve seen a huge spike in traffic among all my B2C stores that now puts mobile in the 60 — 90% range.

Because we spend all our time on our laptops and that’s the device we are looking at it on, it’s easy to get caught up thinking it’s important. In most cases it’s only you and your team that are looking at it on that device.

Of course this advice has to be predicated on your audience so check that first before making any rash decisions. But if we follow the 80/20 rule (where 20% of your effort generates 80% of your results) then desktop often doesn’t warrant much of our focus.

The color of your buttons

A contentious issue. Ever since amazon published their UX studies detailing how changing their button color earned them millions of extra dollars in revenue it’s been touted as a kind of mantra.

If you A/B test your pages with different button colors you will likely find a winner but it will also likely be by a small margin (of course you need to make sure your call to actions are visible and easy to spot regardless).

I feel it’s one of those issues people love to discuss because it’s easy and measurable but the reality is it’s not as important as you may think. Sure, test it but don’t get hung up on it.

It’s annoying, it gets in the way of things people are trying to look at. If you think it’s useful make it either very small or show only when the user is scrolling up (you can guess they are trying to get back to the top then).

As owners we tend to love features like this because we think ‘oh they’ll be able to easily get to another part of the site’. If you’ve done a good enough job on your product/brand then scrolling up a little will be no issue.

—

The Importance of Brand vs Conversions

I didn’t want to finish this article without touching on this issue. In my opinion too many people get hung up on their conversion rates. Now while I think it’s hugely important it’s not the only aspect you need to consider.

Moving the conversion rate slightly can give you short term success but building a brand is what will give you longevity. A lot of times decisions are made to sacrifice brand value for immediate conversions. While I understand that desire is overwhelmingly strong you need to find a balance between the two.

Here’s the TLDR version:

Simplify Simplify Simplify
Make your product grouping and navigation as simple and easy to understand at a glance as possible
Concentrate on Mobile, focus less on Desktop (unless you’re B2B)
Make sure the site loads fast and is a smooth experience throughout
Add small details for no other reason than they make you smile
Showcase your customers in a genuine way
Stop worrying about all the other stuff

Thanks for reading. I hope there’s some nuggets in there that you can take away. If you’d like any advice or want to chat please hit me up on twitter or via my website.

Add Text Section Add Story Add Idea Add Business Add Tool