Think back to the last time you bought something online.
Did you consciously think about the design of the site? Maybe not. If the design was doing its job, it wasn’t demanding attention. It was quietly allowing the products to shine, and helping you to make your purchase in the most seamless way possible.
Now, think about the last time you left an ecommerce store frustrated, abandoning your shopping mission before even reaching the cart. I’ll bet design was top of mind that time. Bad design is obvious, leaving customers confused and irritated, and costing merchants a sale.
It’s that important.
I’m not a designer. A little art school, and a lot of years of consuming culture have given me an appreciation for great design. But I can’t always put a finger on why it’s great. Or how the designer arrived at each aesthetic decision.
Ecommerce design involves more than just how the website looks—it considers how it works and the flow from one place to the next, how it tells a story and the mood it evokes. Ecommerce website design cares about the marriage between form (true-to-brand visual decisions) and function (a simple-to-navigate experience).
Ecommerce Website Design Best Practices
I spoke to 15 industry experts including designers, photographers, Shopify Experts, merchants, and the talented design teams here at Shopify. They lent me their years of experience to help curate the best tips, examples, and advice to help ecommerce merchants and newbie designers build brands on smart, thoughtful design.
Here are their words:
 |
Mark PeriniDesigner, Founder, Icee Social |
"The first thing I do when I meet with a new client is to ask, “What do you want customers to feel when they come to your site?” It’s a question that inevitably sets clients a little off axis at first, but it’s vitally important. If you’re a fashion brand maybe you want people to feel inspired, if you’re a toy company maybe you want people to feel happy or excited. On the other hand, if you’re an accounting software company maybe you want people to feel secure or understood. Make sure that emotion or feeling is present throughout your entire site."
What are some of the most common design mistakes you’ve noticed on ecommerce stores?
"By far and away the biggest mistake I see in ecommerce design is information overload. You’ll be tempted to showcase everything you have in your arsenal whether that be a plethora of information or a backlog of every product you’ve ever made.
While it’s true that there are going to be customers who want to see the entire history of your brand, those people are few and far between. Figure out what your top products are and give them a place of honor on your site."
Talk about one of your favorite ecomm websites, from a design perspective. What makes it great? What can we learn from it?
"One of my favorite, recently launched ecommerce websites that I worked on is Pinpaper Press. The reason I love this design is that it takes something that’s extremely complex and digital and still manages to come off simple and even human. Right from the homepage you know what the brand is about, and everything important is conveyed within the first five seconds of landing on the page."
|
Helen TranDesign Lead, Shopify |
Consumers may not be able to articulate why something isn't well designed but they can feel it when something isn't done with intention. We are seeing the industry shift towards serving niche markets and niche markets demand that sellers understand their nuanced needs and desires.
Great design feels personable and reflects values. People resonate with that.
What should merchants consider when hiring a designer? What questions should they ask?
Be sure about what you need first. More seasoned designers will be able to design anything regardless of medium while novice designers tend to focus on one.
If you're looking to do a brand redesign or pivot a company's image, you're looking for someone a bit more seasoned. If you're looking for someone to do a website or an app, you're looking for a designer with that specific skill-set.
Tell me about an ecommerce site that you love, from a design perspective. What makes it great?
Milk Makeup stands out to me. I think they did a fantastic job understanding their core demographic and how varied end consumers are.
Most makeup companies do a pretty poor job across the board. Usually what the end consumer sees is a product photo and a colour swatch. The consumer is then expected to understand how the makeup will look on their skin—it's asking for industry-level knowledge from a consumer who has no reason to have industry-level knowledge.
Milk offered its products hand-in-hand with education (offering looks instead of simply shopping by product) and then supplemented it with videos on the product page showing how their products work on different skin tones.
Great design feels personable and reflects values. People resonate with that.
 |
Josh WilliamsPartner, W&P Design, powered by Shopify |
"Designing a new ecommerce brand is a unique challenge, distinct from other types of branding mediums like packaging or print. People’s digital attention spans are growing shorter, so you need to be clear, concise and engaging in your brand’s message. From the moment someone arrives at your ecommerce store, they need to know where they have arrived and want to stay. This comes down to three key branding and UX elements:
- Have a hook: answer the question 'Who are you?' and hit them with the quick answer right when they arrive to your store. Be as punchy and concise as possible.
- Make it easy: read up on best UX practices and implement them ASAP. Customers’ expectations for ecommerce experience have gone up and you need to find a way to meet them without dumbing down or compromising your brand’s image.
- Be consistent: make sure your shopper’s experience through the purchase process is consistent with your brand messaging."
Talk about one of your favorite ecommerce websites, from a design perspective. What makes it great?
"I love Huckberry for their keen ability to tell compelling stories around the brands they work with. Pairing great content with products isn’t easy—you need to be careful about bogging down customers with too much of the story behind the products. There is always an extensive story behind any brand or product, but it’s up to the ecommerce retailer to parse through the details to get to the key message, and then translate that into a story with a clear call to action for the customer. Huckberry does a great job of that."
 |
Michael WongDesigner, Founder of Mizko Media |
"Design will either make or break your ecommerce brand. It’s that important. Your online store is the first touchpoint between you and your customers, and first impressions matter most.
You could probably get away with a poorly designed store back in the early 2000s. However, today’s consumer expectations have dramatically increased, while our attention span has dropped significantly. This means you have to do whatever it takes to really 'WOW' a potential customer within a few seconds."
Talk about one of your favorite ecommerce websites, from a design perspective. What makes it great? What can we learn from it?
"ASOS is probably one of my favourite ecommerce sites. Not only do they have well priced products, but the experience is great:
- Their email marketing campaigns are always engaging and attention seeking; with short and relevant headlines.
- Product images are high-res and clear. The use of models helps me visualize what their products look like in context.
- Loading speeds are great and the web to mobile transition is seamless.
- Lack of clutter: the website and app is very intuitive, clear, and concise.
- Machine learning: they have utilized their data insights very well, always showing me relevant products that I actually would buy."
 |
Greg MooreInteraction Designer, Google |
"One of the keys to good design for a solid brand, especially in ecommerce, is understanding people (read: target market)—who this product or service is for, what they really want deep down, and why they will care about your product over others. It's a designer's role to take those user needs and use them as a toolkit to build a brand the user can trust."
Talk about one of your favorite ecomm websites, from a design perspective. What makes it great? What can we learn from it?
"I really dig the Nixon ecommerce site. They've got a great mix of lifestyle and product imagery and do a nice job of suggesting related products so the browsing experience feels exploratory with no dead ends. They also have an amazing support team on staff ready to answer questions about their products or checkout. Their communication style is casual, friendly and most importantly they know their stuff! The checkout flow is clean and simple, and Nixon will often will boost your cart with incentives like a free backpack to keep you feeling good while shopping."
One of the keys to good design for a solid brand, especially in ecommerce, is understanding people.
 |
Veronica WongDesigner, Shopify |
What should merchants consider when hiring a designer? What questions should they ask?
"Before you contact a designer, have a realistic budget in mind. Designers can often work within the constraints of the budget you have. If this is the first time you are hiring a designer and you are unfamiliar with how much your project might cost, ask the designer for their fees and politely ask them to explain it to you. It's important to build trust in both directions."
Shopify Themes are designed to be beautiful out of the box and easy to customize. Why then should merchants still consider working with a professional designer?
"Shopify Themes are fantastic starting points, but they're designed in order to satisfy large generalized types of merchants.
Merchants often pick the theme they like best but find it only reaches about 80% of what they want. Our merchants are so wonderfully unique and offer so many different types of products. It would be impossible to make themes that suit every single one of them! These are great opportunities to bring in a designer to think bigger than the themes we offer."
What advice do you have for merchants on a budget, if they are unable to afford the services of a pro?
"Being a DIY-er myself, I've always tried to keep my own budgets low by doing things myself. Here are some resources that could help you do that:
- Shopify has great free resources like the logo generator, the Ultimate DIY Guide to Product Photography, and online store themes
- Make your own logo with Adobe Illustrator: there are lots of simple tutorials on YouTube and Google
- Purchase affordable ready-to-use or ready-to-edit graphics from marketplaces such as Creative Market or Graphic River"
Before you contact a designer, have a realistic budget in mind.
Source: Dayna Winter 26/03/2019, https://www.shopify.co.id/blog/207109257-ecommerce-website-design
