This is Chapter 3 in our free How to Sell Online Ebook. You will also find other tips, methods, and tools that you can use to grow your own business in the other chapters. Enjoy!
We talked about How to open an online store in the previous chapter. So the next step is, how to make it attractive and effective without spending a lot of money?
A website attracts, distracts or repels any prospective customer. eCommerce website design matters tremendously, as 33.9% of website visitors leave the site after viewing only a single page.
Creating an attractive, updated, and highly functional eCommerce website design plays a pivotal role in assuring customers with your professionalism and trustworthiness, as well as magnifying the perceived value of your products.
In this chapter, we will show you best eCommerce website design practices and inspirations how to design an online store to drive your online business to grow faster with the demands and changes of the market.
This complete 10-chapter guide takes days to finish. How about downloading an ebook version to read on your Kindle for bedtime reading or while you’re on the train?
1 – Best practices to effective homepage design
The homepage is the introductory page that a visitor lands into when visiting a website. Thus, it often generates the highest traffic to your online store. Homepage is where customers make the first impression about your store and the decision to whether leave or continue shopping.
To maximize the potential of your online store’s homepage, make sure to keep the following in mind:
Be broad and simple:
If you are selling hundreds to thousands of products, it can be a headache selecting the products to showcase in your homepage. So, you may be tempted to put everything because of the fear of missing out an opportunity. But, complexity scares people away. Prioritize in featuring product categories instead of specific products. At this level, only few visitors appreciate individual products.
Design Inspiration: Cotton On’s homepage simply showcases product category links to avoid cluttered and messy presentation.
Be fresh and relevant:
Loyal and frequent website visitors always notice small modifications in a website and generally like to engage with new and updated contents. Modify your headlines, campaigns, and promotions as regular as possible, typically on a weekly basis to keep the engagements and interests up. Plus, search engines are fond with new and fresh contents too.
Design Inspiration: Walmart implements a slider of its headlines, so visitors can easily navigate the most important and newly added pages for them to visit.
Be helpful and easy to reach:
Online shopping is trending but somewhat risky to cautious people. Immediate help from customer support could be a great remedy to ensure people that the online store is real and trustworthy.
It is highly recommended that you have online support available right on the homepage, ready to support customers if they need or more information or guidance about shopping with you.
Online chat is common and effective if you always have an agent online 24/7. However, if you are starting your online business as a one-man show, chances are that you don’t have budget for online agents and cannot get online the whole day yourself. A great alternative here is to present a Facebook chat window, where customers send direct message to your Facebook page inbox and chat with you there.
Design Inspiration: US Beauty Cosmetics store implements a floating facebook chat widget on the right corner on homepage, using Quick Facebook Chat tool, to connect with customers via Messenger anytime.
With Facebook chat, you can correspond with customers anytime anywhere with your mobile phone.
Be personal and adjustable:
What makes your website a satisfying experience is providing your visitors a personalized page that makes them feel special and giving them the power to customize what they want to see. Personalization techniques within your homepage allows a generally more uplifting and memorable experience since it gives your customers the sense of value.
Design Inspiration: River Island allows country and currency preference selection for customers.
Be on-site search friendly:
Roughly 30% of online visitors favor the on-site search box when looking for products to buy. It allows customers to have an easier and quicker option to search a product.
Design Inspiration: Lazada’s allocates a good portion of onsite search bar right beside the company logo and above the navigation menus.
Be artistic and memorable:
The homepage is the best place to showcase your personality by creating unique and artistic visuals. How to design an online store to be unique and impressive depends on this part.
Layout your homepage to display your persona and what sets your apart from the rest of the competitions. Customers are not only inclined with the products that you are selling but also with your story and soul as an online merchant.
Design Inspiration: The Practical Man’s homepage is something that you haven’t seen before. It is quirky, clean, and really memorable.
2 – Best practices to effective category page design
In grocery stores, aisle psychology is used to strategically place certain products together in order to manipulate consumer’s buying behavior. A study found out that placing chips and soft drinks within the same aisle increases revenue by 9%.
To translate this into an eCommerce perspective, aisles can be the equivalent of category pages. As they group products together to help consumers find items easier and quicker. To make sure you are not losing any potential sales because of poor category pages management, follow these design practices:
Be filter-ready:
Your product category page should be easily filtered using dropdown buttons or checklists to narrow down the results into just the essential products that suit the standards of the customers. Why bother showcasing high heel shoes when the customer only wants the flat ones? By helping your customers find the right product, it will save you a lot of time to close a sale instantly
Design Inspiration: Uniqlo’s product category page provides an easy filter feature to customers to narrow down their product choices.
Be recent and trending:
For returning customers and visitors who love to window shop, tendency is they are looking for new items to discover. So, staying fresh and up-to-date is important. Consider putting a “What’s New” or “Trending” category or even a drop down filter that allow users to find the newest or most popular items.
Design Inspiration: H&M devotes a category page for their newly added items. Within the category page, they also have a filter of new arrivals.
Be size conscious:
A split testing conducted by Blue Acorn to measure the impact of varying sizes of product images in a category page grid found out that displaying uniform sizes of product images can significantly increase revenue.
The baseline category page had different image sizes while the variation category page had uniform image size. The latter drove revenue by 17.1% against the controlled category page.
Be comparable with product comparison feature:
81% of consumers research online before making a purchase which includes comparing several products to find the best deals, the most elaborate product features, and yes, the least expensive item. Ease your customers’ online research by presenting them product feature and price comparisons on your category page. This way you are also cutting the chase before the purchase.
Design Inspiration: REI has included a compare button on each of the product on its category page. This allows customers to easily click and compare several products at the same time.
3 – Best practices to effective product page design
You have probably come across several product pages and it’s obvious that they have different approaches in displaying a product. Some are descriptive, others are visual.
However, the same goal applies: they want customers to click that product and add them to their cart. And so, we have scouted out the following best practices of how to design an online store’s effective product page together with stunning design inspirations that really stand out from the crowd:
Be fun and interactive:
Create a product page that boosts engagement with your customers. Allow them to virtually and interactively see how the product will be used. This way you are not boring them with lengthy product descriptions that they won’t even probably read.
Design Inspiration: Bellroy sells slim type wallets to address the issue of bulky and messy traditional wallets. And to lively showcase their product, they have created an interactive product page which lets visitors move a slider to compare the difference between their product and a traditional wallet.
Be feature and benefit focused:
The features and benefits of the product will give enough push to the customers to purchase. Be specific and detailed as much as possible but again don’t over do it all at once. Let them navigate your product by showcasing each product feature and benefit at your customer’s pace. This way you are not bombarding them with information overload.
Design Inspiration: Walmart has an interactive product tour which allows customers to navigate a detailed information of product specifications and features when they click numbered product part.
Be attention grabbing with your call-to-action:
As we have discussed earlier, the product page is where you need to be assertive in driving the intent of the customer to add an item to their cart and make a purchase. This is why designing clear and persuasive call-to-actions on your product page plays a vital role. Here are two compelling studies conducted on how you can design CTAs effectively on your product page:
a) Reposition your call-to-action button following the natural eye pattern
Result: The natural eye pattern would suggest that people would look product information from top to bottom, and not innately from top to right. Thus, visitors are more focused on the call-to-action button in the variation product page where the CTA is placed just right below the product description.
b) If you have models, let them gaze directly at the call-to-action
Result: Even how your model project can significantly impact the effectiveness of a call-to-action button. The model in the variation product page was looking directly towards the call to action. Surprisingly, the variation product page, people follow where the model is gazing at.
Be moving with videos:
While we all love to use high-resolution photos in our product pages, it’s time to consider adding videos as well. People have been consuming more and more videos significantly over the recent years. Plus, videos will still be on the rise as they are predicted to account for 69% of overall Internet traffic by next year.
Design Inspiration: Aside from the regular product images, NYX Cosmetics also has a video of the product to showcase more about its features, usability, and benefits.
Be fully customizable:
You want your customers to get the product they want on how they want it to be. The size, shape, color, and other add-ons are crucial elements of your customer’s purchasing decision process. Thus, providing your customers to custom modifications of their chosen products creates a positive brand impact to your online store’s sales.
Design Inspiration: A very stunning fully customizable product page is developed by Volkswagen. The site allows potential buyers to build their own car.
Be transparent with product reviews:
Product reviews are also great drivers to influence customers to buy a product. Potential buyers want to know how generally satisfied past purchasers of the product they are eyeing to buy. Eliminate the doubts of your customers by providing customer reviews right on your product page.
Design Inspiration: Sonos effectively uses customer reviews by placing at the bottom of the product details relevant tweets regarding the product.
Be a helping hand by offering more options:
Shoppers love the variety and lots of options to choose from. So, ease their shopping by presenting them items that are complement or similar to the product they are currently viewing. These items are normally placed right below the product description.
Design Inspiration: Pharaohs Market store promotes frequently bought together products on each product page to upsell more alternative choices or cross-sell relevant items. They use Personalized Recommendation app to generate product recommendations automatically.
4 – Best practices to effective cart page design
88% of shoppers have reported abandoning items in their shopping cart. While many reasons are cited on why shoppers leave their cart, a good amount of them complained about the eCommerce website design. It was either too complicated to navigate or it frequently crashes. Just imagine how many conversion you can make by improving your cart page design? To help you address this issue, we have collated the following best practices in effective cart page design:
Be accessible with a mini-cart page:
Don’t seem like you are rushing them to checkout by displaying a full page display of the cart page. Instead, take advantage of the opportunity that they are still on the product page. When they have added an item to their cart, use a mini-cart page so that they won’t be redirected to a full cart page. Thus, allowing them to navigate and discover more products.
Design Inspiration: Puma maximizes the customer spending by keeping them on the product page a little bit longer. They have created a mini-cart page in order for customers to add items on their cart without directing them to a full display cart page.
Be urgent and scarce
The fact that customers have added items to cart means that they are interested and just a step closer to checkout, but not necessarily means that they’re ready to buy. At this point, you need to be able to heighten the sense of urgency by adding compelling call-to-actions such as “Few Items Left” or “Time is running out”.
Design Inspiration: Abercrombie & Fitch intensifies the urgency of customers to proceed to checkout by adding the statement “Fewer than 5 left!”
If you want to create a sense of urgency in a more creative and interactive way, you can display a countdown timer popup offer at cart page like in this eCommerce website design:
Design Inspiration: Checkout Boost app allows you to create a countdown timer offer right at cart page to prevent cart abandonment and increase checkout rate.
5 – Best practices to effective checkout page design
Be guest friendly:
Allow your customers to proceed to checkout with an option as either signing in as account user or a guest. This way you are not imposing customers to register an account if they don’t have one.
Design Inspiration: Lane Bryant provides a guest checkout link. This eases the concern of customers who don’t want to register an account.
Be clear with a checkout progress bar:
Provide shoppers a visual indicator of where they are in the checkout process with a progress bar. This will help relieve their possible impatience on filling out several forms since they know if they are near to completion.
Design Inspiration: Crate & Barrel shows a progress bar of the checkout steps that the customer needs to fulfill before finally placing an order.
Be convenient with one-page checkout:
Ideally, the lesser the page and the steps to checkout, the faster for customers to place an order, and the quicker for you to secure that sales.
Design Inspiration: Coloud implements a one-page checkout process, eliminating a lot of tedious steps for customers to fulfill.
A good design is a sign of good business
Some online retailers, especially small and medium businesses, often neglect to focus on the essence of how to design an online store that maximizes its true potential. The reason being, designs take too much time, effort, and creativity. And so, they settle for what is just available and free.
However, this could work against your online store in the long run. Because, a successful online business doesn’t go with the basic website design, but it constantly upgrades, innovates, and reshapes itself. So, take advantage of the best eCommerce website design practices above to turn your shop into a profitable business.
What’s next in Chapter 4: Now that your store design is completed, acquiring traffic to your eCommerce store is your next challenge. Let’s move to the next Chapter 4: How to drive traffic to your online store to address 10 most effective yet free to low-cost strategies to acquire high quality traffic for your store.
P/S: Building your online store with WordPress? Try Themeum. Themeum is a state of the art WordPress themes and plugins development company. They came on the market with the promise to upgrade your WordPress experience with high-quality WordPress themes and plugins.
Recommended for you
