Tricks for Creating an eCommerce Website Design that Performs

It’s estimated that there are up to 24 million eCommerce websites in the world globally (and counting). Yet, of all of these websites, less than 1M sell more than $1,000 per year.

This year (2022) the eCommerce industry is predicted to be worth $5.55 trillion with 24.5% of total purchases expected to be made online.

While there are many factors that go into a great business that drives a steady revenue, an important element to help differentiate your business online is through great eCommerce website design.

But, what exactly is eCommerce website design?

eCommerce websites, by definition, are websites that allow you to buy and sell products. This includes businesses that sell through well-known platforms like Shopify or Etsy particularly those focusing on ecommerce marketplace development. The design part is focused around everything from the colors and images you choose, to the user experience and overall marketing design, which includes:

• Call-to-actions (CTAs or buttons)
• Website navigation
• Hover text
• Testimonial slides (and how they function)
• The flow of information

The list goes on.

It’s important to nail your eCommerce website design because poor creative will lead to lower sales, and in many cases, could affect the amount of people who will discover you.

To help you run an effective eCommerce business, we’ll be walking through all things website design, including:

• 5 examples of effective eCommerce website design
• Key eCommerce page designs to nail

Let’s get started!

5 Examples of Effective eCommerce Website Design

In this section, we’ll walk through some of the best eCommerce websites and how you can apply similar elements to your own.

1. Scoria

Scoria is an eco-conscious yoga brand that sells sustainable and playful cork yoga mats, accessories, and clothing. They’re also amongst the top 1% of Shopify stores in Canada and are on track to do $1.5 to $2 million in revenue this year. They’re crushing it to say the least.

Why it works:

1. The website navigation is simple, which provides users with a better experience when trying to explore the website.
2. The images change when you hover over each item, giving the user more information about the product (especially those with a person)
3. Buyer reviews are clearly displayed under every item, which immediately builds credibility into the quality of the products Scoria sells.

2. Driftaway Coffee

Driftaway Coffee is a personalized coffee subscription service. They do everything from roasting the beans to distributing their products. Apart from their subscription service, Driftaway Coffee also sells one-off products from cold brew to clothing.

Why it works:

1. The CTA is clear and above the fold. This page has been built to convert from the moment you land on it.
2. Their logo banner adds credibility that they are a product so great that big name networks featured them on their platform, from BuzzFeed to the Food Network.
3. The second section of their page answers the first hesitation or question that will come up for a new user: how does this subscription work?

3. Amazon

We can’t walk through great eCommerce design without including the biggest one out there: Amazon. This company needs no introduction, but to keep with consistency, Amazon is the world’s biggest selection of books, music, DVDs, electronics, computers, software, apparel… The list goes on.

Why it works:

1. Their user experience design is unmatched. While their product or search pages may not be the best looking visually, they’re still the best eCommerce site in the world. They make it easy to search, filter, and find the exact product you’re looking for despite their large inventory.
2. Effective use of a carousel banner on the homepage, highlighting specific deals, holidays, or offers. This carousel design also automatically shifts from banner to banner, ensuring that the different offers come to light.
3. The home page is completely personalized to every user, whether it’s through the use of cookies or from account information. If you’re logged into Amazon, they’ll show your recently viewed items, recommend new items based on past purchases, and surface deals within categories you typically shop or browse. This personalization is key for increasing total sales.

4. Dollar Shave Club

As a brand that focuses on giving customers a clean and easy shaving experience, Dollar Shave Club has created a clean and easy customer experience too. Their business model is focused around selling subscription services to their razors and additional accessories (shaving gel, etc).

Why it works:

1. Their hero image on the homepage is hilarious and eye-catching. It’s also on brand as the majority of Dollar Shave Clubs ads are focused on being “real”, playful, and funny.
2. The “Get Started” CTA on the homepage leads to a questionnaire that is built to provide personalized recommendations for every person that completes it.
3. There’s an FAQ at the bottom of the homepage. While this isn’t necessarily a “best practice” across all eCommerce websites, this is a really smart move for a subscription-based business. That’s because a subscription service is a bigger commitment than a one-time purchase so people will have more questions they need answered before committing.

“Without a brick and mortar storefront, every pixel of your site should reflect your personality.”

– Hannah Griffin, Designer, Groove Commerce

5. Benefit Cosmetics

Benefit Cosmetics is a San Francisco-based makeup brand that believes “laughter is the best cosmetic.” They sell a wide range of makeup products with a strong focus on makeup for eyebrows. The example below walks highlights the product detail page of one of their flagship products: Gimme Brow+.

Why it works:

1. The clear pink CTA stands out from the rest of the page because it’s bright and contrasts well with the white background.
2. Customers can browse through multiple product shots to get a better understanding of how the product works, what it looks like, and what they can expect if they purchase it. This is great for setting expectations.
3. The entire design and layout of the page is on brand and stays consistent across every page on the website.

Key eCommerce Page Designs to Nail

While every website will require a different set of pages, there’s a key set of pages that every eCommerce website will need to design well. Across all of these pages, be sure to continue to test everything, from copy and button colors, to page layout and images.

Homepage

Treat this page as an introduction to your brand. On your homepage, you can describe things like:

• Who you are
• What you do or sell
• How you’re different than your competitors
• Highlight your best-selling products
• Share positive customer testimonials to build credibility
• What deals or promotions you’re running

“I love a homepage that makes it 100% clear what the product is and why I should care.”

– Chris Coyier, Co-Founder CodePen

As you’re building or optimizing your homepage design, be sure that your copy is clear and concise, easy to understand, and provides your audience with a clear next step. Some common CTAs include:

• Subscribe (for subscription-based companies like Dollar Shave Club)
• Browse products (for big inventory websites like Amazon)
• Check out our sales

A great way to share some of this information in a way that’s on brand and designed to convert is to hire experts to design banners and page layouts for you. Superside has curated thousands of professional designers, from UX to graphic who will act as an extension of your team, allowing you to spend more time focusing on the overall business.

Checkout and view cart page

This is the final moment where people are ready to fully commit to making the purchase or abandon the cart altogether, so your design better be on point. Some tips for designing website layouts include:

• Make all of the necessary information clear and upfront. This includes everything from estimated shipping costs to what’s in the cart with line-by-line information on what each item costs, quantity, etc. Don’t forget to display currency too. The right shopping cart solution makes this process a breeze.
• Display all available payment options clearly, and include a number of convenient payment methods such as digital wallets, recurring payments, and buy-now-pay-later schemes to make it as seamless and secure as possible for your customer to complete their purchase.
• Don’t add any more CTAs to the page. The goal of this page is to get the customer to check out what’s in their cart. Adding more buttons will only distract them, risking the sale altogether.

Product detail page

This is the page that customers will land on when they want to learn more about a specific product. On this eCommerce product page, there are so many things that customers will be looking for, but the specifics will depend on your business. If applicable, here are some things you should include on this page:

• A detailed product description
• Dimensions like height and weight of the product
• Multiple product shots (like the front and back of clothing)
• Customer reviews
• Price
• FAQ
• Pairing item suggestions
• Tips and tricks or “How to use”

Wrapping up

A great eCommerce site takes time and energy to build, but when done right, it could be the difference between making less than $1,000 in sales/month to Amazon-status. So long as you continue to build, design, and optimize for your customers, you’ll have a winning eCommerce website.

In the meantime, if you’re looking to save some time and outsource to an eCommerce website design service, Superside has you covered. Work with our UI/UX designers to bring your vision to life.