Ultimate Ecommerce Store Design Tips 2021
I’ve designed with load of ecommerce stores over time. I now almost exclusively work on Saas and ecommerce stores. My client sites make a lot and save a lot of money. I’ve been fortunate enough to be involved in almost every aspect of launching a new ecommerce business.
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.
Things that Do Matter
- Product Pages
- Product Images
- Load Times
- Delight With Details
- Social Proof
Things that Don't Matter
- Your Buttons
- Fixed Headers
- Brand vs Conversions
Things that DO matter
Navigation does more than just move people around the site. It’s hard to do well and it never gets enough thought. Though navigation will determine a lot of spend is the easiest item to test and iterate on your site for increase of conversions.
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. In a previous article I explained how 2 store experiences could have quite a different navigation experience in the same industry. Both offer quite different experiences based on product line. One had 5 products, the other over 200. So giving the user a clear case to explore by categories or not is a huge deal in the buying process.
- Make sure the logo clicks to the homepage. You don't need 'home' in the menu bar.
- Breakdown product categories with an image to differentiate types of products easily.
- Make sure stores with a low number of products utilise the space to explain the importance of having a low product number (expertise in product).
Having a very clear product offering that displays why someone should buy, what's included in the offer, who the offer is targeted at with a price point that fits is a customer is the icing on the cake to the ultimate ecommerce store.
With that being said it offers the most amount of optimisation tips.
- Always add the number and rating of product reviews directly under the product name.
- Use product videos to enhance your popular offers.
- Show all descriptions and attributes in the open, don't hide detail behind tabs.
- Utilise dynamic value pricing when you can. An old airline CEO once said you must have 6500 prices for 6500 customers.
- Use After Pay and other financing options is a great way to offer pricing options with easy purchase options.
- Use scarcity when you have low stock or only sell in a certain time period.
- Don't use this just to build scarcity when you have 100 items in stock. That's just lying and customers can sniff it out.
- When a product is 'out of stock' make sure a notification option for restocking is present.
- Make sure 'Add to Cart' button navigates straight to cart page or 1-page checkout.
- In the CSS change font-size to 16px or higher for body text.
- Add sizing guide as photo for clothing and apparel brands.
- For easy reading use hex codes like #333, #444 or #555. A little off of black. #000 is usually a little abrasive for reading a lot.
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.
Ugmonk.com 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 easy to get around you’ve won 70% of the battle.
- Utilise photography if budget is an issue. Good looking product is no.1
- If you choose one item to start optimising in your ecommerce business start with photography. You can then focus on getting out of obscurity. You can't do that without good product photos.
- Videos are a great option in your product image gallery. Especially with expert influencers in the field of what you're selling.
The truth is most of the time people don’t care what your site looks like. If the information is compelling and it’s friction less 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.
Getting your load times performing well is a hard tasks for your developers, especially when you’re insisting on having 12 unnecessary plugins or app extensions on the page.
- Make sure your open source or licensed ecommerce platforms is utilising adequate hosting
- Quick View does the opposite of what your platform wants. It actually provides a slower experience when a customer wants to learn a lot about a product (adds a lot of extra code).
- Platforms users: Contact the platform or use experts to advise if speed becomes an issue.
- You don't need fancy new frontend frameworks like React or Vue. They are the opposite of what you need.
- My frontends are a super optimised Sass package to delivery style and speed.
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 is plain hard.
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).
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.
- Don't start with a blank slate. Start with the basics and write down a list of must haves.
- An Impact/Effort board will help prioritise your above list.
- White space, good typography with adequate line-heights paired with a perfect spaced layout provides a good experience and usually a good ROI.
Delight With Details
Now that you've simplified you store to be fast and simplified how can we delight the user. This could just be a clever piece of visual patterns or fun illustration. These make the brand more differentiated, memorable and it improves the user experience.
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.
- Use Creative Market to find some subtle hints of style.
- Dribbble has the latest visual trends though it's more of a colouring book of styles you can lift for your own projects sparingly.
- When you have no creative direction, utilise the conveyor belt method of content flow, copy if one of the most important details that can entice a user. The converyer belt method goes like this -> Pain, dream, fix, buy now, social proof, testimonials, about the company, buy now.
The thing with adding social proof is it has to be genuine. Too many people just shove quotes in and that's 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.
- Wait until you have a few before you publish them as a product with 0 reviews is worse than not showing reviews at all.
- Social share links aren't really necessary
- Share links to publications and PR you've received or been featured in.
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.
- Optimise font size, layout and white space for mobile.
- Make sure buttons are correctly styled on mobile as certain browsers attract some side effects.
- Be cautious of having fixed items like chat widgets, alerts, and sticky headers. Make sure cart is the priority if you want to go with anything fixed.
Things that DON’T matter
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.
- If a user complains about the site looking 'too mobile looking' they are an outlier. If a lot of users do then have a go at desktop.
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. You need to get out of obscurity well before you test a button for it's text, colour or size.
If you A/B test your pages with different buttons 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).
- Stick to 'Shop Now' for most important copy for any buttons that aren't directly adding to cart.
- When testing button colours ever, just use some analogous colourways to test. They usually don't change what's implied too much. Red is bad.
Your Fixed Header
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.
- People will scroll up if they need to. They want to know about the product you are selling so let them have it.
- If you fix a header leave it transparent so the cart is easily accessible.
Brand vs Conversions
A brands ability to differentiate from it's competitors is far more valuable then a few small upticks in conversion.
I implore designers to have a conversion and measurement practice but I also think a brand manager can do a lot more over time to increase revenue around being different and getting out of obscurity.
So it's a trade off that pulls from one another, brand is a 30,000 foot view approach and conversion rate optimisation is a hands in the dirt approach, testing what works in the short term.
Did You Enjoy This?
Then consider joining the other conversion curious getting the newsletter. It's a provocative look into marketing and converting customers.