Design Elements Every Top Ecommerce Site Has
June 2, 2021
June 2, 2021
Amazing store websites convert more customers and convince them to spend more when they convert, too. It’s easy to revamp your online store design with these classic ecommerce homepage best practices–even if you’re using Netsuite SuiteCommerce.
Karla is part of a 6 person ecommerce team responsible for managing the webstore of a large sporting goods retailer. As part of her wide array of work duties, Karla is in charge of the site’s homepage images, content blocks, and product features.
During a monthly marketing meeting, her CMO casts a glace at Karla and says, “I noticed our pages per session, bounce rates, and time spent on site have all seen decreases in performance over the past 30 days when compared to the same time last year. Any hypotheses on why that may be?”
After a pause, Karla replies: “None immediately come to mind, but I know we haven’t been as strategic as we probably should be when it comes to testing and updating the site’s home page. I recently read an article that said over 30% of search traffic lands on the homepage first. Perhaps we can schedule a time internally to review our strategy and come up with a better game plan to rectify these gaps in performance going forward?”
“Love it, let’s make it happen,” the CMO fires back, and Karla begins to think about the journey to revitalizing the brand’s web presence that she’s about to embark on.
The homepage is a vitally important piece of any well-functioning online storefront. The homepage often serves as the first touchpoint for users coming in through search channels, meaning that it is your first and sometimes only chance to make a strong impression on new prospective customers. The best online shopping experience always starts with a beautifully designed front end for your ecommerce website. For repeat users also coming in through search or via referral links to the homepage, it is also a cheap and incredibly effective opportunity to present fresh content, highlight products, and feature deals or promotions.
There are a plethora of homepage strategies and content modules therein that you can employ while building your custom ecommerce website to encourage users to take desired actions as they browse your store. While the list below details many website design principles for ecommerce, it is always important to note that testing and experimenting with your strategy is key to finding what performs. A feature that works great for one company’s goals and vision may not work for another–and depending on your brand positioning, the features you focus on when building your homepage can be adjusted to support key company initiatives.
For example, our client Duckworth opts to focus on their sustainably sourced and produced fabric and ethical labor practices on their homepage rather than call out price drops or items that are on clearance. This is because their target audience is likely to care deeply about supply chain transparency and knowing where the clothes they buy came from.
In this sense, treating your homepage (and site as a whole) as an ever-evolving prototype can be a great way of thinking as you go through this process.
Let’s dive into the key components of your landing page and online store design as a whole.
Upon scrolling through Duckworth’s homepage once more, we should now be able to observe all of these elements in action.
Below, you can see that the first thing users are greeted with when they go to the site is a banner with rotating lifestyle images.
Immediately below the banner lies the next section, a merchandising zone currently highlighting some of their seasonal bestsellers.
Following these products is a list of the brand’s main product collections, which they have categorized by fabric and weight, as seen here.
Lastly, some users are greeted with pop-ups on the homepage in an attempt to funnel them into an email opt-in. Below is one instance of these pop-up windows, in this case an explanation of Duckworth’s referral program with an incentive for the customer to engage further by providing their email.
Before jumping straight into testing the above strategies blindly, there are some important differences to note that might have a big impact on how you structure your online store for maximum usability. You want to ensure that your ecommerce homepage design is fully set up to deliver the best online shopping experience possible. Provided here are some considerations to get the juices flowing, but the list below is by no means an all-encompassing checklist. The amount of different variables that affect your onsite strategy is vast–once again, that’s why testing often and quickly is a vital part of knowing how to maintain an ecommerce website.
Team Tadpull has the advantage of managing a variety of different ecommerce homepages that we are able to test a wide array of strategies on. Using that experience, we’ve identified 3 common mistakes we see lots of marketers and ecommerce managers make when it comes to their homepage UX.
All too often, we see clients using the “set it and forget it” approach to their homepage–the strategy that made Karla culpable for a major dip in onsite performance. This is not to say your banner images need to be refreshed daily–or even weekly, depending on your team’s resources and/or product turnover rates. However, your website should continuously be examined and refined to find ways to improve the user experience. Testing things like calls to action on your banner overlay, product differentiation in merchandising zones, or which features you want to utilize on the homepage and in what order (social feeds, product collections, etc.) are all great strategies to play around with as you teest.
How to avoid it: Ensure that one member of your team is responsible for running at least one test of new features in your site strategy per month (or more often, depending on capacity) and leveraging the results to improve performance. Using seasonal trends, promotional sales, or new product imagery can be a good excuse to test different arrangements and see what works best.
Another mistake we see made commonly is devoting precious space in merchandising zones and product collections to illogically selected products or categories. You wouldn’t want to be promoting warm sweaters in your merchandising zone in the middle of July. Consideration of overall product performance, seasonality, and inventory availability is paramount to the success of your homepage sections–and also your ecommerce site as a whole.
How to avoid it: Cross-check your highlighted products/categories with the amount you currently have in stock, seasonality trends, and inventory turnover history before putting them in a featured section on your site so you can make sure customers won’t be disappointed when they click through to the product’s page.
Lastly, as marketers, many of us have the tendency to want to go as feature-rich as possible to drive conversions. In many instances, however, we’ve seen time and time again that less is actually more when it comes to your homepage. Essentially, you want it to be as easy and straightforward as possible for users to find and purchase their desired products straight from the landing page of your store. Every minute that a user spends in a seemingly endless scroll through impertinent content is time that they could have spent being funneled directly to relevant products that they can purchase in seconds. Striking the balance between having a content-rich homepage while also not being overwhelming and deterring visitors from ultimately purchasing is the sort of ecommerce nirvana we are searching for here.
How to avoid it: Ensure that your products are categorized clearly and logically and the hierarchy of classification is easy to navigate. Aim to add refining factors to product category pages, such as size or color, and sort options like ‘best selling first’ or ‘price: low to high’ to make it simple to find what the customer is looking for. Moreover, you should aim to pare down the steps in your checkout process to make it as fast and painless as possible so you can avoid high rates of cart or checkout abandonment. Plus, it never hurts to ask the user themselves: try sending a survey on the usability of your website to friends or past customers to get their direct feedback.
For users on NetSuite SCA, managing your homepage content is done through the NetSuite interface in out-of-the-box implementations.
Something that often causes users trouble is knowing what exactly to put in the URL field. Rather than inputting the entire image URL, use the file path, starting with website hosting files like shown in the below example, where any subfolders of site->home are set up for organization. Further, using the UTM %20 placeholder for any spaces within the URL will ensure the image is configured correctly.
Now let’s take a look at how to edit the pictures for the three lower featured images.
Without development customizations, editing the overlay text on both the homepage slide and the bottom banners will actually need to be handled by a developer who can hard-code your customization in the backend of the site code.
Development customizations are needed in order to make additional homepage content editable through either the NetSuite eCommerce interface or Site Management Tools. It is common practice with SuiteCommerce websites to have CMS areas added through development customizations, which allow for users to add things like text, merchandising zones, and extra images right from Site Management Tools.
Image from: freepik
