Ecommerce Web Design: How to Stand Out
The key to great ecommerce web design and making your store stand out isn’t so much about being outrageous with your design, it’s about 2 key elements: usability and aesthetics. Making your site easy to use requires simple functionality and an uncomplicated design.
Making Your Site Easy-to-Use for Short and Long-Term Gains
Sure, you can have an eCommerce website that is full of features that make the site “pop”, but do the features in your eCommerce web design genuinely help your users achieve their goals?
The aim of making your eCommerce store stand out is to generate revenue from new customers, but not forgetting that you want them to return and become long-term customers.
Cue, User Experience design. This is a key element in helping your store to stand out.
Your website UX has a big impact on securing those return customers
So, providing your eCommerce store is easy for your customers to navigate and find what they want, they’re more likely to come back. It’s that delightful user experience that will make your site stand out in your customer’s minds, and they’ll be more likely to return.
Before You Design, Think Like Your Users
Before you completely redesign your website or modify a specific feature, understand your user’s (customers) goals first and design accordingly.
Ask yourself, “If I was a customer of this store what would help me buy products?”
Get in the shoes of your users and ask yourself, “If I was a customer of this store what would help me buy products?”.
Because if you want your eCommerce website to stand out, you shouldn’t just design for the sake of it. Every element of ecommerce web design should be focused on helping your users buy more products.
The more you help your users achieve their goals, the more you’ll achieve your ecommerce goals (i.e. more revenue and profit).
Your Ecommerce Website is a Tool, Not a Toy
Your site is not a toy, it’s a tool. A tool that can make the process of buying something easy.
Help your customers achieve their desired goals with great usability
Whatever platform you choose to build your site in, whether it be WordPress, Shopify, Wix or another ecommerce builder you need to think of your eCommerce website as the most useful tool your customers have ever had.
They’re not on your site to be entertained, they’re not there to play. They have a job to do, which is to find a product they need, pay for it, and have it delivered to their home.
Making the process of buying something online ‘easy’ is also known as ‘usability’.
When you assess the usability of an interface (website), you’re finding out how easy it is for your users to use.
The word “usability” also refers to methods for improving ease of use during the web design process.
So when you want your eCommerce store to stand out, usability is your best friend. And will guide you in building a great tool for your customers.
Before you choose which platform to build your ecommerce website on, look at what the platform offers. How customisable is the platform, does it integrate with other platforms for an omnichannel marketing approach?
These are good questions to ask yourself when choosing between the likes of Woocommerce or Shopify marketing tools.
Ecommerce Web Design: Usability and Aesthetics
A huge percentage of eCommerce websites look great but still fail at delivering an easy-to-use experience.
Standing out for your design alone isn’t going to please your users in the long run. They might see a site that looks great, that “stands out”, but if the usability of the site is poor, then it doesn’t matter how great it looks because you would have lost a sale.
On the other hand, if we design boring-looking sites that are easy to use, then you may lose out too.
So, you’re going to need both usability (ease-of-use) and an aesthetically pleasing site to get users buying from your site..
“Aesthetic designs, in general, look easier to use and have a higher probability of being used, whether or not they actually are easier to use.”
Article: The Aesthetic-Usability Effect
For example, the well-known brand Carhartt WIP has a good-looking site. It’s very minimal and on-brand, but lacking in usability.
The Carhartt WIP isn’t the worst site in the world, but compare the experience to ASOS (who also sell Carhartt WIP) and the experience of buying is both easy-to-use and looks great.
So, who do you think is getting better conversion rates?
Who do you think stands out the most and who will users return to? Probably ASOS (sorry Carharrt).
Carharrt and ASOS Comparison
To highlight how the ASOS user experience is optimised in a better way than Carharrt WIPs, see the comparisons below. This is just based on 2 key areas of their ecommerce site.
Carharrt WIP Category Page
Without introductory text, customers can easily get lost with where they are
- A lack of introductory text in the category page, the image is a clue as to where I am in the site. However, just one picture above the fold doesn’t give me a lot of information about the section of the site I’m in.
- The featured product below the main image takes me to the ‘Tshirts’ category. This is ok, but I’d expect to see individual products here so that I can dive right into buying a product (if I want to at this point)
ASOS Category Page
- Category and product information is featured above the fold. Immediate information such as the category title, sorting and filtering controls (give me clues that there are multiple products) and ‘220 styles found’ informs me of how many products to inspect.
- The 2 products featured before the fold allows me to immediately jump to products, add them to the wishlist and highlights pricing info.
Carharrt WIP Product Page
Carharrt are lacking the human element with their product page photography here
The product image is ok, but it’s just a flat lay photo and doesn’t give you an idea of how it will look, feel and fit when it’s being worn.
The product title, pricing info and colour options offer some immediate information. However, there’s nothing about delivery and returns until I scroll beyond the Add to Cart button. Interestingly, they do feature the word ‘Free Shipping’ on the Add to Cart button, which I think could be useful
ASOS Product Page
- The first product image is great, you can see the texture and the type of fit – giving the user the feeling of them trying it on. This is a great example of usability and aesthetics working together.
- Without scrolling, ASOS tell me the product name, price, free delivery and returns, plus the fact that I can pay in 3 instalments using PayPal. This means that I can not only calculate the entire cost of this product (including shipping), but I can also pay interest-free over 3 months. This micro information is incredibly important and useful and offers the type of help users need in order to make a decision to buy or not to buy.
It’s Not Just What it Looks Like, it’s How it Works
When it comes to creating a stand-out eCommerce web design, its usability is as important as aesthetics. It isn’t enough to have a site that looks incredible, it has to have the functionality to match.
A great tip is to start with a really detailed wireframe of the website. Plan out every move your user can make, and make sure they get closer to their goal of purchasing something with every click.
When you have the usability of your website planned out, then you can start designing, not the other way around.
Instead of trying to combine the functionality and design aspects of the website in one step, wireframing first will allow you to cover each of these elements in turn in much more detail.
Wireframes are also great for user testing and getting useful feedback early in the process.
The best high-converting eCommerce websites are both beautiful and functional. The design needs to integrate with the path your visitors will want – and should – take.
Design is not just what it looks like and feels like. Design is how it works. – Steve Jobs