When did you last shop online?
Had you been consciously thinking about the design of the shopping website? Probably not. The design was doing its job in a subtle fashion, but it wasn’t demanding your attention.
It was quietly making products to shine themselves, and which ultimately helped you to make your purchase in the best and smooth way possible.
Now, think about the opposite case – when was the last time you had to leave an e-commerce store getting so frustrated, that you had to abandon your shopping mission before you could even reach the cart.
I can almost surely say that the web design was top of mind at that time. Bad design is such an aspect that leaves customers confused and irritated, and costing the business a sale, or sales.
It’s that much important.
You yourself don’t have to be a designer to understand what I mean. It’s just your common sense and your own experience that you have to use.
You definitely have come across good and poorly designed website on the internet, and you know that how bad impact a poorly design website makes, while a good one just stays subtle and let the visitor peacefully do what was intended to.
And when it comes to the online store, where you get sales from, you just can’t go wrong on this one. It’s like having a bad salesman at your store, who loses for sale for you than gaining. Consider your website design as the virtual salesman in your online store.
Also, it’s about functionality as well. Your potential customers don’t want to get lost between the stack of product and finding it hard to find their desired ones
So you want to design your online store to look aesthetically pleasing and also functional as well, and web design has to do with both.
Table of Contents
E-commerce Website Design Best Practices
I know what you’re going through in your mind. You’re saying – okay I got your point, but would you please tell for the sake of good that how do I make my online store look good and functional at the same time with web design?
You’ll be thanking me in a minute because this time I had experts to say it for me. I had spoken to 7 e-commerce industry experts that include designers, Shopify Experts, merchants, photographers, and the talented design teams here at GoGetSpace.
I’m thankful to them that they shared their years of experience with me to help curate the best tips, advice, and examples to help e-commerce merchants and newbie designers build brands on thoughtful and smart design.
Here are the e-commerce design best practices they recommend –
Mark Perini – Designer, Founder, Icee Social!
The first thing Mark does do when he meets with a new design client is he asks the client What he wants his customers to feel when they first visit your site!
Mark says it’s such a question that at first, could inevitably set the clients a little off axis. But it’s vitally important, as he thinks or feels. Mark insists that tools and implantation are secondary, first, the approach must be set.
For example, say you’re a fashion brand, then you might want your customers to feel inspired by the aesthetic. Or you could be a toy company that wants their people to feel happy or excited.
But there’ll be a completely different approach if you’re an accounting software producing company. This time you want your people neither to feel inspired or excited, but to feel secure or understood.
So first set the approach, and then make sure that emotion or feeling or approach is present throughout your entire site.”
Mark also shared some of the most common design mistakes that he had noticed on e-commerce stores.
The biggest mistake Mark ‘remarked’ is, he has seen information overload in some e-commerce website, and Mark says that is an absolutely terrible thing to do.
He also dictated where this problem comes from. It’s true that we all get tempted to showcase everything we have in our arsenal, be that the backlog of every product we’ve ever made or be that a plethora of information.
We’ve got to avoid both of these.
Now there are actually some customers that are interested to see the entire history of your brand. But the number of such people are very low. So it’s better to sort out your top performing or selling products and then you want to give them the place of honor on your site.”
Alright, with all these insights shared, I wanted Mark to point out one of his favorite e-commerce websites, from obviously the design perspective. I insisted Mark to specifically point out what makes that website great and also what can we take away from it?
So Mark pointed his finger towards Pin paper Press, which is his one of the favorite recently launched e-commerce websites. For the reason of it being his favorite, he tells that he loved this design because it takes something which is extremely complex and digital but it still manages to look quite simple and even human.
The website introduces you to the brand right from the homepage, and everything important is placed above the fold so that the critical information is conveyed within the first three to four seconds of landing on the page.
Helen Tran, Design Lead, Shopify
Helen straight away points out the very known fact that Consumers usually are not able to articulate why something isn’t correctly designed but surely they can feel it when something isn’t done as it was intended to do.
The e-commerce industry is currently shifting towards serving niche markets and it is the demand of these markets that sellers understand their nuanced desires and needs.
Helen states that great design reflects values and feels personable as well, and people surely tend to resonate with that.
I asked Helen when merchants need to hire a designer, what should they consider? What are the questions that they should ask?
The first advice Helen passed is to first be sure about what you need.
More seasoned designers are usually able to design anything, not caring about the medium, while novice designers usually focus on one.
If you’re looking to pivot a company’s image or do brand redesigning, you need to look for someone who’s seasoned. But If you need to do a website or an app, you’re looking for someone with that specific skill-set.
Just like Mark, I asked Helen only to remark and me about her favorite e-commerce site, again from a design perspective. I also wanted to know What makes it great?
This time, Helen mentioned the name of Milk Makeup that she thinks stands out to her. Though it was not her project, she still appraised it a lot.
Helen dictated that the best think Milk Makeup did is understanding their core demographic and variety of their consumers.
Many of the makeup companies do a quite poor job across the board. Usually, the consumer gets shown a product photo and a color swatch.
The consumer then supposed to (what companies expect) understand how the makeup is going to look on their skin. It’s pretty much asking for industry-level knowledge from a consumer who is not supposed to have industry-level knowledge.
Milk Makeup, on the other hand, offered its products hand-in-hand with education (as they offered looks instead of shopping by the product simply) and then also supplemented it with videos which are included in the product page – ultimately showing how their products work on different skin tones.
This little technique could get quite a large number of conversion as marketers say – “nobody cares about your product, it’s the benefit they care about that they’re supposed to get from the product”. And exactly that’s what Milk Makeup did.
Josh Williams, Partner, W&P Design,
People’s digital attention spans are day by day growing shorter with so many distracting elements, so you need to be clear, concise and engaging straight away in your brand’s message – Josh says.
From the very moment of someone landing at your e-commerce store, they should be made to know where they have arrived and want to stay. This basically depends on three key branding and UX elements –
●Have a hook: To start with, answer the question ‘Who are you?’ and then you want to hit them with the quick, short, punchy answer right when they arrive at your store.
●You want to Make it easy: Apply the best UX practices to your online store. Customers’ expectations for online shopping experience have gone up with the number of quality online stores providing a great experience. So you need to make your way to meet them without compromising your brand’s image.
●Be consistent: The last thing you want to make sure is consistency in your shopper’s experience through the purchase that subtly keeps pushing with your brand messaging.”
As usual, I asked Josh to Talk about his favorite online store from the design perspective. What makes it great?
Josh told that he loved Huckberry. The reason being Huckberry’s keen ability to tell compelling stories around the brands which they work with.
It’s not easy to pair great content with products. You need to stay careful and alert about bogging down customers with too much of the story behind the products.
An extensive story is always there behind any product or brand, but it is quite up to the e-commerce retailer to parse through the details to reach to the key message, and then, later on, translate that message into a story with a clear call to action for the customer.
Huckberry does a great job with that, and that’s why love it that much, said Josh.
Michael Wong, Designer, Founder of Mizko Media
“Design has the ability to either make or break your online brand” – Michael quotes. It is that important. Your online store is the first point of touch between you and your customers, and as we all know, first impressions matter most.
If it was the early 2000s, You had the chance to get away with a poorly designed online store. However, consumer expectations in recent times have dramatically increased, as well as our attention span has dropped significantly.
That makes you do whatever it takes to really ‘WOW’ a potential customer within a few seconds. So, consider spending a good amount of time, money and energy to make your online storefront look good.
Which is your favorite e-commerce websites, from a design perspective, and why? – I asked!
One of my favorite e-commerce sites is ASOS, probably. The experience they provide is great, and also they have well-priced products (not from a design perspective, though)
●The email marketing campaigns they run are always attention seeking and engaging; with short, sweet and relevant headlines.
●Product images are clear and sharp. And I believe photography has a lot to do with a website’s design. Also, their use of models helps me to visualize what their products look like in context.
●Their website’s loading speeds are great and the web to mobile transition means responsiveness is seamless.
●They’re clutter free providing a stress-free experience, and the website and app are very clear, intuitive and concise.
●They have utilized their data insights through Machine learning very well, always showing me relevant products that I actually would buy. This helps a greater conversion rate.
Greg Moore, Interaction Designer, Google
“One of the most important key things to good design for a solid brand, especially in online, is understanding people or the target market.
Who this product or service for that I’m offering, what value they really want actually, and what will make them they will care about your product over others. It’s a designer’s role to care about those user needs and use them as a toolkit to build a brand the user can trust.”
Which is your favorite e-commerce site and why? – Greg was asked.
“I really like the Nixon e-commerce site. The reason being, they’ve got a great mix of lifestyle and product imagery and they also do a nice job when it comes to suggesting related products aligning with the browsing experience.
They also have an interactive support team (not design related, but appraiseable anyway) on staff ready to answer all of your questions about their products or checkout. Their communication style is friendly, casual, and most importantly they know what they’re talking about!
The checkout flow is simple, nice and clean, and Nixon will often boost your cart with gifts and incentives like a free backpack that keeps you feeling good while shopping.”
Veronica Wong, Designer, Shopify
Before Veronica said anything, I asked her What should an e-commerce owner consider before hiring a designer? What are the questions that should they ask?
“Before you contact a designer, the first thing you want to do is having a realistic budget in mind.
Designers can usually work within the budget constraints you have. If this is your first time of hiring a web designer and you are not familiar with how much your project might cost, ask the designer for their fees and politely ask them to explain it to you.
It’ll help to build trust in both directions.
Since Veronica is a Shopify theme designer, so I asked her that Shopify themes are beautifully designed out of the box and also easy to customize. Why then should businesses still consider working with a professional web designer?
“Shopify Themes are great starting points, but they’re actually designed with the view to satisfy large generalized types of purposes.
Merchants often pick the theme of their liking but end up finding out that it only reaches about 80% of what they expect. Merchants are unique from one to another and offer so various types of products.
It would be close to impossible to design/build themes that suit every single one of them! These are great opportunities to bring in a designer to customize as per your expectations and to think bigger than the themes Shopify offers.
What advice do you have for merchants that are on a tight budget, if they are unable to afford the service charges of a pro?
“Being a DIY-er myself, I’ve always liked to keep my own budgets in the limit by doing things myself. Here are some great resources that could help merchants do that:
●Shopify has freely available resources like the logo designer tool, the Ultimate guide to Product Photography, and online store themes.
●You can make your own logo with Adobe Photoshop or Illustrator, there are plenty of simple DIY tutorials on YouTube and Google.
●Consider Purchasing affordable ready-to-use or ready-to-edit graphic elements from marketplaces such as Graphic River or Creative Market.
Loran Polder, Owner, Old World Kitchen
Loran started with that it was the time when they switched from an Etsy shop to their first website, they realized the direct connection there is between e-commerce design and conversion rates.
Loran and the team switched to Shopify and saw a drastic increase in conversions. For the reason, Loran told that it was mostly related to the professional design of their new site. It definitely helped us to a large extent to build trust with our customers which made their user experience better.
What design choices you made when building your online store and Why you made them? What impact they had on customer experience?
One of the key design element that we’ve always included on the homepage of our website is a slideshow on the top of the page.
I absolutely love this feature as I think it allows us to show in a very short span of time all of the products we are really trying to promote, without the customer ever having to do anything like scrolling or clicking around.
We intend to keep a fairly simple site, and tend to focus mainly on the quality of our product and also the lifestyle photography.”
Did you hire a designer for all that? Did you learn anything from that hiring process?
I had to hire a designer to do one little tweak to the template we used, and everything else I’ve done by myself without any coding.
That is a large deal to me being the owner of a small business that has a small budget. To me, it makes sense that if I know how to do it myself then I have the freedom to change at any time.
Which advice you think are going to help you most? Tell us in the comments below. Also, consider sharing your experience with designing your online store.
