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 Perini
Designer, 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 Tran
Design 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 Williams
Partner, 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 Wong
Designer, 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 Moore
Interaction 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 Wong
Designer, 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.
Loran Polder
Owner, Old World Kitchen
"It wasn't until we made the switch from an Etsy shop to our first website that we realized the direct connection between ecommerce design and conversion rates. We made the switch to Shopify, and literally overnight conversions went up. We knew that it was hugely related to the professionalism of our new site. It definitely helped us build trust with our customers, and made their user experience better."
Talk about some of the design choices you made when building your ecommerce store. Why did you make them? How do they impact customer experience?
"One design element we've always included on the homepage of our site is a slideshow near the top of the page. I love this feature because it allows us to show in just a few seconds all of the products we are really trying to promote, without the customer ever having to scroll or click around. We keep a fairly simple site, focusing mainly on the quality of our product and lifestyle photography."
Did you hire a designer? Did you learn anything from that process?
"I have hired a designer to do one tiny tweak to the template we used, and everything else I've been able to do myself without any coding. That is a huge deal to me as the owner of a small business with a small budget. To me it makes sense that if I can do it myself then I can change it any time, and I have a lot more freedom."
Jordy Heis
Fashion Ecommerce Consultant
"Great design versus good design can be your competitive advantage to help your business grow."
Talk about one of your favorite ecommerce websites, from a design perspective. What makes it great? What can we learn from it?
"Cienne has a great site, driven by well-styled photography, coupled with an on-trend colour palette. Large product images on product pages appear in a familiar “scroll down” sequence, mirroring the way their audience is used to behaving on social platforms like Instagram and Pinterest. This offers a lesson for other brands to consider adopting ways of design or functionality that compliment their audience's existing behaviour.
I also really like the unique, prominent placement of their referral program. These programs are usually squirrelled away in a footer menu somewhere, but Cienne has a dedicated header menu item intriguingly titled 'Get $25'."
What are some UX best practices for ecommerce?
"Online stores need to have a blend of both content and commerce to cater to new and returning visitors. New customers will often want to engage with your brand's story to see if it aligns with their own values and beliefs, making your About page, lookbook, and blog powerful storytelling assets to build online trust and credibility.
Returning customers who already know and trust your brand have different needs and require search, product filtering, and deeper navigation functions so they can get to the checkout with the least possible friction."
New customers will often want to engage with your brand's story to see if it aligns with their own values and beliefs.
Amy Stringer-Mowat
Designer, Co-Owner, AHeirloom
"Good design can really mean instant credibility from both the front end and the back end of an online shop. Shoppers are drawn to professional looking pages—it gives them confidence in the product."
Did you hire a designer? If so, what was that experience like? Would you recommend it to others? Did you learn anything from that process?
"We did hire a designer to update our website in 2014 and now we are in the midst of a re-launch. I would definitely recommend hiring one as they saw the way to total re-brand that we didn't even realize we needed. When you are working daily on building an audience and getting traffic it takes a trained set of eyes to see your work in a fresh light. A professional designer is trained to see your brand as something bigger than your day to day work!"
Michael Brewer
Designer, Shopify
"Design is a language of quality. It’s important to portray the right vibe to your audience."
What should merchants consider when hiring a designer?
"Working with a designer who understands and believes in your business is key. Making a beautiful store is one thing, but creating a quality brand is another. That is what a professional does."
What advice do you have for merchants on a budget, if they are unable to afford the services of a pro?
"Quality design doesn’t always need to be expensive. Simple pre-made graphics and relatable copy can go a long way."
Design is a language of quality.
Anthony Spallone
Administrative Director, Arctic Grey, Inc.
"You can have the most beautiful design in the world, but if it's difficult to use, potential customers will get frustrated and leave your online store almost instantly. To ensure the best conversion rates through design, it's important to create clear and concise calls to action. I recommend having one main call to action per screen view, meaning one button per full screen scroll whether you're on a desktop or mobile device."
Talk about one of your favorite ecomm websites, from a design perspective. What makes it great?
"With much reluctance in terms of having such a cliché choice, I'd have to say Apple has the best designed website. There are several things that make this site great:
Apple knows what to feature and when. The home page has a smooth slideshow featuring products based on popularity of sales. The home page is no more than a half scroll which almost forces you to click on something to go deeper into the site. This helps to avoid bounce rates which will help with your google ranking.
They make it very simple to get anywhere on the site within a few clicks. The menu bar is uncluttered and direct. When people are shopping online they tend to know what they're going to be purchasing, so having an easy menu to navigate anywhere quickly is key.
The quality of their product photos is just amazing. Most of their images are 3D renderings which allow for the best quality shots every-time.
The way Apple lays out the options to customize your order is fantastic. They show you exactly what you're purchasing using the actual product images, instead of swatches.
Apple’s use of parallax scrolling is like no other site. You see the glare off the product moves as you scroll down drawing you to focus even more on the product."
Amy Fronczkiewicz
Photographer and Shopify Expert
Why is photography important in ecommerce design?
"Ecommerce businesses should never underestimate the importance of high quality photography of their products. Simply put, great photography sells merchandise and will boost success rates. Having powerful visual imagery on a website will not only attract customers and encourage them to purchase products, it also strengthens a brand image in the marketplace."
What are some ecommerce sites that use design and photography in interesting ways? What can we learn from them?
"Glossier, Hiut Denim, and Shwood are all very successful at combining both photography and design that engage customers and create a unique style for their look. Consistent quality photography establishes a brand’s identity and features product at its best. Through their visual content and design, these companies effectively create connection to their customers."
Vinny Galiano
President and Project Lead, Minion Made
"Your customer will know within the first few seconds if they feel comfortable buying from you. Why buy from you when they know industry leading sites are secure? You must create a sense of security for your customers, giving them an overwhelming confidence in purchasing with you first and foremost.
Create a simple, user-friendly experience. Overwhelming content, menus, and imagery will lead to overwhelmed customers. A clean and efficient online experience will maximize on your chances of conversion. Focus on formula, then create a design to transcend your store, and parallel your branding."
Talk about one of your favorite ecomm websites, from a design perspective. What makes it great?
"Mother Mantis is an online shop that we appreciate for its design. Even with over 16,000 products, the site's design remains relatively simple through hidden menus or hamburger menus, clean and organized filtering, and mega menus while also having conversion optimization elements such as ajax cart dropdown for a simple purchasing process—all bundled up in a site that has a well-branded design that is cohesive on all devices and pages."
Overwhelming content, menus, and imagery will lead to overwhelmed customers.
Jeremy Watt
Co-Founder, Province of Canada and Up Later Than You
Talk about some of the design choices you made when building your ecommerce store. Why did you make them? How do they impact customer experience, etc.?
"Our overall approach for design has always been minimal without sacrificing detail. We know our customers like a clean aesthetic but we always want to provide them with all the product education they need so they understand what they're purchasing. This blend provides a somewhat boring experience but it's also a gimmick-free experience.
Customers see a beautiful product shot, read the product details, and hit the add to cart button. The side benefit of this approach is a small percentage of customer questions and a small percentage of returns."
Did you hire a designer? Would you recommend it to others?
"We're lucky—our design team, who are actually our co-founders, are all in-house. If you can swing an in-house design team or at least one in-house designer, don't hesitate to make that hire."
Paul Pritchard
Designer, Shopify
"Design is how you establish trust with potential customers. If they see care in your design, they’ll know your products will follow suit. Trust is key in an online environment where customers can’t test out your products in person and the purchase needs to be made more on faith."
What should merchants consider when hiring a designer? What questions should they ask?
"Define both what you want designed and why you want it. A good designer may think of better ways to address the why. Look at their portfolio, make sure you like it, and ask questions about why they made certain decisions on previous projects. You can get a good picture of what working with them will be like by reading into their answers."
What advice do you have for merchants on a budget, if they are unable to afford the services of a pro?
"Put your time and effort into learning how to improve your product photography, everything else is secondary. Show your products from multiple angles, up close, and in the context they’ll be used. This will make a customer’s decision to purchase far easier."
Put your time and effort into learning how to improve your product photography. Everything else is secondary.
How did ecommerce website design decisions help or hurt your business in the past? Tell us your story in the comments below.