There’s a saying that if you’re not online, you don't exist. A saying that grows more relevant each day as the online marketplace continues to dominate the shopping world.
For retailers, this should be interpreted as such: if you currently do not have an ecommerce website, you may be preventing yourself from hitting revenue goals and reaching your full potential.
What exactly does ecommerce website design entail?
Put simply, it’s the process of creating an online store for your business to sell digitally to target shoppers. To design an ecommerce website, you need to plan, conceptualize and arrange your content and products for effective display on the Internet.
The ecommerce push has already begun, as more companies and more shoppers are turning to ecommerce stores to make their purchases. In 2020, Walmart's online sales increased by 97%. Amazon's Q2 sales and profit growth was 40%. It's not just the big guys either, benefiting from consumers' spiked appetite for online shopping. Smaller retailers such as Howards Storage World and B-Wear Sportswear, 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, modern ecommerce website designs were crafted and optimized for customer conversion.
Here's how you, too, can join the growing array of retailers that consistently beat — and exceed — their yearly ecommerce targets.
No matter which type of ecommerce site you plan to build, the first thing you need is an ecommerce platform to help you create the best ecommerce store.
There are three main types of ecommerce platforms on the market:
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:
SaaS platforms offer an out-of-the-box ecommerce store design experience. You can design a store using a drag-and-drop visual editor in several hours, though 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 kind of ecommerce website. However, you are creating everything from scratch, which means having a coder and a designer on call.
Headless commerce platforms are built with flexibility in mind, allowing you to create differentiated shopping experiences anywhere, with a powerful commerce engine on the backend. Unlike other ecommerce options, with headless commerce, the frontend is separated from the backend, allowing you to change your platform at any time. However, a more complicated process does come with additional systems needed.
You can choose between:
Such ecommerce solutions won't limit your design capabilities to create beautiful and unique websites, and you don't need to build core commerce functionality from the ground up.
No matter which store builder you choose to start up with, it is important to make sure that your top pick has the following features:
Mobile responsiveness is critical to the success of an ecommerce website. More than 46% of consumers complete their entire purchase process (from research to purchase) on smartphones, with even around 75% admitting that they abandon sites that aren't optimized for mobile. A responsive ecommerce platform can ensure that visitors from all sorts of devices have equally great on-site experience — without any design constraints.
BigCommerce is a leading ecommerce platform for building a beautiful mobile store, tailored to increase mobile sales without any additional effort. With our platform, users get:
“Beauty” is a highly subjective assessment. However, when it comes to web design, “good looks” usually mean a 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.
With BigCommerce, organizations can:
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 footers. Suppose an ecommerce platform constrains your ability to create custom navigation paths. In that case, you'll end up with a pretty but dysfunctional website few customers will want to use, and your conversion rate will suffer for it.
A quality, simple-to-use site can make a world of difference between a customer browsing and a customer purchasing. BigCommerce's simple, intuitive platform design lets customers check out on any device comfortably without distractions. By simplifying the online shopping experience, we make a once difficult process easy.
Delight prompts consumers to complete their purchase and then shop some more. What ignites that sense of delight and takes a brand to the next level? The best marketing tools in the world won’t help if your site leaves them wanting.
The solution? A well-thought-out 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 increase the pleasurability of interacting with the site and make browsing a more pleasant experience.
Think higher conversions, repeat purchases, rave reviews and word-of-mouth recommendations. These are significant and can make the difference between the growth and decline of a company.
How do you determine if your ecommerce platform is UX-friendly? Check out numerous examples of websites built on BigCommerce's platform. Specifically:
BigCommerce’s ecommerce platform takes all of this into account, allowing organizations to craft a website that provides a compelling — and ultimately rewarding — user experience.
Build, manage, and scale the online business you want. Start your free trial today!
To design a high-performing website, you need to understand your target audience and 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 toward that goal are somewhat different.
Let’s take a look at what this means design-wise.
Both B2B and B2C 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 retailers, leverage these biases in design to sway purchase decisions.
More people are involved in the B2B buying process, including 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 ultimate 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 is broken? Ok, I need a new one. Oh, those shoes look nice. Where can I buy them?
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.
User experience is equally essential for B2B and B2C shoppers, but it has to account for differences in intent and purchase process. Nielsen group identifies five important differences in UX requirements for B2B and B2C websites:
When designing an ecommerce platform, a B2B organization must do everything in its power to improve its website’s appearance and design to provide the most exceptional user experience possible. This can be achieved through:
Calls to Action (CTAs). A customer is interested in a product — now what? Creating calibrated CTAs that draw attention and can point consumers in the right direction will generate leads and raise profitability.
Now that you know how ecommerce web design differs for B2B websites, let’s circle back to B2C commerce and review a couple of examples.
LARQ uses crisp product images and animations to make us genuinely excited about something as simple as drinking water. The reusable water bottle retailer persuades us to join their Bottle Movement and explore more of their stylish products through spot-on copywriting, color-block product features and an interactive plastic waste calculator.
Adding multi-regional capabilities (using BigCommerce) was another pivotal moment. According to LARQ, their conversions increased by 80% within three months.
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.
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 a sleek, luxurious 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.
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 highlight their main point further — their products are durable, easy-to-use and well worth the price.
Bliss' website is 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 primary 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.
The Mountain has all the great design features of an ecommerce website. A straightforward navigation bar featuring main product categories prompts exploration. A service banner, placed under the header, immediately informs about shipping terms and possible delays — good practice for managing customer expectations.
The hero slider highlights the latest seasonal goodies and promos and encourages further discovery. With a wider range of product categories, The Mountain has done an excellent design job of organizing everything in categories to reduce the overwhelming feeling many ecommerce platforms can give you.
The website examples above were all designed by BigCommerce. The quality speaks for itself and here’s why enterprise clients and SMEs alike choose our ecommerce platform:
Pretty or functional ecommerce website? With BigCommerce you get both.
Think of ecommerce website design as building a house. First, you have to develop 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.
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. You can also 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 to designing a great ecommerce website at a lower cost.
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. With the assistance of agency partners like Folio3 that use 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 a setup goes by the name of headless commerce.
If you need less sophisticated but still robust design functionality, we deliver that too. Take our Page Builder — a drag and drop web page editing tool small businesses 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.
Nothing is more essential to the success of an online platform than the construction and performance of its website. With this idea in mind, BigCommerce built its ecommerce platform to remove friction from the customer journey through blazing fast speed, unparalleled bandwidth and multiple layers of security.
Organizations should spend more time generating sales and less on monitoring and maintaining their site. By leveraging the power of Google Cloud Platform, BigCommerce offers multiple layers of security, bandwidth, and industry-leading speed. The BigCommerce platform is ISO/IEC 27001:2013 certified and PCI DSS 3.1, Level 1-certified as both a Merchant and Service Provider.
All of that speed and security doesn’t mean a thing if the store goes down regardless, due to network errors or hosting problems. Organizations don’t have to worry about that with BigCommerce, as our hosted ecommerce platform has an average uptime of more than 99.99%.
Building an ecommerce platform can be tricky, and without the help of experts, it is a project that can quickly fall apart. The key to success? Having a complete understanding of the tools you’re working with.
Have no fear, BigCommerce is here to help withindustry-leading, live support whenever you need it. Paired with invaluable ecommerce advice on our community forums, we’re committed to standing by our merchants as they build out their platforms and businesses.
No other ecommerce platform has the in-house support and services of BigCommerce. Our expertly trained support team is ready to answer your questions and solve your problems 24/7 via phone, email or chat. Most calls are answered in under two minutes, with over 85% of issues are resolved on the first call. Whether you are launching your first online store or your one hundredth, BigCommerce provides the support you need through each and every stage of your growth.
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?
Let’s tackle all of these one by one.
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 three seconds to make a good impression, you need to be strategic with your design choices on your homepage.
High-performing ecommerce homepages typically share the following elements:
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.
American Leather’s homepage immediately presents the viewer with their most popular features and landing zones through a clear and informative design.
Category pages help organize all your products and facilitate discovery. Digitally distracted customers want instant information, especially 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 search engine optimization (SEO). Incorrect parent-child relationships can result in duplicated content and undercut your rankings in search results. Thus ensure that each category page:
Natori follows all of these principles to create a delightful browsing experience for buyers:
Product page design is crucial for ecommerce. Whether you sell t-shirts or tires, if your listings look unappealing, your traffic and conversion numbers will never go up. At the very least, your product page has to feature:
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.
A product page like Nikon’s is streamlined and easy to use, giving visitors a broad overview of their products while allowing for specificity and comparisons.
In our previous post, we talked a heap more about creating effective product pages.
According to Baymard Institute, many factors can prompt a customer to abandon their shopping cart:
Improving your checkout page look and flow can prevent most of these.
Don't treat an About Us page as an afterthought, especially if you're in B2B ecommerce — 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:
Design-wise, keep the text short and to the point. Avoid sales pitches and CTAs, but use good team and product visuals to back up your story.
Grenson’s About Us page is an excellent example of a company telling the story of their history and heritage while selling the future.
An on-site search engine is critical to the long-term viability of an ecommerce website, for both large and small businesses. Making the customer journey as simple and streamlined as possible is the priority for any business. An on-site search engine expedites the customer's journey, allowing them to find their results quickly and without hassle.
To create an excellent on-site search experience:
Organizations should not forget the mobile experience when crafting an on-site search engine. An ecommerce site's search capabilities must be compatible with mobile scrolling and able to handle a smaller screen.
Fujitsu’s on-site search engine is thorough and streamlined, with suggested auto-completes and filters for narrowing down search results.
Don’t brew too much over login forms. They should be short, progressive and frictionless.
Ask the shopper to provide the basic information first (email/pass) or even log in with one of their social accounts. Remember, every extra step during registration increases the chances of churn. Wait to request shipping and billing details until after the registration is complete. Offer users an option to save and re-use their information in an address book — for everyone’s convenience.
A tedious and overly complicated login form can turn off a customer before they've even made a purchase, preventing a long time customer and removing them from a business' line of communication.
A well-executed ecommerce email marketing campaign can drive repeat traffic to your website and maximize conversions. Before you market, however, 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.
GDPR and CCPA have already had an impact on ecommerce websites, with overall ecommerce revenue decreasing by 8.3% the year after GDPR implementation.
To ensure compliance to and prior to a site launch, each organization needs to set up these three things:
These can help prevent legal issues that may arise and communicate clearly to your customers that a site’s adherence. The fines for infractions are steep — it is better for organizations to stay ahead of them.
We've talked and shown you how a winning ecommerce design looks and what pages it needs.
Now let's dive into the how-to part and talk design tips for store owners.
The path to purchase has to be immediately apparent to the customer. Before adding a new design element to the page, ask yourself: will this help or impede the buyer journey?
It’s best to start with a minimal landing page. Then add extra conversion-inducing elements as you learn more about your audience behaviors and preferences.
Excellent user experience amplifies the pleasure of interacting with your brand. In contrast, design mishaps chip away that feel-good feeling.
After you are done with the initial design, audit each page to determine where you can remove friction and add extra delight to improve your store conversion rates.
Branding is a powerful asset for building emotional connections with your audience and turning them into vocal brand advocates. Four out of five customers are more willing to promote a long-time favorite brand.
By creating a distinctive ecommerce shopping experience, you are securing your spot as a long-time favorite brand, one interaction at a time.
Attractive prices, cool promos and catchy banners are still important, but their effectiveness shrinks if the overall UX is clunky. Focus on ensuring high website usability and performance first, then work on extra graphic design elements.
By now, flat design has become a ‘classic’ look around the web — and for a good reason. The main principles of flat design prompt:
All of these elements add up to a great ecommerce experience.
The ecommerce space is getting busier year over year. Your branding, iconography, website features and on-site experience should jointly reinforce your unique value proposition and differentiate your ecommerce business from the competition.
Back your design hunches by data. Study your customer lifecycle, analyze their browsing habits if you are redesigning or conduct usability tests with a focus group. Learn as much as you can about their browsing habits, then incorporate those findings into your design. Your ecommerce design has to appeal to your target audience, not just be aesthetically pleasing to you.
Great ecommerce websites visually lead the customer during their journey. Each element plays a strategic role in that discovery process. Tooltips and service texts can be helpful and prompt conversions.
If you need to explain each new step, the selected design isn’t working for your brand.
Online product discovery and purchases should be intuitive. Present a clear path to purchase to each visitor through navigation bars, straightforward information architecture, and promptly-placed call-to-actions. By minimizing the cognitive load at each step towards a purchase, you increase chances of conversion.
With many different ecommerce best practices around the web, it may be tempting to use each one. But more isn’t always merrier. Not every practice works universally well for every retailer.
As a business owner, base your design decisions on first-hand customer data and feedback rather than common wisdom. This way, you’ll create a unique user experience that makes a mark with your target audience and makes them more loyal to your brand.
Building an ecommerce website is easier than ever. It is no longer the overly technical, strenuous process that prevented many large and small companies from participating in the online marketplace.
Fantastic ecommerce website design now is all about functionality and 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.
BigCommerce simplifies this entire process with a platform that allows you to scale as they grow — enabling you to showcase your products and operate and manage your buildings with comfort and ease.
With the functional and performance requirements taken out of the way by BigCommerce, you can focus on the creative part of the process and outperform yourself with every new design variation. It is no longer simply about building and designing an online store but crafting the ultimate ecommerce site.
to learn how BigCommerce can help your online store for growth.
As with most things centered online, the dominant ecommerce website design trends follow those of the technological sphere.
Social media dominates online conversations and will soon do the same with ecommerce. From personalized user experiences — designed with dynamic landing pages and data-based product recommendations — to interactive designs, ecommerce websites may soon become even more intertwined with social commerce.
Good ecommerce website designs are visible immediately. They typically rely on five key elements:
While they may seem simple enough, they are often anything but. Your site may have straightforward navigation capabilities, but if your pages are ugly or an eyesore, you won't keep customers on it for long. Each of these five elements relies on each other to construct a quality ecommerce site.
Whether your store handles dozens or millions of customers a year, designing with care and expertise is invaluable in sustaining or providing growth. Small ecommerce stores should prioritize user experience the same way as larger e-tailers do — meaning using responsive, mobile-friendly designs and ensuring convenient filtering and navigation.
Visuals and diverse payment systems can play a significant role in online shopping, even for small online businesses. Smaller organizations can make their sites even more attractive for prospective buyers by investing in high-quality visuals and supporting different payment methods.
For large ecommerce stores, it is easy to rest on their laurels. However, a proactive approach to site navigation and management is critical to sustained profitability.
Organizations — even larger ones — should spend more time determining the optimal information architecture for showcasing your stock and create different product category groups and sub-groups to speed up discovery. Investing in powerful on-site product search that supports various filtering options — by price, product type, size, color, season, etc. — should naturally facilitate discovery, not ramp up the feeling of overwhelm due to the sheer volume of choice.
B2B ecommerce stores use the same UX design patterns as B2C ecommerce stores but have a somewhat different structure. Since the sales cycle is longer in B2B, these stores focus more on capturing TOFU and MOFU prospects rather than enticing an immediate conversion as B2C stores.
That’s why some of the key design elements for a B2B ecommerce store are: