bbG Blog

Ecommerce Website Design 101: How to Position Your Online Store for Growth

They say if you are not online, you don't exist. Retailers should interpret this as: if you don’t have an ecommerce website, your business is off the radar for a helluva lot of customers.

Last quarter, Walmart's online sales increased by 97%. Amazon’s Q2 sales & profit growth was 40%. But it’s not just the big guys, benefiting from consumers’ spiked appetite for online shopping. Smaller retailers such as Howards Storage World, B-Wear Sportswear, and Plain Jane among others are seeing double and (even triple!) digit growth in ecommerce revenues, compared to the year before.

What else do these three companies have in common? Their fresh ecommerce website designs are spot on and optimized for customer conversion.

And here’s how you too, can join the growing array of retailers that consistently beat their yearly ecommerce targets.

What is Required to Build a Beautiful (and High Performing) Ecommerce Website
Nation retail operations or hobby side-project, no matter which type of ecommerce site you plan to build the first thing you need is an ecommerce platform to help you build the best ecommerce store.

An ecommerce platform is a software application that lets you set up an online store and manage its marketing, sales, and operations.

There are 3 main types of ecommerce platforms on the market:

  • Open source.
  • SaaS.
  • Headless commerce.

 

Each of them provides you with a toolkit for creating an online store: page builder, checkout page, payment gateway integrations, and more. The difference between those ecommerce platforms lies in the levels of:

  • Customization.
  • Performance.
  • In-built feature set.

 

SaaS platforms offer out-of-the-box ecommerce store design experience. You can design a store using a drag-and-drop visual editor in several hours. But the tradeoff is limited customization and incapacity to add custom features.

Open source platforms are like a blank canvas that with enough time and effort can be turned into any sort of ecommerce website. But you are creating everything from scratch. That means heaving a coder and a designer on call.

You can choose between headless commerce and Open SaaS platforms such as BigCommerce, SaaS platforms like Shopify (does have a headless commerce offering, but has rigid API call per second limits), SaaS website builders like Squarespace and Wix, and open source platforms like Magento (doesn't have a native theme editor) and WooCommerce (technically an ecommerce plugin). Such ecommerce solutions don't limit your design capabilities so that you can create beautiful and unique websites. And you don't need to build core commerce functionality from the ground up.

At any rate, no matter which store builder you choose to start up with, make sure that your top pick has the following features:

 

1. Mobile responsive.

When 46% of consumers complete their entire purchase process (from research to purchase) on smartphones, you’ll be missing a lot of sales if your website is not mobile-friendly. A responsive ecommerce platform ensures that visitors from all sorts of devices have equally great on-site experience, without any design constraints.

 

2. Customization opportunities.

“Beauty” is a highly subjective assessment. But when it comes to web design, “good looks” usually mean convenient layout, aesthetically pleasing typography and iconography, crisp visuals, and other on-site design elements that differentiate your store from others. If your ecommerce platform lacks customization features and beautiful ready-to-use templates, you are stuck with using the same mold as hundreds of other stores, with little room to show how your brand stands apart.

 

3. Easy-to-follow site navigation.

Navigation is an umbrella term for all the UI elements users can use to reach specific information on your website. These include header navigation menu, product category pages, filters, on-site search, and footer. When your ecommerce platform constrains your ability to create custom navigation paths, you'll end up with a pretty, but dysfunctional website few customers will want to use, and your conversion rate will suffer for it.

 

4. Unique user experience.

Delight prompts consumers to complete their purchase, and then shop some more. What ignites that sense of delight and takes brand to the next level? The best marketing tools in the world won’t help if your site leaves them wanting.

Well-thought user experience (UX).

UX plays a pivotal role in ensuring that your website is not only functional, but intuitive, reliable, user-friendly, and easy-to-navigate. These factors dial up the pleasurability of interacting with it and make other good things happen.

Think higher conversions, repeat purchases, rave reviews, and word-of-mouth recommendations. So you don’t want to skim on this.

How do you determine if your ecommerce platform is UX-friendly? Check several ecommerce website examples, built on the selected platform. Specifically:

  • Assess the basic UI components. Browse the website to understand if you like the navigation, find the layouts effective, and all design elements intuitive and good-looking.
  • Scrutinize customization opportunities. The more elements you can tweak — the more unique UX you’ll be able to create as your operations scale. Remember: what looks like an OK ‘starter’ practice for a small store, may turn into a money-draining liability for bigger operations. Make sure that you can toss and add different design elements as your priorities change.
  • Measure the website performance. Page load time and overall website speed add or subtract from your UX. Sluggish pages, glitching design elements, and slow-loading product videos often result from a poor CMS/CDN and hosting provider, used by the ecommerce platform.

 

 

Design Differences Between B2C and B2B Ecommerce Sites

To design a high-performing website, you need to understand who your target audience is and what’s the best way to reach it. Both Business-to-Business (B2B) and Business-to-Consumer (B2C) ecommerce websites have the same agenda — make a sale. But the means towards that goal are somewhat different.

  • For B2C companies brand awareness is the #1 priority. A recognizable brand (think about this when choosing your domain name) with strong online presence = a higher share of the total addressable market.
  • For B2B companies the top priority is lead generation. With a niche market and longer purchase cycles, B2B brands need to keep a steady pipeline of warm leads.

 

Let’s take a look at what this means design-wise.

 

1. Customer intent.

Both Business-to-Business and Business-to-Consumer purchases are sparked by a need. But the underlying motivations behind those needs are different.

B2B customer intent is driven by business priorities and backed by a group of other people (stakeholders, teams, company’s customers, end-users). With many people to please, the product research timelines are longer, and the list of requirements for evaluating products is more detailed. That’s why B2B ecommerce websites dwell more on converting top-of-the-funnel (TOFU) and middle-of-the-funnel (MOFU) visitors to prospects and then turning them into customers using a mix of online (email marketing, eBooks, social media, online demos) and offline sales (phone consultations, in-person demos, etc) strategies.

B2C shoppers act on an immediate need. While most shop around too, comparing product specs and prices, their average time spent at every stage of the sales life cycle is shorter. Unlike B2B buyers who allocate more time to data-based product evaluation and consideration, B2C folks often act on impulse, and thus are more receptive to various cognitive triggers, activated by our bias:

 

 

Effective conversion rate optimization tactics, used by B2C e-tailers, leverage these biases in design to sway purchase decisions.

 

2. Purchase process.

More people are involved in the B2B buying process, including both end-users and the purchasing agents/decision-makers. An ecommerce website is a facilitating tool that has to inform, support, and demonstrate how your products can meet all the organization’s needs through content, interactive on-site tools, and supporting marketing assets. Remember: your main goal is to generate leads, not root for an immediate sale.

In the B2C space, purchase decisions are often emotional and event-driven. The coffee machine broken? OK, I need a new one. Oh, that shoe looks nice. Where can I buy one too? Most B2C consumers are in a constant state of product exploration and in-the-background evaluation. When they discover a good offer, they are almost ready to snatch it. In that sense, B2C ecommerce websites need to facilitate discovery and feed into that sense of urgency.

 

3. User experience.

User experience is equally important for B2B and B2C shoppers. But it has to account for the above-mentioned differences in intent and purchase process. Nielsen group identifies five important differences in UX requirements for B2B and B2C websites:

  • B2B design must accommodate longer content to support long decision-making and sales process.
  • All B2B content has to speak to two target audiences — “choosers” (decision-makers) and end-users.
  • B2B product information needs to be longer, more comprehensive, and include a clear overview of integrations, capabilities, and regulatory requirements.
  • Both B2B and B2C customers are price-conscious. But B2B pricing scenarios are more complex. Provide B2B buyers with different pricing ranges variations, pay-per-usage scenarios, or calculators to facilitate decision-making.
  • Just like B2C stores, B2B websites cater to several customer segments, varying in size, industry, and operational budgets. Thus, B2B websites need to design a more diverse, audience-based navigation to cater to all of the targets.

 

7 Best Ecommerce Website Design Examples

Now that you know how ecommerce web design differs for B2B websites, let’s circle back to B2C commerce.

Let’s examine the examples!

 

1. Larq.

 

 

LARQ uses crisp product images and animations to make us truly excited about something as simple as drinking water. Through spot-on copywriting, color-block product features, and interactive plastic waste calculator, the reusable water bottle retailer persuades us to join their Bottle Movement and explore more of their stylish products.

Adding multi-regional capabilities (using BigCommerce) was another pivotal moment. According to LARQ, within 3 months, their conversions increased by 80%.

 

2. Burrow.

 

 

Modular furniture retailer Burrow, skipped words in favor of a home page video to demonstrate their main value proposition — assembling new furniture can be fun, quick, and tool-less. Using a mix of product and lifestyle pics, Burrow makes it easy to picture their latest designs in your home, customize them for the right fit, and order in several clicks.

 

3. Revelry.

 

 

Revelry knows that swatches are the shortcut to any bride's wallet when it comes to the bridesmaids' dresses. As well as free sample delivery and at-home try-ons for the entire party. Both options have a prominent spot on the e-tailer’s homepage, along with excellent category navigation, prompting to discover different dress styles, materials, and colors.

 

4. Skullcandy.

 

 

We rave about Skullcandy pretty often, but it’s hard to do better than this with an ecommerce store. They expertly offset bright colors with a signature black website design to create that sleek, lux feeling. Products are easy to discover, review in great detail on video, and then read on the specs. Though their primary market is audio, browsing Skullcandy's website is a delightful sensory experience due to their expert use of visuals, material design elements, and video.

 

5. Solo stove.

 

 

Solo Stove website is an admirable example of how to use iconography in ecommerce. The fire pit manufacturer made custom icons for each product category to better convey what they are selling and highlight some of the main product specs. How-to product videos, illustrations, and FAQ sections help bring across their main point further — their products are durable, easy-to-use, and well worth the price as the reviewers will tell.

 

6. Bliss.

 

 

Bliss website is an absolute cotton eye-candy. The spa-powered skincare brand uses three dominant colors — Millennial pink, baby blue, and Gen Z yellow — to visually appeal to their main buyer personas. The funky and friendly brand attitude is further reinforced through microcopy. The wording of button copy, section titles, and form descriptions makes you feel as if you are talking about your skincare routine with a friend.

 

7. The Mountain.

 

 

The Mountain has all the great design features of an ecommerce website. Straight forward navigation bar, featuring main product categories prompts exploration. Service banner, placed under the header, immediately informs about shipping terms and possible delays — a good practice for managing customer expectations.

The hero slider highlights the latest seasonal goodies and promos and prompts further discovery. With a wider range of product categories, The Mountain did an excellent design job of organizing everything in categories to reduce the feeling of overwhelm a lot of ecommerce platforms can give you.

 

Advantages of Using BigCommerce for Designing a Site

Liked the website examples above? All of them were designed on BigCommerce. And here’s why enterprise clients and SMEs alike choose our ecommerce platform:

 

1. Design isn’t compromised with other features.

Pretty or functional ecommerce website? With BigCommerce you get both.

Think of ecommerce website design as building a house. First, you have to build strong mortar and outer walls. BigCommerce provides you with the technical 'bricks' to place at the core of your online operations — no-code page builders, secure check-out, SEO-friendly codebase, and more. You can mix and match different ‘bricks’ to assemble a tiny house or a 6-bedroom victorian mansion.

We also don't limit you when it comes to the front or interior design. You can give your website a fully custom on-brand look without skimming on SEO, usability, or security. At the same time, you can customize your back-end to match your operations by pairing the in-built core commerce with external integrations.

 

2. Many (very good) ecommerce themes.

If you don’t feel like creating your store design from scratch, you can take a look around our theme store. With 150+ unique designs, you are bound to find something that pleases your eye. Browse options based on grid type, product catalog layout, or industry. Or review the best ecommerce themes, picked by our staff.

Every BigCommerce theme is responsive, mobile- and SEO-friendly, and optimized for usability. Using a premade theme is a shortcut way to designing a great ecommerce website at a lower cost.

 

3. Customization opportunities.

What if I want to design a truly custom ecommerce experience? Think third-party integrations and add-ons with AR apps, a custom CDN + CMS to support heavy-duty publishing, and an ML-powered product recommendation engine on top with real-time data. Is BigCommerce still relevant to me?

Absolutely. BigCommerce is an open-SaaS platform, meaning our technical infrastructure can be easily connected with an array of other applications through APIs. Our platform seamlessly integrates with external apps and can be integrated within larger technical ecosystems. Also, with the assistance of our agency partners, like Folio3, that has BigCommerce design services, you can create a store of your dreams.

With BigCommerce, you can use our core commerce features for inventory management, payment processing, shipping, fraud management, and more, while using another technology such as WordPress or Adobe Experience Management to power your website's front end. Such setup goes by the name of headless commerce.

 

4. Easy-to-use building tools.

On the other hand, if you need less sophisticated, but still robust design functionality, we deliver that too. Take our Page Builder — a drag & drop web page editing tool small business and Fortune 500 companies use to create attractive landing pages.

Using pre-made design elements, you can rapidly prototype attention-grabbing and click-inducing product listings without writing a single line of code. Create interactive customer experiences, level up your content marketing game, and add new supporting pages to your sales funnel without calling the dev team.

 

8-Step Ecommerce Website Design Checklist

Even with the best-in-class tools, the design process can get easily derailed without a clear roadmap. What do you need to prepare for your e-store launch?

  • Homepage.
  • Category pages.
  • Product landing pages.
  • Checkout page.
  • About us.
  • Search bar and search results page.
  • Account registration and login forms.
  • Email subscription form.

 

Let’s tackle all of these one by one.

 

1. Homepage.

A homepage is the first touchpoint between you and a potential customer, you can think of it as a digital storefront for your online business. With roughly 3 seconds to make a good impression, you need to be strategic with your design choices on your homepage.

High-performing ecommerce homepages share the following elements:

  • Clear set of product categories, either in the header or sidebar section.
  • Hero image (or image slider) featuring the main product or current offers.
  • Curated presentation of recommended products, trending items, or product categories.
  • Enter and exit pop-up or sticky offers for retention.

 

The structure above is not cut and dry, though. The look of your homepage will be determined by two factors — your industry and your customers’ preferences.

For example, Jeni's ice cream immediately prompts the shoppers to decide if they want to order a takeaway from their local store or ship nationwide.

 

 

2. Category page.

Category pages help organize all your products and facilitate discovery. Digitally distracted customers want instant information, especially when they are on mobile devices. So you need to serve them with quick access to the products they crave.

Apart from being crucial for user experience, category pages also need to be optimized for SEO (search engine optimization). Incorrect parent-child relationships, can result in duplicate content and undercut your rankings in search results. Thus ensure that each category page:

  • Has a descriptive, SEO-friendly URL.
  • Features unique texts for category descriptions.
  • Fits logically into your overall information architecture.
  • Features additional filters for sorting product suggestions.

 

Natori follows all of these principles to create a delightful browsing experience for buyers:

 

 

3. Product page.

Product page design is exceptionally important for ecommerce. Whether you sell t-shirts or tires, if your listings look meh, your traffic and conversion numbers will never go up. At the very least, your product page has to feature:

  • High quality product photo(s).
  • Product specs: name, color, sizes, prices, key features.
  • Buy and save for later buttons.
  • Detailed product description.
  • Social proof/customer reviews.
  • Related products (upsells and cross-sells).

 

Then you can spice it up with some extra features — countdown timers, video or AR demos, check-in-store option, back-in-stoke alerts, and more! In our previous post, we talked a heap more about creating effective product pages.

 

4. Checkout page.

Many factors can prompt the customer to abandon their shopping cart, according to Baymard Institute:

 

 

Most of them can be prevented by improving your checkout page look and flow.

  • Enable ‘guest checkout’ for first-time shoppers and prompt them to register an account with you after they’ve completed their purchase.
  • Reduce the number of required form fields. On average ecommerce websites have 12.8 fields in the checkout flow. But you capture all the customer data you need within 6-to-8 fields.
  • Clearly list all of the payment methods you accept (e.g. debit or credit card, Apple Pay, PayPal).
  • Informing about all the possible costs pre-checkout. You can place a sticky banner informing visitors about the ‘free shipping’ threshold. Incorporate handling fees in the product pricing. Automatically apply relevant sales taxes pre-checkout.

 

5. About us page.

Don’t treat an “About” page as an afterthought, especially if you're in B2B ecommerce. Because 52% of business buyers say one of the first things they want to see on the vendor website is the “About Us” page.

There are many ways to craft an attractive “About Us” page for an ecommerce company:

  • Tell a story about your products.
  • Introduce your team.
  • Present your company values.
  • Explain how you operate.
  • Talk about your history.
  • Or present your future vision.

 

Design-wise, keep the texts short and point. Avoid sales pitches and CTAs, but do use good team and product visuals to back up your story.

 

6. Search results page.

Larger ecommerce stores need to think well about the on-site search experience.

To create a great on-site search experience:

  • Make the search bar easy to discover.
  • Suggest auto-completes.
  • Provide results for misspelled words.
  • Personalize search results using analytics.
  • Support image searches along with text queries.

 

7. Account registration & login forms.

Don’t brew too much over login forms. They should be short, progressive, and friction-less. Ask the shopper to provide the basic information first (email/pass) or even log in with one of their social accounts. Every extra step during registration increases the chances of churn. Request shipping and billing details after the registration is complete. Offer users an option to save and re-use their details in an address book — for everyone’s convenience.

 

8. Email newsletter form.

A well-executed ecommerce email marketing campaign can drive repeat traffic to your website and maximize conversions. But before you market, you need to build your email list. To entice subscriptions, give your newsletter a prominent placement at the homepage and keep a sticky or pop-up version in the footer area. To retain first-time shoppers, you can also pitch a small discount for a subscription.

 

Wrapping Up

At the end of the day, good ecommerce website design is all about iteration. Start with the essential pages and design quick prototypes. Test them with your team to make alliterations. Launch a new look and collect first-hand insights from your customers.

Between conversion optimization, new product landing pages, and seasonal promotions, you’ll always have plenty of ‘design’ work at hand. But with functional and performance requirements taken out of the way by your ecommerce platform provider, you can focus on the creative part of the process. And outperform yourself with every new design variation!

 

Befit

BeeBlue G Sdn Bhd

 Address: C-8-3A, Centum @ Oasis Corporate Park, No. 2
Jalan PJU 1a/2, 47301 Ara Damansara, Selangor, Malaysia.

 Email : info@beeblueg.com

MCG Group of Companies

hpG :: Exhibition Management

prG :: PR Communications (coming soon)

Copyright © 2002 ~ 2021 BeeBlue G Sdn Bhd (previously known as BeBlueInc Infocode). All Rights Reserved.

A Member Of MCG Group Of Companies

Search