Nosto (2017) The Anatomy of a Successful Ecommerce Store.pdf
0 likes56 views
The document outlines best practices for optimizing an ecommerce store, providing a detailed guide on how to enhance various pages including the homepage, category page, and product page. It emphasizes the importance of personalization and customer insight to improve user experience and conversion rates. Various strategies are discussed, such as effective navigation, visual appeal, filtering options, and highlighting promotions to cater to online shoppers' needs.
Nosto (2017) The Anatomy of a Successful Ecommerce Store.pdf
- 1. ECOMMERCE PAGE The anatomy of a successful ecommerce store - a page by page guide to optimizing your website
- 2. Table of contents Introduction.........................................................4 Homepage….........................................................5 Category page....................................................11 Product page.....................................................23 Cart page........................................................... 35 404 page........................................................... 45
- 3. Nosto enables online retailers to deliver their customers personalized shopping experiences at every touch point, across every device. A powerful personalization platform designed for ease of use, Nosto empowers retailers to build, launch and optimize 1:1 multichannel marketing campaigns without the need for dedicated IT resources. Over 20,000 ecommerce professionals in over 100 countries are using Nosto to grow their business and delight their customers. Nosto supports its retailers from its offices in Helsinki, Berlin, Stockholm, London and New York.
- 4. Introduction In the ecommerce world, a fully optimized website is much like a unicorn - we’d all quite like to own one but we’ve never actually seen one for our- selves. This is, in part, because of the ever changing nature of this industry - just as you are getting to grips with one trend or technology, another crops up, meaning you are always one step behind. Ok, it’s true that your site may never be perfect and there will always be something to work on, BUT (and it is a big but) there are best practices out there that, frankly, you would be a fool not to at least try. Which is why we have created this guide - a look at how you can improve website, page-by-page.
- 5. Homepage As a retailer in an increasingly virtual world, the homepage has become the shop window through which your buyers are peering. But with the average web user taking only three seconds to decide whether it’s good enough to get them in out of the cold, it’s important that your first impression is a good one. So, how can you craft a homepage with a bounce rate lower than reinforced concrete? Make sure every second a customer spends on your home page counts by applying one or more of these five tips… 01
- 6. Big brands like Nike can afford to be specific in what they show on their homepage but smaller merchants should always aim to show a range. Show them what you’ve got Many first-time visitors to your site will rely on your homepage alone to determine what it is you have to offer them, yet many retailers make the mistake of being too restrictive in what they shine their spotlight on. Remember that only a fraction of sites belong to globally known brands such as Nike or Apple. These companies have paid millions in brand marketing to get to the point where customers come to their site with a fully formed idea of the product range on offer. This means that, if they so wish, they are able to commit a large portion of their homepage to the promotion of specific items and shoppers will still go on to find and buy the product they were looking for, even though it was’t represented. But if a smaller retailer took this approach, a new shopper is likely to see the dedicated home page, presume the site to be a one-trick-pony and leave. If in doubt, a good rule of thumb is to make sure that at least 30-40% of your product inventory is represented. As recent research by the Baymard Institute found, this is the amount needed for shoppers to easily identify what a company sells. BONUS TIP: While promoting range is important, don’t forget that not all categories are created equal – concentrate on the most popular or profitable items you sell and on especially those which differentiate your shop from competition. Exclusive brands, lines and models create a unique selling proposition. 6 HOMEPAGE
- 7. HOMEPAGE 7 Website personalization is optimization The average conversion rate of an ecommerce website is around 2-3%. But look at retail giants Amazon and suddenly this figure sky rockets to 13%. This is not a fluke - every person that goes to the Amazon website sees something different. Imagine that in terms of the real-world; you walk past a shop window and the display changes to suit your likes and needs. No store on the high- street would pass up the opportunity to connect with potential customers in that way, and neither should you. The question is, how do you replicate this kind of tailored shopping experience on your homepage? Well, you may not be as big as Amazon but you still have the same data at your fingertips. And with a study by O2 showing personalization to be capable of increasing sales by 7.8%, it’s not data you will want to ignore. » » USE customer insight to create a 'recommended for you' section - a selection of products based on a customer’s unique browsing and buying behavior. This will entice them further into the site by appealing to their personal preferences. (1) » » HIGHLIGHT seasonality with best sellers or a personalized 'new in' selection. If physical space is limited, prioritize personal content and display top lists as a fallback for new customers and those you haven’t seen for a while. (2) » » LIST recently viewed items for returning customers - this removes unnecessary friction by reducing the number of clicks between a returning customer and products they previously showed interest in. With buying cycles becoming longer, it is likely that a user will come back to your site multiple times before they complete their purchase and this will make sure they have a clearroute to the check-out each time. (3) 1. 2. 3.
- 8. 8 HOMEPAGE Engage with your mobile visitors Browsing patterns between mobile and full-size screen differ a lot from each other and optimizing the homepage for mobile is worth a guide of its own, so let’s keep it to the basics this time… Physical space of a smartphone screen is very limited compared to an 11–13 inch display, and a thumb can easily cover one sixth of a display so make it easy for visitors to continue their visit to your site by using visual and simple clickable objects on your homepage. Carousel-design and its efficiency for full-screen is often debated, with the majority of visitors either clicking the content immediately or browsing down under the first fold, mobile users are more used to swiping product or content carousels. Encourage this action with small visual cues and you will save space and increase engagement. (4) If they know what they want, give it to them While recommending items to your customers is a great way to keep them on your site, there are going to be some people who already know what they want which is great news for you; users who use the search functionality are 3-4x more likely to convert. Make it easy for them to do just that by having a prominent search box that is well-positioned on your homepage. And if you really want to give them what they want, allow them up to 27 characters per search query. According to Jakob Nielsen’s recent web usability study the average search box accommodates only 18 characters, with 27% of queries not fitting in at all. (5) If the eyes are the window to the soul, then your homepage is the window to your business and these are just some of many ways to dress that window. 5. 4.
- 9. HOMEPAGE 9 Boast about bargains Finally, don’t neglect the bargain basement bits. Especially with sale dates like Black Friday and Cyber Monday. Some people don’t know exactly what they want, but they do know they want it at discount price. In fact, according to E-tailing group, 47% of online shoppers are only looking to purchase discounted items and 62% are looking specifically for a sale section. Make sure your homepage has a prominent discount area and you are going to keep penny savers spending their dollars on your site. (6) 62% of online shoppers are looking specifically for a sale section 47% of online shoppers are only looking to purchase discounted items 6.
- 10. Category page Ah, the category page - perhaps the most familiar page of the modern ecommerce website, hark as it does back to the days of mail-order catalogues. With a structure based on long lists of various products, it stands, in some way, as a testament to human beings as creatures of habit- resilient to the pull of technology and the possibility of new ways of doing things. Yet, if you are willing, there is much that can be done digitally to make sure your category page doesn’t end up the same way as your catalogue, much ignored and resigned to the trash… 02
- 11. 12 CATEGORY PAGE 1. This is a page, particularly, that requires consideration before it is actually reached - primarily in the way the content is split and then represented in the site’s navigational design. With this in mind we will commit some time to looking at how you first establish your categories and how they should inform your navigation, from which we will go on to concentrate on the features of the page itself... Navigation When creating the structure for your main and subcategories consider the following: » » YOUR most important and broadest categories should form the primary headings of your menu- those that will be visible at all times as your customer navigates your website. However, it is worth noting that while it may feel at odds with the other categories you have created, if you have a product that outsells everything else on your site then consider allocating some of this prime navigation space to it. 1. Levi’s have a broad range of items but also recognize that 501 and 511 jeans are their iconic pieces and so give these prominence in their navigation. » » WHEN appropriate, list subcategories under as many applicable root categories as needed - this will allow customers multiple routes to their desired product instead of forcing them down unnecessary dead ends. For example, a pet store’s main category structure may be something along the lines of dogs, cats, small animals, big animals, pet food, accessories, gifts. Dog and cat food can then be stored both under pet food but also the dog and cat range. 2. Female customers on the BooHoo site can get to new items for clothes by going to the ‘New In’ category or the ‘Women’s’ tab. » » ACCORDING to Orbit Media, you should have no more than seven categories forming the root of your category navigation. This is, in part, because it allows each category more authority from an SEO perspective but also because the human short-term memory only stores seven items at a time - if a person is able to remember, broadly, what you sell, then they are more able to move around your categories quickly. In terms of subcategories, these will normally, by their nature, be greater in number so should simply be enough to get the job done without being overwhelming. 3. Juniqe, like many ecommerce sites, stick to the seven or less rule when it comes to categories.
- 12. CATEGORY PAGE 13 2. 3.
- 13. 14 CATEGORY PAGE » » THE NAMING of your categories- this is important for two reasons. Firstly, it tells people, at a glance, the range of what you sell so that they can decide whether to delve deeper into your site or to go elsewhere. Secondly, the category names which make up your navigation will also be a key driver of traffic to your site - contribute as they do to your SEO efforts. For this reason you should focus on clear, functional and commonly used terms. It is not a place for marketing talk or funny and witty copy. The basic rule of thumb? They shouldn’t have to click on it to know what’s in there, but for a more scientific approach do your due diligence using Google Adwords to find out the most searched terms. 4. Made’s category names are clear and straight to the point. » » ONCE you have created your categories and named them, also consider the way you order them - both in the primary navigation and any subcategories in dropdowns. The smart-sorting of categories would position the most common/valuable ones on top and least valuable at the bottom. This can be achieved simply by reviewing sales/ERP data. However, remember the order should be logical for people - if your products have a natural flow, take this into consideration. 5. Zalando have put everyday items such as dresses over more specific and less frequently bought pieces like trench coats and swimwear. 4. 5.
- 14. CATEGORY PAGE 15 Look and feel: Exactly how your page should look is going to depend on your brand and what you sell but here are some useful best practices: » » MAKE it visually clear where a visitor has landed. Category pages are often SEO optimized, as well as paid traffic being driven there - this means a customer may end up on a category page without taking a journey from the homepage. It is therefore important to give strong visual cues as to Eton Shirts use both a large inspirational image and a supporting text to signal what page shoppers have landed on. where in the site they have entered. This can include inspirational banners stretching the full width of the page. These should highlight multiple items to show range and keep the page timely and relevant, for example, if it is summer and you are a clothing retailer, pick some of your best selling summer pieces. Imagery can and should also be bolstered by a descriptive header that details the type of products that will be found there. This also counts towards SEO and should thus be optimized.
- 15. 16 CATEGORY PAGE Filtering: One of the primary issues with category pages is the number of items that can be held there. A never-ending list of products is neither appealing or useful to shoppers who don’t have time to sift through them. This is why filtering is of such key importance- but with only 16% of major ecommerce websites shown to offer a reasonably good filtering experience, here are a few tips on getting it right: Let’s start with where to put them. Broadly speaking there are two popular options that you may want to consider. » » LEFT-HAND navigation was the standard for a long time - keeping with this tradition will avoid a disruptive UX that may be confusing to the shopper. And as we all know, if a shopper finds your site hard to use, they won’t use it. However, studies studies have found that tunnel vision and a tendency to focus on the upper center of the page, mean that users can sometimes not use the filtering options at all. They instead confuse the sorting options (normally found in the upper center) as the primary way of trimming the product list. If you do choose to use left-hand filter navigation then reduce the chance of this happening with a notable filter design - i.e checkboxes 7. ASOS keep with the more traditional left-hand positioning for their filters, using check boxes to make them more obvious. » » A HORIZONTAL toolbar which combines both filters and the sort tool - this has been shown to combat the issues stated above and also allows for larger product photos, however, because of the limitation of a page’s width vs length, this approach only works well for store types that naturally have only a few filters. 8. Scarosso have both filters and the sort capability at the top of the page. » » ROWS are the most used layout in ecommerce, with an average of three items per line. That said, it isn’t a case of one size fits all and should be decided on a category-by-category basis. For example, you may want to have just one column, giving each product in the list full width of the screen. This is useful when you have products that by their nature people want to see a lot of information about i.e. home appliances, as is shown in the Nespresso example. It also works well if you have a small category with a number of simple and complementary products that are likely to be bought together, as it allows people to browse them together and select what they want from the category page itself. 6. Nespresso opt for a one column layout. 6.
- 16. CATEGORY PAGE 17 8. A never-ending list of products is neither appealing or useful to shoppers who don’t have time to sift through them. 7.
- 17. 18 CATEGORY PAGE In terms of the filters you should have, this will of course depend on what you are selling, but things to keep in mind: » » IF there are multiple ways of filtering your products then have multiple filters, it is about giving your customers the options they need to find what they want. If you are selling computers then they may be looking for a computer in a certain color, with a large hard drive AND a large screen. Allow them to layer the options you give them so that they are only left with the products that fit in with their criteria. Serving someone relevant products means they are more likely to buy. 9. Currys give an extensive range of filtering options. » » YOU know your customers more than anyone else - use this inside knowledge to know what might be useful to them, that others might not think to include. For example, as a woman’s clothing retailer you may know from target market research that many women are not comfortable wearing tops without sleeves. You should then add a “long sleeve” filter option to your style filters on the category page for tops. 10. Zalando have added some very specific filter types that other fashion retailers do not have, such as collar type. » » IF your business is prone to seasonal change then add temporary and timely filters- for example, if you are a clothing company and it is summer then you know that a lot of people are shopping for their holiday - why not add a “holiday” option to the look-book style filters to save them time? 11. TopShop add filters such as “Festival” and “Holiday Shop” to their dress section. 9.
- 18. CATEGORY PAGE 19 You know your customers more than anyone else - use this inside knowledge to know what might be useful to them. 10. 11.
- 19. 20 CATEGORY PAGE Sorting: We have already touched on sorting in the last section, as something that is complimentary to filtering and can even be combined. However, it is worth noting that, especially if you are using a left-hand navigation, this is a must. Customers may have whittled down the items they want to see, but now the order in which they want to see them becomes paramount. While it will depend on your business, most common are factors such as price, rating and popularity. However, if you really want to go above and beyond, then dynamic and personalized sorting is the holy grail. This means you automatically adjust the product order for each user separately based on their browsing & shopping history, cart content and merchandizing rules. Offering a truly personalized and relevant experience. For example, if someone shopped Nike sneakers in the past, show the new Nike models higher up in the list. If they have searched for a specific brand, then highlight that brand on every category during that visit. It is better for your customer and better for you. (12) Personalization: » » WE’VE already determined that the pure number of items on a category pages is often one of the main issues people face on this area of an ecommerce site. And as we’ve seen, filtering and sorting options can be used to combat this. But they are only of use if a customer knows what they are looking for. What if they they are still in the discovery mode of shopping? Automated product recommendations could be the answer. » » GO for a 1:1 personalization slot if you have enough data on the individual browsing - this will bring the most relevant products to the forefront, making the shopping journey quicker and easier. Otherwise Best Seller recommendations are a great option - these will show what items are most popular in that category, automatically highlight the products most likely to convert and show product range. It will also mean that seasonal and trend based changes are reflected. 13. Sarah Raven use best seller product recommendations on their category pages. Puma use multiple sort options. 12.
- 20. CATEGORY PAGE 21 Infinite scroll vs. pagination vs. “Load more”: The way to split your products across a number of pages can be a bit of a tricky subject. On the one hand infinite scroll (the ability to view a whole category on one page) encourages browsing and ultimately exposes user to more products, but without a reason to pause, it has been shown that shoppers end up scanning more and so are less focused on individual products. This means they are less engaged with each item and when we are less engaged, we are less likely to buy. Pagination however, can make the process clunky and leave users feeling frustrated. The answer, according to Baymard Usability tests is the use of “Load more” buttons and with that, lazy loading. Lazy loading means elements are present, but are not loaded until they are needed. This means that the products appear to be on one longer page, but the natural break “load more” and lazy loading offers means that shoppers are more engaged. It is the best of both worlds. NOTE: If you do still opt for pagination, give shoppers the option to select how many items they see on each page - this puts the power back in the hands of the shopper and works to somewhat naturally offset the frustration of page loading delays, as they know they have elected to view that many products. Remember to also include all page numbers too so that it is easier for them to return to a certain page. 13.
- 21. 22 CATEGORY PAGE Product information: Key product information can be crucial in eliciting interest from passing browsers, yet with an area as busy as the category page, with many different products vying for attention, there is a thin line to tread. Too much information and your viewer faces being overwhelmed, too little and you may find they fail to be enticed any further. It is up to you to decide what is key information in relation to your products but there are general patterns that have been found to work. In consumer electronics, features such as review stars, bulleted key details and promo ribbons have all proven popular. In fashion, color and size options are easily represented in icon form. If you want to have the best of both worlds, showing only key information but also giving shoppers the option to delve deeper without clicking through, there is a way! Consider a pop-up box triggered when a user’s mouse hovering over a product option. The pop-up can include more product details, a video or an additional image with the product from a different angle or worn by a model. 14. Currys, knowing what’s important to their target market and because of the nature of their products, have quite a large amount of key product info on their category page. So, there we have it - everything you need to consider to craft a category page that UX dreams are made of! Go forth and categorize! 14.
- 22. HOMEPAGE 23 Product page The product page- crunch time for ecommerce professionals. You’ve got the shopper to your store and, even better, something has caught their eye- now it is that product’s time to shine. But will it be enough? Or will it be a case of ‘so close yet so far’? In this chapter we will explore some of the ways to optimize your product page, providing you with a best practice framework to be adapted to your specific customer base and business needs. 03
- 23. 24 PRODUCT PAGE High-res product images and lots of them Do not underestimate the importance of your product images - with all other senses stripped away, online shoppers rely heavily on visual cues. Quality AND quantity is the aim. In a report by IRCE 75% of shoppers asked listed the quality of product images as the most important feature when shopping online. This matters for two reasons - firstly clear and crisp images not only look better but lend authority to your store. Secondly, larger images were found by Visual Web to increase sales by 9% but if you are going to go bigger then you need the quality to back it up or you risk a blurry mess. As for quantity, depending on what it is you are selling, you may also want to snap a few extras focusing on product details or showing the product from different angles. Tick all of these boxes, investing a little time and a little money, and you should see an improvement in return rates. But don’t be afraid to go above and beyond - if you can shoot a product video for your top range products, If you only remember one thing from this section let it be this: your product page has one purpose- to convince your potential customer to click your “Add to cart button.” If you get caught up in the granular details remember, the other elements and content on this page are not inherently valuable - their job is simply to serve this higher aim, mitigating or removing all psychological and technical obstacles between your customer and that oh-so-important action. even better. In fact, shoppers who view video are 1.81x more likely to purchase than non-viewers. 1. Eton Shirts use clean, sharp photos of the product shot from a number of angles and in high enough quality to allow the user to zoom. Distinguishable add-to-cart button When it comes to add to-cart-buttons we know one thing for sure - size does matter. But don’t go creating a monstrosity that takes up half the page just for the sake of it. What is important is that it is big enough to be prominent on the page - what that means in relation to your site’s design is up to you. Size however, should be used in combination with other visual aspects such as color. Orange is the most frequently used color but that doesn’t necessarily mean it will work for your brand. What matters is visual contrast. If in doubt, use a color wheel to find out what best contrasts with your brand while remaining complimentary (to do this take your most prominent brand color and look at what is directly opposite it on the wheel). As for placement, it’s going to depend on the design of your page and the virtual real estate on offer. There aren’t hard and fast rules but being distinguishable is again key. Although they don’t need to be found immediately next to each other it is generally best practice to have the button in the same area as the price. The right-hand side is also often favored and while you don’t have to stick with the crowd, people are creatures of habit. Surprise them with exotic design decisions and you may find you disrupt the UX, and see a drop in conversion. 2. Junique does an excellent job of keeping the call-to-action in the forefront of the shopper’s mind- aligned right and in a bright contrasting color it is clear to find. The button also changes color slightly when it is hovered over to encourage action.
- 24. PRODUCT PAGE 25 1. 2. Do not underestimate the importance of your product images - with all other senses stripped away, online shoppers rely heavily on visual cues.
- 25. 26 PRODUCT PAGE Payment, shipment and return policies An ecommerce product page isn’t just about what you add but also what you take away - namely barriers to purchases. In a recent study by ComScore 82% respondents said they would complete a purchase if they could return the item or have free return shipping. But while free, international delivery and hassle-free returns are great if you can offer them, the main thing is transparency. According to Kissmetrics 28% of shoppers will abandon their shopping cart if presented with unexpected shipping costs. This is less about the cost itself but the element of last- minute unwanted surprises. Whatever your policy is, remember to highlight it. Depending on your target market you may also want to add a security certificate or a trust-badge, if this is expected by your customers. 3. Paul Evans are a good example of this done well with a concise, fair returns policy, displayed clearly. Detailed product descriptions While trends in web-design may be leaning towards the minimal in the West, your product descriptions should not. In fact, user experience studies by Neilson Norman group found that 20% of the the time when a user failed to successfully complete a purchase it was because of unclear product information. The aim should be to pre-empt any questions a potential shopper may have about a product so that they will continue to the cart page rather than reverting to Google (where they may also find an alternative retailer). Consider whether you have given enough details on the following; materials, technical details, instructions for care and use, measurements. But don’t be lazy and use manufacturer’s default copy - not only is it possible that it may hurt your SEO efforts but it could also leave potential shoppers uninspired. Also, try to balance the functional and emotional in your descriptions - too descriptive and the information that is needed to make a purchasing decision may be lost, too sparse and you might not be giving them enough to get there in the first place. Remember: description text cements why customers should buy the product they are viewing. 4. DID have a great tabular structure for additional content. Social proof, testimonials, customer reviews and other user generated content Product descriptions, as just stated, are imperative to get right if you want to get a shopper to the finish line and prevent high return rates. But, that doesn’t mean you should stop there. According to EXPO, consumer reviews are trusted almost 12x more than descriptions from manufacturers, with customers 63% more likely to buy from a site which provides them. This is particularly effective for industries selling expensive items, as hesitancy over purchase is higher. However, you need to accumulate enough content to really move the needle so consider how you can encourage customer reviews, incentivizing if needed. Social media has also opened up new avenues to provide social proof - with tools such as Bazaarvoice aggregating and displaying the relevant posts on your site for you. Remember, however that social media style implications and restrictions may make these too lightweight to be effective on their own. While a instagram photo of a customer wearing a dress is great, it doesn’t go into the same depth as most customer reviews do. 5. BlackMilk, an Australian female fashion merchant, ask shoppers to use their hashtag when posting about their product on social media and then integrate these photos on their product page.
- 26. PRODUCT PAGE 27 3. 5. 4.
- 27. 28 PRODUCT PAGE Highlight variants Product variants are, quite simply, the different versions of a product that you stock - this may include options such as size, color, material and even price. Many retailers will have items with a high number of variants and consumers are used to seeing these listed on a product page. However, variant options can interfere with your UX. This is because they often require a shopper to make extra product selections before adding an item to their cart. If it is not clear what selections a customer needs to make then the buying process can be disrupted and shoppers’ become frustrated. The best case scenario is a short and flustered clicking frenzy before they work out what to do, but the worst case scenario is that they give up altogether and go elsewhere. To avoid this make sure the variants are clearly marked, then draw immediate attention to any section a user fails to complete. Red text, arrows, movement - use whatever tactics you want, subtlety should be abandoned here so that your product is not. And one last thing - if you are listing a number of variations of the same product, try to provide photos for as many of those variants as possible, especially those that are particularly visual (i.e. color). 6. Retailer BooHoo does a great job of clearly showing all the variant options for their product as well as what is in stock. If you try to proceed without clicking an option the “Please select color and size” text repeatedly flashes at you, making it clear what needs to be done to proceed. They also highlight the selected color and size variant making it very clear which product you have selected. 7. Ralph Lauren is another good example, adding a reminder to “Please select a size” above the CTA if the shopper tries to proceed without making a selection. Simple UI tricks like this can make a big difference. 6. 7.
- 28. PRODUCT PAGE 29 Provide an in-depth size guide According to Econsultancy, retailers in the US report a return rate of between 20% and 40% for online sales, with poor fit cited as the number one reason. Now, size may be of obvious importance for the fashion world but it can be similarly crucial in other verticals as well. For example, a bicycle’s frame dimensions is as important a detail for a cyclist as the dimensions of a shirt for other shoppers. The first thing to do then, is to figure out if this is a piece of information that will matter to your customers. The second thing, is to figure out how to best represent it... The simplest way to specify dimensions is in product descriptions- clearly listing as much useful size information as you are able to. But depending on the product on offer there may be other more effective, or more interesting ways, of doing so. By far the most efficient way in fashion is to reveal how tall the model is and what size the model is wearing, as shown in the image on the right from the Caliroots website. Granted, size guides can be laborious to produce. We recently talked to a merchant in a fashion business who does their own sizing guide the hard way- measuring every single variant in-house as actual sizes can vary between brands and even within a brand’s own ranges. This is hard work, but it is also top service and can pay off as a reduced return rate. For a more scalable solution consider using technology such as Virtusize, which tells shoppers the exact dimensions of the clothes and allows them to compare the fit to previously purchased items. Of course, the options don’t stop there- the product page is what you make it, and really your imagination is the limit. Ikea for example, went one step further to demonstrate the size and fit of their products by offering an augmented reality option where you can virtually place an item into your room to see how it would look and fit. 8. Caliroots tell you the exact measurement of the model and the size they are wearing. 9. Virtusize gives exact information on the dimensions of clothing, as well as comparing new items to pieces already bought. 8. 9.
- 29. 30 PRODUCT PAGE Use cross and up-selling product recommendations The product page is not only an opportunity for your potential shopper to buy something from your store but an opportunity for you, the retailer, to highlight more of your products and increase your chances of a larger average order value. According to Forrester Research analyst Sucharita Mulpuru, product recommendations are responsible for an average of 10-30% of ecommerce site revenue (an average we have also seen at Nosto), and your product pages are the perfect place to drive this. But don’t think of recommendations only as a trick to drive greater basket size. Both alternative and supplementary products should be highlighted here to enable easier product discovery. Since a customer is typically still in search-mode while viewing product pages, alternatives for the viewed item should be prioritized. Research from Econsultancy has shown that upselling can drive up to 4% of sales, performing 20 times better than cross selling, something that we have also seen with our clients at Nosto. This isn’t to say that supplementary products, normally utilized more on the cart page, have no place here. By offering both options you allow the shopper choice to explore, rather than forcing them down one avenue. 10. ASOS not only upsell with alternative products but also allow customers to accessorize with a “buy the look” section. BONUS TIP: The role of cross-selling recommendations is not always to be clicked, so don’t be surprised if these have a lower CTR to alternative recommendations. The aim can sometimes be simply to be shown, exposing a shopper to more of the product inventory, or, as in the ASOS example to the right, helping a shopper imagine the product they are interested in as part of a complete picture, reinforcing their choice. 10.
- 30. PRODUCT PAGE 31 Provide two breadcrumb trails A breadcrumb trail is a form of secondary navigation that shows a shopper where in the site map they currently sit. Breadcrumbs trails are nothing new, in fact for ecommerce sites with a substantial page hierarchy depth they are often included as a standard page element. A regular vertical breadcrumb allows you to jump upwards in hierarchical structure, for example back to the category page. However, a usability study by the Baymard institute found that ecommerce companies should be offering two types of breadcrumb trails; both hierarchy-based and history-based breadcrumbs. Yet, according to this same study ‘68% suffer from sub-par breadcrumb implementations: 45% have only one type of breadcrumb (typically hierarchy-based, lacking the history-based), and 23% don’t have breadcrumbs at all’. A good product page should then feature a secondary breadcrumb that is tied to your personal browsing history. This takes into account the fact that the user may have not taken a linear path through the site, or that, if they did come from the category page they may have applied a number of filters (in this case ‘return to results’ will allow a smoother UX). By combining a vertical breadcrumb with this browsing history breadcrumb (referred to by Baymard as a ‘horizontal’ breadcrumb), you allow a shopper to choose how they wish to explore your site, making it easier for them to do so. Use product availability to your advantage Stating that a product is available and ready to ship (even specifying when you will receive it, if it is ordered now) is a good way to increase the conversion rate on your product page. It is all about removing barriers to purchase. For example, if you are buying a gift for a friend’s birthday and you aren’t sure that it will arrive on time then you are unlikely to buy the product at all. By telling someone that they are able to buy it and even when they will receive it you make it much easier for them to imagine themselves doing so. Sometimes introducing a possible availability-driven barrier to purchase can actually motivate a shopper. For example, many ecommerce merchants now actively quantify and show stock availability when items are low, creating a sense of urgency and encouraging customers to make the purchase there and then. And if you don’t want to wait for your product stock to run out consider time-bound free shipping instead. 11. House of Fraser, while not explicitly stating stock numbers, note how many other people are looking at an item in real-time. By highlighting the popularity of a piece, the subtle implication is that it may sell out thus driving buying behavior. 68% of ecommerce companies suffer from sub-par breadcrumb implementations 23% of ecommerce companies don’t have breadcrumbs at all 11.
- 31. 32 PRODUCT PAGE Offer live chat support As we have consistently illustrated, one of the things that is key to your product page is conveying as much information as possible. That said, you are only human, and even with technology at your fingertips, it is highly unlikely that you are going to be able to preempt every possible question a customer may have. But should a customer have one of these questions, what option are you going to leave them? Walk away without purchase? Wait days for an email response (while looking elsewhere)? Of course not. To address this problem as quickly and easily as possible consider enabling instant chat support on your product pages - this allows instant answers to your customers’ questions, enabling a smooth path to the cart page. In fact, 31% of online shoppers from both the US and UK say they are more likely to make a purchase after a live chat. 12. OddMolly have live chat enabled across their site to allow customers to get quick answers to any queries, as well as acting as data capture Enable sharing capabilities Theabilityofyourshopperstosharefromyourproductpage,whilenotimmediately focused on conversion, should be considered as a feature that goes above and beyond, taking your shoppers from customers to promoters. Allow customers to send the item they are viewing to other shoppers as a way of enabling user generated recommendations. TopShop, as seen in the image on the right, allow a shopper to share directly with another person by using Facebook messenger. Social sharing is also useful as a way to amplify your company’s voice and get extra exposure for your products. Be careful however; a case study by VWO showed that when hardware company Taloon removed their social sharing buttons they saw a 11.9% increase in CTA clickthroughs. This may be attributed to the fact that on most pages the number of shares and likes was 0 which then acted more as a social deterrent. The lesson? Only implement if your products are the type that encourage social sharing and your customers the type to partake in it! Teenagers are more likely to ‘like’ and share a top that they like than an older audience are likely to share a hammer they need for practical reasons (as was the downfall for Taloon). I would recommend testing with all of these options, as to what works best for you will depend on your company. Remember, the aim of this page is still, and should always be, to get the item to be added to the cart- only you will know if too many bells and whistles in terms of sharing options are likely to distract your audience or enable them. GHD for example have a “send a hint” feature that allows shoppers to email a product to someone else as a not-so- subtle way of letting them know they want it, which also helps GHD collect valuable email-addresses. For some companies this may be a distraction from the desired CTA, but GHD is a company whose products are often used by teenage girls, who are unlikely to be able to afford the fairly hefty price tag. This means that is it likely that allowing them to share the product as a gift suggestion is going to encourage a purchase rather than distract from one. The answer? Test, test, test! 12.
- 32. PRODUCT PAGE 33 13. Topshop offer their shoppers the chance to share their products across four different social platforms. 14. GHD have taking sharing to another level by allow users to ask others to buy the item for the by sending a “hint.” 13. 14. Social sharing is useful as a way to amplify your company’s voice and get extra exposure for your products.
- 33. HOMEPAGE 35 SITE OPTIMIZATION SERIES 35 Cart page The cart page - the destination to which all your previous efforts have been directed. You’ve created an enticing and easy to navigate home page and made sure your product page is fair, representative and encourages your customers to journey further into your site. And it’s paid off- there are items in the cart and, if all goes to plan, your shopper is about to cross the finishing line and head off into the virtual sunset with some of your wonderful goodies under their arm… 04
- 34. 36 CART PAGE Craft the perfect cart contents summary: First things first, before people go on to buy anything, they want to be sure of what they are buying. Allow them to see everything they have selected quickly and clearly by using high quality product images, reinforced with an outline of key details such as size, color and quantity- along with options to remove or update quantities in their cart. This is much more preferable than forcing them back to the product pages for extra information and order changes, as this essentially takes them a step back in the journey and further away from your goal. That said, if they do want to do a fuller review you need to make it easy for them to do so to avoid them getting frustrated and leaving all together. With this in mind, make sure the product titles in the cart also work as a link back to the individual product pages. Highlighting brand information or special details such as an item being limited edition with a logo or ribbon is a good tactic, especially in fashion, as it adds extra perceived value to the purchase, tempting the customer to go on to buy. Once people are happy with what’ve they’ve got they are going to want to know how much it is going to cost - make sure to list individual item prices, as well as the all-important total. If there are extra costs (tax, packaging, insurance) then make sure to outline these clearly too. 28% of shoppers abandon their shopping cart if presented with unexpected shipping costs. 1. Babyshop give a clear, itemized cost summary with individual costs outlined. While extra costs can be a turn off, when they can’t be avoided transparency will do a lot to negate their effects. Alternatively, if you are taking away additional costs make sure the savings are listed so people can be motivated by them, for example using a “You save” section in your virtual itemized cart bill. 2. Caliroots make sure to reiterate the saving the customer is making by crossing out the original price and highlighting the new price in red. PART I Removing barriers to purchase Become complacent now and you risk falling at the last hurdle. And failure doesn’t just look like a cart abandoner (although that, of course, is the worst case scenario)- it can also mean that you have failed to take all the opportunities that are presented at this stage in the journey, optimizing the experience for your business and for your potential customer. With that in mind we shall look at the the best practices for this page in two sections - first, how to drive customers towards the checkout, and secondly how to use this page to optimize conversion and average order value.
- 35. CART PAGE 37 2. Highlighting brand information or special details such an item being limited edition with a logo or ribbon is a good tactic. 1.
- 36. 38 CART PAGE Be clear with delivery schedule and details: Delivery time, shipping and returns options are all large factors in a person’s decision to buy. Your first defence against the effect they can have on your conversion should be a policy that is both fair and attractive to your customer. But the quickest, cheapest delivery in the world isn’t going to help convince them to make the jump if they don’t know about it. It should, of course, be communicated throughout the customer journey but the cart page particularly is one place where this detail really needs to hit home. Consider the following; » » IT should be immediately clear what options you offer for delivery, including price differences and the expected delivery date for each. If there is a time restriction for certain options, for example same-day dispatch, then consider using a countdown to create scarcity and motivate them to check-out quicker. » » INTERNATIONAL customers might still be wondering if you ship to their country. Rather than making them wait to fill in their details and find out at check-out, it is worth having an IP-address based statement which reassures them that this is the case. » » IF they’re eligible for free shopping, make that clear. If they need to take further steps to be eligible, perhaps reaching a certain cart total, then makes those steps clear. For example, calculate and show just how much they have left to spend (more on this later). » » REITERATE your returns policy. As we have mentioned, if you have a good returns policy you should be shouting about it from the beginning but make sure to boldly state it here too. The most important things are clear and concise language, jargon has no place here and if there are T&Cs make sure to link out to a page where there is more detail. State your payment options and show that they are secure: A book could be written on payment methods and their importance in digital shopping (in fact, several have) but, as we’re limited on time, the advice we will give you is that whatever you choose to offer, make sure all options are clearly presented, from PayPal to online banking and cash on delivery. And once you’ve told them what you offer, make sure to reassure them that these options are secure- 13% of shoppers abandon carts due to payment security concerns, something that is especially an issue for lesser-known brands. Security certificates and trusted shop-badges will help support this aim, so give them prominent position! 3. 3. Always Riding are a good example of a cart page done right- with a cheerful reminder of their free postage offer and a detailed countdown for their daily dispatch cut-off, combined with a delivery date promise.
- 37. CART PAGE 39 4. Use multiple CTA-buttons: The CTA, the holy grail of any ecommerce page and of even more importance so close to the end of the customer journey, which is why there are a number of things to take into account: » » IF your shopper has been on a spree (and let’s hope they have!) your cart page could end up being a long one- if this is the case prevent unnecessary scrolling by having multiple “proceed to checkout” buttons, one at the top and one at the bottom. Also differentiate them from the rest of the page by using clear, contrasting colors. » » MAKE sure your CTA button’s text/description clearly states what happens after clicking it, for example ‘proceed to checkout’ as opposed to ‘buy’. It is a small difference that may seem insignificant but it can make for a jarring UX if a customer thinks they are done, only to find extra steps on the next page. » » IF possible, and in line with your brand, funny and personal text is a nice touch and distracts from the fact that this is a purely mercenary transaction, reminding customers why they should want the products in the first place. The text should also contain a verb to represent and inspire action. 4. Juniqe clearly label themselves as a secure payment option, giving prominent position to their security certificates. 5. Another nice element of the Always Riding cart page is their combining of serious CTA “Check-out securely” (which reassures the customer that their money is safe) with a light-hearted “Ready To Ride?.” The latter reminding customers of open roads and wind in their hair, rather than money leaving their bank account. 5.
- 38. 40 CART PAGE Allow them to take money off their total: When surveyed 30.9% of retailers said that they found a percentage discount was the most effective customer incentive. If you have given shoppers the chance to save some precious pennies, it should be easy for them to do so - otherwise you risk their pleasure at receiving money off being replaced with frustrations over bad UX. Have a discount code box, clearly labeled- with instant updates made to the cart value. 6. Pura Vida clearly label the area to apply coupon codes, then showing what discount has been applied, the amount deducted and the new total. Offer live chat: Ideally, if you have done everything listed before then your customers should have all the info they want and need to make their purchase. But people, products, websites and business are all unpredictable and there is a chance that there may be something else they need or want to know. In which case, you want them to be able to ask it and get an answer as quickly as possible so that they can carry on with their journey. To avoid taking them away from the cart page, where they are well placed to make a purchase, add a chat service which opens in page. Effectively, this allows your sales representatives to remove any remaining barriers to purchase in real time AND gives the shopper better customer service. 6. People, products, websites and business are all unpredictable.
- 39. CART PAGE 41 Remember, if your conversion rate is in-line with the average then less than 3% of people are going to make it here. Once they are, you not only want to encourage them to buy what they have, but make the most of the opportunity by encouraging them to buy more, increasing your average order value. We are talking, of course, about suggesting other items from your inventory, allowing your customer to indulge in impulse purchases. Why impulse? On home, category and product pages a customer is still scoping out what you offer and what they are interested in, as well as possibly juggling between options. On the cart page however, they at least think they have everything they need and generally aren’t looking to compare or browse further- which is why items added at this stage will be spontaneous by nature. They should, therefore, be relevant either to the person or the items they are buying to stand a chance of being picked in this, the last chance saloon. While these items may be selected at the last second however, the difference it could make to your business should not be underestimated. With attracting and converting customers being such a costly and time-consuming business, you want to make each one count. If each converting customer adds just a small ticket item to their basket before checking out, increasing your average order value, then the numbers soon add up. To take advantage of this consider the following: “Other customers bought”: Uses crowd logic to highlight what other shoppers purchasing the same items bought. Customer behavior is very telling and when items are bought together it often reflects natural relationships between your products. 7. Spanish store Okeysi pair a browsing history recommendation with a crowd logic based one- showing the shopper which items are seen as complementary to the products they have selected. PART 2 Optimizing for increased average order value 7.
- 40. 42 CART PAGE Budget options or accessories: Small-ticket items that complement what a customer is already buying are a quick win. For example, if you sell electrical goods: batteries or power adaptors. This not only maximizes your chances of increasing your AOV but also provides good customer service by ensuring they have everything they need to enjoy their new purchase. 8. Caliroots suggest small-ticket items relevant to the sneakers in the basket in a vertical recommendation at the side of the page. 8. Free shipping recommendation: As we previously mentioned, free shipping can be a big draw for many customers. But with it coming at a cost to your business it may well be the case that you don’t want to offer it until a certain in-cart monetary value is reached. If this is the case, don’t just tell customers what they need to hit a target- help them get there! Calculating how much they have left to go (as mentioned earlier in this chapter) is one thing, but what about showing them the items that will bridge that gap? Based on the contents of their cart but with product ranges limited to those which push a customer above the free shipping threshold. 9. Swedish company Scandinavian Design Center make cart page recommendations specifically to help customers get free shipping. 9.
- 41. CART PAGE 43 11. 10. Browsing history reminder: Use space on the cart page to remind shoppers of items they had previously viewed but not added to cart. This makes it easy for them to reengage with pieces they had forgotten about during their shopping journey. 10. Junique come straight out and ask if the shopper has forgotten any products, giving them one last chance to add to cart. Personalized recommendations: The cart page is one area in your store especially suited to one-to-one personalization. Why? Because the items that have made it here, into the virtual cart, are most in-line with your customers buying preferences. This information is invaluable and puts you in the best possible position to recommend items that are most likely to convert. 11. Sarah Raven encourage customers to make further purchases with personalized recommendations based on the interests they have demonstrated.
- 42. HOMEPAGE 45 404 page 404. Three little numbers that can have a big effect. They refer, of course, to the error message that is displayed when a server can’t find a particular resource and are probably the only http status code that every seasoned internet user is familiar with. 05
- 43. 46 404 PAGE So, as an undesirable and banal functionality - why has it risen to internet stardom? Because, depending on where you land, they are three numbers that can bring unexpected joy - with many companies choosing to negate the frustration of an internet dead-end by adopting a more humorous or useful approach. In fact, some 404 pages have become a destination in their own right. But first, a little bit about how to avoid them in the first place… Your first step should be to enable 404 error alerts - an automatic report that appears in your analytics and allows your web-team to track and fix errors as and when they occur. Remember, one entry to a 404 page can be just bad luck - a mistyped address or unexpected error. Two could be a coincidence. But three or more suggests an ongoing problem. If the problem is external however, it may not be within your ability to fix. If this is the case, a quick solution is to offer a permanent redirect (also known as a 301) to a page of your preference. The challenge with this is it can require a lot of manual work. In ecommerce, for example there can be a high amount of flux when it comes to live pages on a site, with product pages particularly prone to change due to availability or seasonality. To mitigate this issue consider keeping the pages of expired 404 page is not only a dead-end for online shoppers, it’s a leading cause of bounce and untimely exit from a site. It can be caused by an endless amount of things: poor internal linking, dead links on the internet, expired or sold-out products, you name it! products live but remove them from the site’s navigation. This allows customers landing on the page from another source to still view an expired or sold-out product, but prevents them from landing there from within your own site. This approach can also give a small boost to your SEO, especially if some of your products are or have become iconic for your store. With some of the possible ways to avoid 404’s covered, let’s look at the methods you can employ to make sure your internet dead-space does more good than harm… We’ve split them into practical elements and fun approaches but don’t get us wrong, these can be combined for the optimal 404 example! Navigation Use the space to provide them with a map of your site - where other, more relevant content can be found. By doing this you are giving an overview of everything you have to see and sell and essentially laying your offering bare, giving them the most holistic view so that they may decide which turn to take. 1. ModCloth highlight key categories from its navigation as a way of letting their customers continue their journey. PRACTICAL ELEMENTS Ok, so you don’t have the exact page they are looking for but that isn’t to say there is nothing on your site that could be of interest. To get them back on track you may want to consider the following:
- 44. 404 PAGE 47 1. 2. Search A search functionality can be used as an alternative to showing your navigation or can be complementary. It works for for two reasons - firstly, if the initial error message was due to a simple mistype or broken link then a search box will give them a second chance to find the exact item they were looking for. Secondly, it allows them to choose to widen their search for similar items if you don’t stock the specific piece they were looking for. For example, someone looking for a dress they saw in a magazine that has sold out could search for something similar by typing “red dress.” 2. OtterBox give their customers a chance to continue searching for the item they were looking for but humorously mitigate disappointment by telling them to do so only if they are “feeling optimistic.” Recommendations Recommendations are a great way to use your 404 space as a potential conversion booster - if people came to your site looking to buy (and if they were looking for a specific product then we must go under the assumption that they did), then why wouldn’t you show them anything working towards this end? » » CROSS-SELLING: This looks specifically at what the user was trying to view and then recommends similar items, allowing you to immediately leverage their initial intent. For example, if someone comes to your store looking for a drill but that particular model is sold out, you would show the most similar products. » » LANDING page recommendations: These work when people are coming to your site from an external source. They do so by capturing the data from all visitors to the broken page and making recommendations based on what they went on to view and / or buy.
- 45. 48 404 PAGE » » BROWSING history recommendations: These work for customers who have some browsing history on the site, recommending items that are relevant to those which they have previously interacted with. » » MOST POPULAR ITEMS: If none of the above are possible, then consider showing your most popular products or categories is a good alternative. Not only are these the items that have proven themselves most likely to convert, but if edited dynamically they will also capitalize on current seasons and trends. 3. Purificacion Garcia offer two best seller options on their 404 page, one for women and one for men. Suggest content Suggesting products on your 404 page is one approach to take, but what about the other areas of your site you may want to show off? If you have blogs or social media pages that you are keen to give airtime then this is a good place to do it! This provides added value to the customer while encouraging them to continue their journey within your site. 4. At Nosto, we use our 404 page to suggest articles from the Nosto blog. 4. 3.
- 46. 404 PAGE 49 Allow people to report issues If there is something wrong with your site, which by the very nature of an error message there inevitably is, you should want to know about it. A simple form to allow people to report the issue should suffice. This not only helps improve the health of your site in general but goes some way to negate people’s frustration, as they feel like something is being done about the issue. Complaining, it turns out, is half of the solution! A particular promotion Across the year there are bound to be some items or lines that you are more keen to push than others. Maybe you’re even paying for display advertising to do so. In which case, why wouldn’t you use the empty space on your own website?! During hectic sale days such as Black Friday and Cyber Monday (with items regularly going out of stock and the chance of 404 pages increasing) this is a particularly useful approach - setting lost shoppers back on the path to the check-out! Continue shopping: check out these awesome Black Friday deals! BUY BUY BUY BUY Set lost shoppers back on the path to the check-out!
- 47. 50 404 PAGE FUN APPROACHES One of the most simple but effective approaches is adding a layer of humor to an otherwise static page. This requires little effort after the initial set-up but goes a long way to disrupting the negative connotations of a 404. Many brands choose to incorporate their logo or mascot to keep it on brand. This is effective as it distracts from an undesirable situation while showing some of your company’s personality. Make it interactive For a little more effort you can craft something that is not only fun but interactive. The benefit? By encouraging people to actively engage with your error message, you are discouraging them from interacting with the exit button instead! As well as boosting the the time they spend on your site, enjoying positive experiences associated with your brand. 6. BlueFountainMedia, while not giving you what you are looking for, will give you an excuse not to waste 10 minutes instead. And, at the end of the day, who doesn’t want this?! 5. Lego show that a picture can be worth a 1,000 words. And one lego man can eliminate the need for technical jargon. It’s cute, it’s funny and it is, of course, very on brand. 5. 6.
- 48. 404 PAGE 51 Angry that you couldn’t find the page you wanted? Well, good news - with EmailCenter you get to choose who to take it out on. This is a humorous approach that goes some way to relieve some of the internet surf-rage. Video We all know that video is one of the most engaging content forms on the internet, so why wouldn’t you consider using it for your 404 page? The example below shows a viral video (which, if you haven’t seen already, is HILARIOUS) but the options are endless- if you have a particularly sexy product video, this a a great place to let it shine, or consider a behind-the-scenes brand video to win customer loyalty. 7. Bluegg use other people’s viral videos to keep their website visitors entertained. 7.
- 49. To find out how Nosto can help personalize your store, improving your key metrics, get in touch with your local Nosto specialist today: [email protected] | www.nosto.com