tag:econsultancy.com,2008:/topics/user-experience-and-usability Latest User Experience and Usability content from Econsultancy 2016-08-22T14:33:00+01:00 tag:econsultancy.com,2008:BlogPost/68203 2016-08-22T14:33:00+01:00 2016-08-22T14:33:00+01:00 Six 'millennial UX' lessons from insurance brand Back Me Up Ben Davis <h3>1. Information pyramid / visual saliency</h3> <p>The <a href="https://www.backmeup.co.uk/">Back Me Up website</a> has a really clear proposition, never in danger of reaching information overload.</p> <p>To do this, it uses a long explainer page with plenty of white space, high-contrast sizeable text, pictures and iconography.</p> <p>In terms of conveying information, the page doesn't walk before it can run. Think of it as a pyramid, with less information given at the top and more as you move through the signup process.</p> <p>Very cleverly, there is some content that is extremely useful but is nevertheless tucked away in a little JavaScript foldout, available to users when they are ready to click (see an example below).</p> <p>This streamlines the core messaging on the page.</p> <p><em>The 'See here how Back Me Up compares with other insurances' section is tucked away to improve salience of homepage. </em></p> <p><img src="https://assets.econsultancy.com/images/0007/8258/back_me_up_home.gif" alt="back me up homepage" width="478" height="301"> </p> <p>The homepage serves to hold the customer's hand and talk them through the service slowly. It's not a question of digesting lots of size 10 font.</p> <p>The saliency is further improved by some neat and large subheaders - 'How it works', 'Core cover', 'Bolt ons'.</p> <p><img src="https://assets.econsultancy.com/images/0007/8259/Screen_Shot_2016-08-18_at_17.47.23.png" alt="back me up subheaders" width="615" height="403"></p> <p>Compare this 'information pyramid' approach with a more traditional insurer's website, also presenting information about personal posessions insurance.</p> <p>Below I've included screenshots of Co-op Insurance and Direct Line.</p> <p>Neither are terrible, but they both hit the customer with much more information right from the get go, with smaller font and much less clarity.</p> <p>Of course, Co-op and Direct Line both offer many more products and don't have the luxury of such as refined proposition, but the point about information architecture still stands.</p> <p><em>Contrast with a more traditional insurer such as Coop (top) and Direct Line (bottom)</em></p> <p><em><img src="https://assets.econsultancy.com/images/0007/8261/coop_insurance.gif" alt="coop insurance" width="508" height="301"></em></p> <p><img src="https://assets.econsultancy.com/images/0007/8260/direct_line_insurance.gif" alt="direct line insurance" width="508" height="301"></p> <h3>2. Life through a lens</h3> <p>Customers must photograph their stuff in order to insure it.</p> <p>The idea of photographing the items one wants to insure is inspired. Millennials instinctively relate to snap and share culture.</p> <p>Photos can be uploaded via the Back Me Up website, though it's the app that really captures the imagination. Taking photos on mobile is about as close to intuitive as it gets for younger users.</p> <p>Of course, this benefits the insurer, too, as pictoral evidence provides extra information with which to validate a claim.</p> <p>While <a href="https://econsultancy.com/reports/the-reality-of-multichannel-marketing/">multichannel marketing</a> is still relevant (integrating nicely with web, email and direct mail), the more of the signup process a finance brand can bundle into a mobile app, the more younger users will take to it.</p> <p>This is truly mobile-first design.</p> <p><img src="https://assets.econsultancy.com/images/0007/8269/my_stuff.jpg" alt="my stuff" width="300"></p> <h3>3. Video explainers</h3> <p>This is probably my favourite part of the site. There are a number of videos embedded throughout, explaining parts of the service.</p> <p>They are superbly scripted and presented, pitched neither too high or too low. This video content is something financial services brands could learn a lot from.</p> <p>Here's an example...</p> <p><iframe src="https://www.youtube.com/embed/ndXxUWOa9rE?wmode=transparent" width="560" height="315"></iframe></p> <h3>4. Language</h3> <p>We've mentioned already the simple subheaders, but the brand goes much further in its copy, using colloquial/informal language to make everything easier to understand.</p> <p>It's easy to read this copy and hear David Brent in your head, but when this language is in the context of the full webpage, it makes the content easier to scan.</p> <p><strong>'Stuff'</strong></p> <p><strong><img src="https://assets.econsultancy.com/images/0007/8266/Screen_Shot_2016-08-18_at_18.10.44.png" alt="stuff" width="200"></strong></p> <p><strong>'Chill'</strong></p> <p><strong><img src="https://assets.econsultancy.com/images/0007/8263/Screen_Shot_2016-08-18_at_18.12.21.png" alt="chill" width="200"></strong></p> <p><strong>'Join us'</strong></p> <p><strong><img src="https://assets.econsultancy.com/images/0007/8264/Screen_Shot_2016-08-18_at_18.11.18.png" alt="join us" width="200"></strong></p> <p><strong>'Tell your mates'</strong></p> <p><img src="https://assets.econsultancy.com/images/0007/8268/Screen_Shot_2016-08-18_at_18.26.22.png" alt="tell your mates" width="220"></p> <p><strong>'Don't freak out'</strong></p> <p><strong><img src="https://assets.econsultancy.com/images/0007/8265/Screen_Shot_2016-08-18_at_18.11.08.png" alt="don't freak out" width="250"></strong></p> <p><strong>'When things go wrong'</strong></p> <p><strong><img src="https://assets.econsultancy.com/images/0007/8262/Screen_Shot_2016-08-18_at_18.13.00.png" alt="when things go wrong" width="400" height="234"></strong></p> <h3>5. Bold aesthetic</h3> <p>The big blue colours, the chunky iconography - there isn't any new service that isn't confidently branded any more.</p> <p>It was mobile that kickstarted this revolution of bold and <a href="https://econsultancy.com/blog/64732-16-beautiful-examples-of-flat-design-in-ecommerce/">flat design</a>, and it's a visual language that younger users innately trust.</p> <h3>6. Sharing/community</h3> <p>The Back Me Up website has a fairly prominent community section, and everybody who joins the service already has a username with which they are identified.</p> <p>Okay, forums are nothing new, but positioning this community at the heart of the service helps to instill almost a co-op feel.</p> <p>There's something of the spirit of Airbnb in these conversations, where new customers can ask old timers anything they want.</p> <p>Contribution is even gamified with a score assigned to each contributor.</p> <p><img src="https://assets.econsultancy.com/images/0007/8272/Screen_Shot_2016-08-19_at_08.58.48.png" alt="community" width="615" height="404"></p> <h3>Conclusion</h3> <p>There is so much to learn here:</p> <ul> <li> <a href="https://econsultancy.com/blog/68159-five-ways-fintech-upstarts-are-disrupting-established-financial-institutions/">unbundling</a>/rebranding of a product (Back Me Up was created by parent group Ageas).</li> <li>clearly-defined target audience.</li> <li>clarity of proposition.</li> <li>beautifully honest explainer videos.</li> <li>incorporation of selfie/smartphone culture.</li> <li>non-sanitised language.</li> </ul> <p>Hat tip to Back Me Up.</p> tag:econsultancy.com,2008:TrainingDate/3030 2016-08-12T12:05:19+01:00 2016-08-12T12:05:19+01:00 Mobile Usability and UX <p>76% of UK adults own a smartphone and these devices are now the UK’s most popular way to get online (Deloitte &amp; Ofcom data, 2015).  Our 1-day training course will help you design a great mobile experience using best practice guidelines and real world examples.  </p> <p>You’ll also have the chance to engage in lots of interactive exercises to make sure that you’re getting the most out of the day!</p> tag:econsultancy.com,2008:BlogPost/68141 2016-08-09T12:16:12+01:00 2016-08-09T12:16:12+01:00 How UrbanStems uses customer experience to compete with big ecommerce Bart Mroz <p><a href="http://www.ibisworld.com/industry/online-flower-shops.html">Over $4 billion is spent each year</a> on online flower purchases for occasions such as birthdays, celebrations, graduations and more. While gifting flowers can bring great happiness to those receiving them, shopping for them can be a tedious process.</p> <p><a href="https://urbanstems.com/">UrbanStems</a> is a relatively new online flower startup, and is changing the way consumers purchase flowers online by delivering a clean and simple online shopping experience that focuses on customer satisfaction.</p> <p><img src="https://assets.econsultancy.com/images/0007/7796/the_raven_flower_arrangement.png" alt="urbanstems product page" width="615" height="430"> </p> <h2>Urbanstems</h2> <p>UrbanStems boasts a seamless online shopping experience offering a highly curated rotation of fresh and unique flowers, in line with the blooms of the season.</p> <p>On-demand, one-hour delivery is standard and available at no extra charge, making even the most bothersome aspect of the shopping experience simple and convenient.</p> <h3>Clean, visually appealing product page </h3> <p>One of UrbanStems’ most successful assets is its beautifully designed product page. Clean, elegant and filled with vibrant floral images, it is this visually appealing page that attracts consumers to the online florist.</p> <p>As you scroll down, additional images show multiple points of view so that customers can better understand the dimensions, style, potential use, etc.</p> <p><img src="https://assets.econsultancy.com/images/0007/7798/urbanstems_product_page.png" alt="urbanstems product page" width="615" height="433"> </p> <p>Within the clean and modern layout, one can find the key points of information neatly aligned to the right of the featured product.</p> <p>No distracting promotions, recommendations, upsells or other competing features – the platform is entirely user-friendly and mobile-optimized to provide a fluid and enjoyable shopping experience.</p> <h3>Hassle-free checkout process</h3> <p>Once the customer decides on an Urbanstems arrangement, the site automatically displays the necessary options (such as delivery date and address) needed to complete the purchase, therefore making the already simple checkout process even more quick and painless.</p> <p>Other online florists such as Proflowers require nearly twice as many steps to complete a purchase, yet by reducing the number of steps required to checkout, UrbanStems minimizes the likelihood of customer fatigue and shopping cart abandonment.</p> <p>This results in higher <a href="https://econsultancy.com/reports/conversion-rate-optimization-report/">conversion rates</a> and more sales.</p> <p><img src="https://assets.econsultancy.com/images/0007/7799/checkout_urbanstems.png" alt="checkout" width="615"></p> <h3>Flexible customer support options</h3> <p>Through the entire shopping experience, customers have access to a discreet popup tab which provides an instant connection to customer service and FAQs. Questions via chat, email or phone call are always welcome.</p> <p><img src="https://assets.econsultancy.com/images/0007/7800/faqs.png" alt="faqs" width="318" height="488"></p> <p>Providing multiple points of customer service is a great way to ensure that customers receive quick feedback to any of their questions or concerns. If they cannot obtain the information they seek, they are much more likely to abandon their purchase and shop elsewhere. </p> <h2>ProFlowers</h2> <p>ProFlowers is one of the largest online florists in the U.S. but its customer shopping experience is entirely sales oriented.</p> <p>Throughout the entire process, customers are bombarded with various different product options and presented with a myriad of ways to spend more money than was originally intended.</p> <p>Even though these tactics have helped grow the Proflowers business, they degrade the customer shopping experience and have led to many negative customer reviews as well as low customer satisfaction ratings.</p> <p><img src="https://assets.econsultancy.com/images/0007/7802/proflowers_upgrades.png" alt="proflowers" width="615" height="439"></p> <h3>Busy product pages</h3> <p>Proflowers’ product pages are a prime example of information overload – both visual and written.</p> <p>Even before the customer starts evaluating the product he/she has clicked on, they are immediately presented with multiple upgrade options and additional add-ons.</p> <p><img src="https://assets.econsultancy.com/images/0007/7803/proflowers_product_page.png" alt="proflowers business" width="518" height="597"> </p> <p>Why is this unappealing? A product page should highlight the intended product rather than trying to sell as many other products as possible.</p> <p>ProFlowers automatically displays coordinated add-ons, product upgrades and <a href="https://econsultancy.com/blog/65866-how-do-product-recommendations-influence-buyer-behavior/">recommendations</a>. While this may be a great way to generate incremental revenue for the retailer, it overwhelms customers and makes the experience seem highly promotional and sales-driven.</p> <h3>Lengthy checkout process</h3> <p>In order to make a purchase through Proflowers, customers must go through a nine-step process starting with the product page. Few other ecommerce checkout experiences are this lengthy.</p> <p>With so many steps required to make a simple purchase, customers become frustrated and the experience much less enjoyable. </p> <p><img src="https://assets.econsultancy.com/images/0007/7804/proflowers_checkout.png" alt="checkout" width="615" height="365"></p> <p>As soon as customers hit the checkout button (which is actually labeled “Delivery Date”), they are sent to a page filled with add-on gift options.</p> <p>After already being inundated with upgrade and add-on options on the initial product page, this second forceful upsell proves extremely irritating. Only after this page do customers start the actual checkout process.</p> <h3>Limited customer support options</h3> <p>The only visible customer support option that’s consistent throughout the site is the contact number.</p> <p>There are no instantaneous customer service chat options or direct links to FAQs. If a shopper needs customer service help while browsing, they must first find the customer service link at the very bottom of the page and then navigate to that exact page.</p> <p><img src="https://assets.econsultancy.com/images/0007/7805/footer.png" alt="footer proflowers" width="615"></p> <p>Shopping for flowers – no matter the reason – should always be a pleasurable experience, one that is simple and straightforward.</p> <p>New players in the space like UrbanStems are challenging current industry leaders like ProFlowers by crafting customer-first shopping experiences that emphasize the customer rather than immediate revenue.</p> <p>As a result, these new players are sure to not only attract but also retain more customers, leading to increased sales and a bigger market share. </p> tag:econsultancy.com,2008:BlogPost/68109 2016-08-03T15:09:40+01:00 2016-08-03T15:09:40+01:00 Site comparison: Victoria's Secret vs. Nike Women, the battle of the sports bras Nikki Gilliland <p>I didn’t find this fact all too surprising. Athleisure-wear is an increasingly lucrative market after all.</p> <p>However, what did pique my interest was Victoria’s Secret’s decision to call out rivals Nike as part of its online advertising.</p> <p>Including a quote from model Jasmine Tookes, who claims “When I tried these, I threw out all my Nike bras”, the copy is pretty audacious.</p> <p>So, in terms of the website, how does Victoria Sport measure up against Nike Women?</p> <p>Here’s a comparison, split into five separate categories:</p> <ul> <li>First impressions</li> <li>Landing pages &amp; copy</li> <li>Navigation</li> <li>Product pages</li> <li>Checkout</li> </ul> <h3>First impressions</h3> <p>The first thing that strikes me when comparing the two sites (Victoria Sport and the ‘Women’ section of Nike) is that they are remarkably similar.</p> <p>Both use full-width video on the homepage, with both examples showing women partaking in a number of sporting activities decked out head to toe in the respective brands.</p> <h4>Nike</h4> <p>While <a href="http://www.nike.com/gb/en_gb/c/women" target="_blank">Nike’s is a bit jarring</a> for the user, using super fast-moving imagery that feels a little <em>too</em> in-your-face - I much prefer its depiction of strong and athletic women.</p> <p>It nicely falls in line with Nike’s branding and its <a href="http://www.allure.com/beauty-trends/blogs/daily-beauty-reporter/2016/07/nike-plus-size-bra.html" target="_blank">focus on female self-empowerment</a>.</p> <p><img src="https://assets.econsultancy.com/images/0007/7363/Nike.PNG" alt="" width="780" height="401"></p> <h4>Victoria Sport</h4> <p>On the other hand, while <a href="https://www.victoriassecret.com/vs-sport">Victoria’s Secret</a> does show models boxing and doing yoga, the imagery still feels a little too focused on the women’s bodies rather than the actual activity.</p> <p>Sure, it’s a definite move away from the <a href="http://www.statesman.com/news/business/former-victorias-secret-photo-editor-reveals-secre/nr4Tp/" target="_blank">allegedly photoshopped and perfectionist</a> ideal of previous campaigns, yet it doesn’t feel quite as authentic as its competitor. </p> <p><img src="https://assets.econsultancy.com/images/0007/7362/Victoria_Secret.PNG" alt="" width="780" height="391"></p> <h3>Landing pages &amp; copy</h3> <h4>Victoria Sport</h4> <p>As I previously mentioned, Victoria’s Secret calls out Nike with its testimonial from model Jasmine Leer. </p> <p>Unsurprisingly, the rest of the copy is just as bold.</p> <p> <img src="https://assets.econsultancy.com/images/0007/7364/victoria_secret_quote.PNG" alt="" width="750" height="301"></p> <p>Despite the tone coming across as a bit boastful, there’s no denying the lingerie retailer highlights its USP to good effect.</p> <p>Reminding the user that Victoria’s Secret makes sports bras in real sizes (not just small, medium or large), it successfully trumps Nike with its ‘bra expert’ card.</p> <p><img src="https://assets.econsultancy.com/images/0007/7365/victoria_secret_quote_2.PNG" alt="" width="300" height="233"> <img src="https://assets.econsultancy.com/images/0007/7366/victoria_secret_quote_3.PNG" alt="" width="300" height="214"></p> <h4>Nike</h4> <p>In contrast, instead of talking about how good the brand is, Nike concentrates on what the product does for the consumer - again reinforcing its stance on self-improvement and empowerment through sport.</p> <p><img src="https://assets.econsultancy.com/images/0007/7367/nike_copy.PNG" alt="" width="750" height="306"></p> <p>Combined with a humble and slightly self-deprecating tone, I find this copy more appealing from a consumer perspective.</p> <p><img src="https://assets.econsultancy.com/images/0007/7368/nike_copy_2.PNG" alt="" width="300" height="179"> <img src="https://assets.econsultancy.com/images/0007/7369/nike_copy_3.PNG" alt="" width="266" height="182"></p> <h3>Navigation</h3> <h4>Victoria Sport</h4> <p>The navigation for Victoria Sport comes in the form of a fairly standard drop-down header menu.</p> <p><img src="https://assets.econsultancy.com/images/0007/7370/vs_categories.PNG" alt="" width="750" height="283"></p> <p>One thing I particularly like is the ‘sports bra guide section’ – a dedicated page offering advice on fit and a handy little tool to help you find the right product.</p> <p>Again, spinning off of its main vertical of lingerie, this personalised and ‘expert’ approach certainly appeals. </p> <p><img src="https://assets.econsultancy.com/images/0007/7374/vs_guide.PNG" alt="" width="750" height="449"></p> <p>On the category listing pages themselves, the drop-down <a href="https://econsultancy.com/blog/62864-nine-tips-to-help-improve-your-product-filtering-options/" target="_self">filter system</a> is pleasing.</p> <p>Allowing the user to select multiple options as well as easily remove filters, it's very intuitive and easy to use.</p> <p><img src="https://assets.econsultancy.com/images/0007/7383/vs_filter.PNG" alt="" width="750" height="488"></p> <h4>Nike</h4> <p>Nikeis header menu includes a good selection of categories and also curated themes on the left-hand side.</p> <p><img src="https://assets.econsultancy.com/images/0007/7371/nike_header.PNG" alt="" width="750" height="319"></p> <p>With specific categories, plus ‘all sports’ and ‘all clothing’, this provides more options for the user - always a positive.</p> <p>Like its competitor, it also has a good product filter system. My only gripe is that it does not have a 'clear all' button, which Victoria's Secret does.</p> <p><img src="https://assets.econsultancy.com/images/0007/7373/nike_side_nav.PNG" alt="" width="300" height="572"> <img src="https://assets.econsultancy.com/images/0007/7384/Nike_product_filter.PNG" alt="" width="250" height="610"></p> <h3>Product pages</h3> <h4>Victoria Sport</h4> <p>For the <a href="https://econsultancy.com/blog/63462-ecommerce-product-pages-where-to-place-30-elements-and-why/">product pages</a>, I specifically focused on the sports bras section.</p> <p>Clicking through to the category on Victoria Sport, there is an option to quick view each product, which is helpful if you’re browsing in a hurry or aren't sure what you're looking for.</p> <p><img src="https://assets.econsultancy.com/images/0007/7617/VS_quick_view.PNG" alt="" width="780" height="473"></p> <p>Moving on to the main product pages themselves, one thing which seems to be lacking is <a href="https://econsultancy.com/blog/63153-15-tips-for-making-your-product-images-work-harder/">imagery</a>. Some include two or three images, however others have just one, which is poor by any standard.</p> <p><img src="https://assets.econsultancy.com/images/0007/7618/VS_product_page.PNG" alt="" width="780" height="652"></p> <p>When selecting product features, the decision to mark out-of-stock items with a horizontal line isn't very clear. It would be much easier if these items were greyed out or dropped out altogether.</p> <p><img src="https://assets.econsultancy.com/images/0007/7619/Visibility_of_products.PNG" alt="" width="450" height="409"></p> <p>Similarly, the small size of the copy makes it difficult to locate certain features.</p> <p>For example, the 'size and fit' icon is very easy to miss. Which is a shame, especially as when you do click it, it includes some good features like the 'perfect fit' calculator and measurement instructions.</p> <p>The brand could easily make more of this, especially considering its USP is built around specific sizing.</p> <p> <img src="https://assets.econsultancy.com/images/0007/7621/VS_perfect_fit.PNG" alt="" width="500" height="432"></p> <p>The suggestions for ‘completing the look’ are helpful, providing the user with recommendations and outfit suggestions, as well as nicely showcasing the variety of Victoria Sport’s product range.</p> <p>Combined with an extensive review section and an informative description, it’s is a well-designed page overall.</p> <p><img src="https://assets.econsultancy.com/images/0007/7377/vs_complete_the_look.PNG" alt="" width="600" height="350"></p> <h4>Nike</h4> <p>The Nike product pages are similarly user-friendly, but with a few extra features I would say they are slightly better.</p> <p>For one, there are loads more images, allowing the user to get a proper understanding of the product and how it looks in real life. </p> <p><img src="https://assets.econsultancy.com/images/0007/7378/nike_product.PNG" alt="" width="600" height="306"></p> <p>Similarly, there is more of a focus on copywriting to highlight the various features of the bra, plus, there is a great filtering system within the reviews section.</p> <p><img src="https://assets.econsultancy.com/images/0007/7379/nike_product_copy.PNG" alt="" width="600" height="328"></p> <p>While Victoria Sport allows the user to filter by star rating, Nike’s specific filter for ‘most helpful’, or ‘highest rated’ is a very nice touch.</p> <p><img src="https://assets.econsultancy.com/images/0007/7386/nike_reviews.PNG" alt="" width="600" height="534"></p> <h3>Checkout</h3> <h4>Victoria Sport</h4> <p>The checkout process on Victoria Sport is frustrating.</p> <p>Although there are some good features like options for guest check-out and PayPal payment, delivery charge is not disclosed until the user has entered an address.</p> <p><img src="https://assets.econsultancy.com/images/0007/7381/vs_checkout.PNG" alt="" width="600" height="256"></p> <p>Likewise, the various stages are rather clunky, such as this very unattractive option for offer codes (surely these three fields could neatly be replaced with an 'add code' call to action).</p> <p>There should be no need to click continue on an offers section which the majority of users will not need.</p> <p><img src="https://assets.econsultancy.com/images/0007/7622/VS_checkout.PNG" alt="" width="500" height="700"></p> <h4>Nike</h4> <p>In contrast, Nike's checkout experience is smooth sailing, with a pleasingly minimal and integrated design.</p> <p>It provides three options for checkout, including member, guest and Paypal. </p> <p><img src="https://assets.econsultancy.com/images/0007/7624/3_checkout_options.PNG" alt="" width="780" height="468"></p> <p>Nike highlights the estimated delivery time and charges up front and also tempts the user into signing up to be a member (which brings free delivery and returns).</p> <p><img src="https://assets.econsultancy.com/images/0007/7625/Nike_checkout_2.PNG" alt="" width="780" height="759"></p> <h3>Summary</h3> <p>All in all, Nike Woman and Victoria Sport deliver a decent user experience.</p> <p>Both utilising strong creatives, bold copy and user reviews, there’s a lot of similarly pleasing stuff.</p> <p>While Victoria Sport wins on product filtering, Nike trumps it on user reviews.</p> <p>But overall, I'd certainly say that Nike's less-is-more approach makes it the most appealing.</p> <p>By really honing its brand voice, and combining it with a streamlined design, it's much more authentic and customer-centric than Victoria Sport. </p> <p>It's refreshing to see the latter experiment with a different tack, but of course, it takes more than calling out the competition to prove value.</p> tag:econsultancy.com,2008:BlogPost/68070 2016-07-25T11:12:46+01:00 2016-07-25T11:12:46+01:00 Eight examples of fashion ecommerce product filters: Good & bad Nikki Gilliland <p>(Note - as there are a few differences on mobile, such as abridged filters, I am solely concentrating on the desktop experience for now.)</p> <h3>H&amp;M</h3> <p>H&amp;M’s ‘Shop by Feature’ filter is designed to point the user in the direction of curated themes.</p> <p>While creative in theory, it actually seems to be quite pointless.</p> <p>What the retailer seems to have forgotten is that the whole point of a filter system is to narrow down products in order to point the consumer in a specific direction – not lead them down a random path to ‘off duty denim’ when it’s far easier to just filter by ‘jeans’.</p> <p><img src="https://assets.econsultancy.com/images/0007/7155/H_M.PNG" alt="" width="477" height="419"></p> <p>Aside from this, the regular filter is very user-friendly.</p> <p>With options to choose by colour, size and style - plus a handy 'clear all' button - it's easy to narrow down exactly what you're looking for.</p> <p><img src="https://assets.econsultancy.com/images/0007/7310/H_M_filter.PNG" alt="" width="750" height="580"></p> <h3><strong>River Island </strong></h3> <p>River Island’s filtering system is slightly fiddly in that it only allows you to select one filter at a time (selecting mutliple filters involves multiple reloading of the results page).</p> <p>However, one feature I quite like is that it allows you to see how many items each one includes. While this might sound slightly off-putting (I did occasionally find myself focusing on the number rather than the actual category I was selecting) – it is pretty helpful.</p> <p>For instance, if a filter returns just two items, you’ll know ahead of time rather than clicking through just to be disappointed.</p> <p><img src="https://assets.econsultancy.com/images/0007/6999/river_island_filter.PNG" alt="" width="600" height="699"></p> <h3><a href="https://econsultancy.com/blog/67581-six-reasons-i-love-zara-com-and-a-few-reasons-i-don-t/"><strong>Zara </strong></a></h3> <p>Zara’s filter system is a mixed bag. By placing it at the top of the page instead of the left-hand side, it focuses the user’s attention.</p> <p>It also enables you to select multiple features at once, using specific elements like ‘characteristics’ and ‘colour’.</p> <p>And we mean specific… Anyone happen to know what an ‘ecru’ coloured shirt looks like?</p> <p>Well thanks to its filtering system, you do now.</p> <p><img src="https://assets.econsultancy.com/images/0007/7002/zara_filter_2.PNG" alt="" width="780" height="512"></p> <p>On the other hand, its filter button is not the most visible, nor are highlighted filters, a fairly major UX issue.</p> <p>Annoyingly, there is also no option to sort filtered results.</p> <p><img src="https://assets.econsultancy.com/images/0007/7375/Screen_Shot_2016-07-24_at_18.44.10.png" alt="zara" width="615" height="256"></p> <h3><strong>Ted Baker</strong></h3> <p>Much of Ted Baker’s website is slick, so it’s a little disappointing that its filtering system is less so.</p> <p>While it does offer a decent number of options to filter by, including patterns, colours, sizes etc, like River Island it only allows you to choose one option (i.e. colour <em>or</em> size) before you have to repeat the process to choose another.</p> <p>Furthermore, the drop-down menu is a little slow, making the whole process feel slightly frustrating.</p> <p>Luckily, with its creative copywriting and <a href="https://econsultancy.com/blog/67999-seven-inspiring-examples-of-ecommerce-lookbooks/">lookbooks</a>, there's a lot to enjoy elsewhere on the site.</p> <p><img src="https://assets.econsultancy.com/images/0007/7003/Ted_Baker_filter.PNG" alt="" width="513" height="670"></p> <h3><strong>Hunter</strong></h3> <p>Like Ted Baker, Hunter’s filter is in the form of a drop-down menu, however, with separate tabs for each filter option – it’s far easier to use.</p> <p>It also includes some nice touches like a tick appearing as you narrow down the search, and an instant reset button.</p> <p><img src="https://assets.econsultancy.com/images/0007/7004/Hunter_filters.PNG" alt="" width="780" height="539"></p> <h3><strong>Marks and Spencer</strong></h3> <p>User reviews is a feature that many retailers fail to utilise. Functioning as a vote of confidence, rating systems are always useful for consumers that are unsure of what products to buy.</p> <p><a href="https://econsultancy.com/blog/67883-marks-spencer-what-does-putting-the-customer-at-the-heart-of-everything-mean/">Marks and Spencer </a>is one of the few retailers to shrewdly include them.</p> <p>Allowing users to filter by star ratings (1 and above, 2 and above and so on), it helps out the consumer who values other people’s opinions. While it’s located at the bottom of the left-hand side and so fairly inconspicuous, it’s still a worthwhile addition.</p> <p> <img src="https://assets.econsultancy.com/images/0007/7006/M_S_filter_2.PNG" alt="" width="350" height="669"></p> <h3><strong>Suit Supply </strong></h3> <p>In contrast to H&amp;M, Suit Supply is a great example of how to use product filtering in a more creative fashion.</p> <p>Instead of words, it utilises visuals to highlight various product features, cleverly showcasing the retailer’s wide variety of options.</p> <p>From collar type to style by context, this element is simple but effective, and something I've not come across before.</p> <p><img src="https://assets.econsultancy.com/images/0007/7007/Suit_supply_collar.PNG" alt="" width="780" height="330"></p> <p><img src="https://assets.econsultancy.com/images/0007/7008/Suit_supply.PNG" alt="" width="780" height="527"></p> <h3><strong>ASOS</strong></h3> <p>With such a large amount of items, it’s a good job that ASOS offers such as comprehensive filter system.</p> <p>From brand and style to fit and sleeve length, there any many different options to choose from, and with different filters across different categories - it’s cleverly executed.</p> <p>As well as helping to guide the consumer to find what they like, it also allows ASOS the brand to showcase its wide variety of products.</p> <p><img src="https://assets.econsultancy.com/images/0007/7017/ASOS_filter_2.PNG" alt="" width="300" height="408"> <img src="https://assets.econsultancy.com/images/0007/7019/ASOS_jean_filter.PNG" alt="" width="300" height="435"> </p> <h3>What can we learn?</h3> <p>While H&amp;M's example might not work, the brand's willingness to experiment with product filtering should be applauded.</p> <p>If done right, a decent filter can massively improve the user experience.</p> <p>Fast, with clear visuals and the ability to select multiple options... that's the dream.</p> tag:econsultancy.com,2008:BlogPost/68103 2016-07-22T14:31:13+01:00 2016-07-22T14:31:13+01:00 A day in the life of... Online Capability Consultant at BT Ben Davis <p>But before we do - if you're in the market for a digital job, check out our <a href="https://jobs.econsultancy.com/">jobs board</a> or benchmark your digital knowledge using our <a href="https://econsultancy.com/training/digital-skills-index-lite/">Digital Skills Index</a>.</p> <p>Alternatively, if you would like a Day In The Life profile, you can email us via press@econsultancy.com.</p> <h3>Please describe your job, Tom! What does an Online Capability Consultant do?</h3> <p>At BT we want to be number one for customer service and my role is all about ensuring that happens across the digital estate.</p> <p>I am responsible for turning our customer management and service journeys into an online experience that’s easy and efficient for our customers to use.</p> <p>I am responsible for creating and eliciting all the new requirements, defining user experience and <a href="https://econsultancy.com/blog/63462-ecommerce-product-pages-where-to-place-30-elements-and-why/">wireframes</a> and managing the development and launch of the product.</p> <p>Our team is working on some great experiences for our customers and ranging from paying a bill or reporting a fault right through to changing their TV package and tracking an order online.</p> <p><img src="https://assets.econsultancy.com/images/0007/7349/tom_barton.jpg" alt="tom barton" width="336" height="336"></p> <h3>Whereabouts do you sit within the organisation? Who do you report to?</h3> <p>I sit within the Digital team in BT Consumer, in a sub team called Digital Capability which includes both in life and project work.</p> <p>I report to the Senior User Experience manager.</p> <h3>What kind of skills do you need to be effective in your role?</h3> <p>You certainly need to be analytical, to allow you to review data quickly and to make effective UX and process decisions.</p> <p>Strong <a href="https://econsultancy.com/blog/66616-the-virtues-of-user-testing-under-the-influence/">user testing</a> skills and an inquisitive mind really help to get to the crux of the problem to ensure what you design is fit for purpose and allows customers and advisors to perform their task as effectively as possible.</p> <p>Strong people skills to ensure you can take everyone on the digital journey – our commercial and operational colleagues have great ideas and plans, but it’s up to me to give them clear options for how they turn them into reality online.</p> <p>The ability to learn quickly and grasp technical concepts at a high level allows you to marry your technical and design knowledge to spot how to cut risks, fix issues and save money. </p> <h3>Tell us about a typical working day…</h3> <p>My role is really varied so it really does depend on what needs doing!</p> <p>I start every day with a stand up to ensure we all know what everyone is doing and if anyone needs any support with the day’s activities.</p> <p>After that it can get quite varied but most days involve defining and writing requirements for the next piece of functionality. I will chat with the process SMEs to help turn complex business processes into an online experience.</p> <p>Once we have these I will brief our UX designers to start bringing the idea to life. </p> <p>After a call with the development team to ensure what we have designed is feasible we will update the wireframes and brief the Visual Design team to the final functionality created.</p> <p>After all this it’s time to optimise what we already have live and work closely with our marketing team to analyse the data and be on the lookout for changes that make the online experience even better.</p> <p>Busy day eh!</p> <p><img src="https://assets.econsultancy.com/images/resized/0007/7351/postits-blog-flyer.jpg" alt="post it wall" width="470" height="351"></p> <h3>What do you love about your job? What sucks?</h3> <p>I love working for such a high profile company and especially in their digital team. We are a relatively new team and have grown from 20 to 130 in a matter of years.</p> <p>The team has a great mix of ages and backgrounds and everyone is great to work with – also not wearing a suit is always good!</p> <p>It’s great being able to see an idea turn into something a customer can actually use. I know it’s cheesy but I really think we are making a positive difference to people’s lives – making everything they do online easier, quicker and more personal.</p> <p>I think my favourite thing about my role is its variety. One day I’ll be creating wireframes, the next analysing Omniture data to ensure we are getting the most out of what we have – I really get the chance to get involved in all aspects of the online journey.</p> <p>The only negative is the time it takes to implement change. We’re getting better with more agile processes coming in but with such a big company getting things changed can be a bit frustrating at times.</p> <h3>What kind of goals do you have? What are the most useful metrics and KPIs for measuring success?</h3> <p>We use quite a lot at BT but the main ones we use are Channel Share and Propensity to Contact.</p> <p>Our goal is to remove calls from the call centre and help people self-serve as much as they can, the more people we can get online the better. We want customers to have the same personal experience online as they do when they call up.</p> <p>Propensity to Contact (or PTC) measures how many customers go online and then phone up within seven days. We take the approach that if someone has gone online and then had to phone up, we’ve failed – the lower this measure the better.</p> <p><img src="https://assets.econsultancy.com/images/0007/7350/Screen_Shot_2016-07-22_at_14.08.26.png" alt="contact BT" width="615" height="366"></p> <h3>What are your favourite tools to help you to get the job done? </h3> <ul> <li> <strong>Axure</strong> – wireframe tool. It can be pretty complicated when you start learning how to use it but when you get the hang of it, what it can do is pretty impressive</li> <li> <strong>Omniture and Excel</strong> – To crunch those numbers</li> <li> <strong>Treesorter</strong> – A lot of what we do involves getting people from A to B in the easiest way. Treesorter allows us to test where the best place to put everything is</li> <li> <strong>Trello</strong> – A great online tool to help with lists and team tasks</li> <li> <strong>Jira</strong> – Our defect tracking and requirements tool</li> </ul> <h3>Which brands do you think are doing digital well?</h3> <p>I think digital is really exciting at the moment and there are loads of brands that are doing some pretty great stuff, but if I had to pick some I would go for:</p> <p><strong>John Lewis</strong> – The way they marry up online and offline activities make shopping extremely painless. When I have had queries or issues, is has been such a stress free experience it solve these.</p> <p><strong>Amazon</strong> – Similar to John Lewis, however I know there is so much more they could do with the data and resources they have. I feel they are just testing the water at the moment – Watch this space!</p> <p><strong>Skyscanner</strong> – I’m convinced I have booked more flights since I started using Skyscanner! The amount of data it has to crunch in such a short space of time is impressive. It’s so easy to use and the ability to customise everything really helps with usability. It translates seamlessly from desktop to mobile as well</p> <h3>Do you have any advice for people who want to work in ecommerce?</h3> <p>Try to learn as much as you can about the full customer lifecycle and how digital can affect every aspect of it. </p> <p>The more exposure you get to more roles such as marketing, <a href="https://econsultancy.com/reports/seo-best-practice-guide/">SEO</a>, UX etc the better as it will allow you to understand how each role comes together to create the full end-to-end experience.</p> <p>It’s really important to stay up to date and read articles and blogs on the latest trends and digital best practice. It’s easy with so many free resources online – many companies also offer free conferences that are great to attend.</p> <p>No matter what your role is in digital, it’s vital you keep the end user in mind, whether that be a customer or a back end user. It is vital everything is designed with them in mind.</p> <p>I think most importantly just have passion for getting into digital and work hard, and the rest should come naturally.</p> tag:econsultancy.com,2008:Report/3008 2016-07-21T11:30:00+01:00 2016-07-21T11:30:00+01:00 Internet Statistics Compendium Econsultancy <p>Econsultancy’s <strong>Internet Statistics Compendium</strong> is a collection of the most recent statistics and market data publicly available on online marketing, ecommerce, the internet and related digital media. </p> <p><strong>The compendium is available as 11 main reports (in addition to a B2B report) across the following topics:</strong></p> <ul> <li><strong><a href="http://econsultancy.com/reports/advertising-media-statistics">Advertising</a></strong></li> <li><strong><a href="http://econsultancy.com/reports/content-statistics">Content</a></strong></li> <li><strong><a href="http://econsultancy.com/reports/customer-experience-statistics">Customer Experience</a></strong></li> <li><strong><a href="http://econsultancy.com/reports/web-analytics-statistics">Data and Analytics</a></strong></li> <li><strong><a href="http://econsultancy.com/reports/demographics-technology-adoption">Demographics and Technology Adoption</a></strong></li> <li><strong><a href="http://econsultancy.com/uk/reports/ecommerce-statistics">Ecommerce</a></strong></li> <li><strong><a href="http://econsultancy.com/reports/email-ecrm-statistics">Email and eCRM</a></strong></li> <li><strong><a href="http://econsultancy.com/reports/mobile-statistics">Mobile</a></strong></li> <li><strong><a href="http://econsultancy.com/reports/search-marketing-statistics">Search</a></strong></li> <li><strong><a href="http://econsultancy.com/reports/social-media-statistics">Social</a></strong></li> <li><strong><a href="http://econsultancy.com/reports/strategy-and-operations-statistics">Strategy and Operations</a></strong></li> <li><strong><a title="B2B Internet Statistics Compendium" href="http://econsultancy.com/reports/b2b-internet-statistics-compendium">B2B</a></strong></li> </ul> <p>Updated monthly, each document is a comprehensive compilation of internet, statistics and online market research with data, facts, charts and figures.The reports have been collated from information available to the public, which we have aggregated together in one place to help you quickly find the internet statistics you need, to help make your pitch or internal report up to date.</p> <p>There are all sorts of internet statistics which you can slot into your next presentation, report or client pitch.</p> <p><strong>Those looking for B2B-specific data should consult our <a title="B2B Internet Statistics Compendium" href="http://econsultancy.com/reports/b2b-internet-statistics-compendium">B2B Internet Statistics Compendium</a>.</strong></p> <p> <strong>Regions covered in each document (where available) are:</strong></p> <ul> <li><strong>Global</strong></li> <li><strong>UK</strong></li> <li><strong>North America</strong></li> <li><strong>Asia</strong></li> <li><strong>Australia and New Zealand</strong></li> <li><strong>Europe</strong></li> <li><strong>Latin America</strong></li> <li><strong>MENA</strong></li> </ul> <p>A sample of the Internet Statistics Compendium is available for free, with various statistics included and a full table of contents, to show you what you're missing.</p> tag:econsultancy.com,2008:BlogPost/68031 2016-07-19T12:14:01+01:00 2016-07-19T12:14:01+01:00 Answering the key question of content auditing: Where do I start? Michael Hewitt <h3>Existing content</h3> <p>When it comes to investment in content marketing, it isn’t a huge surprise that much of it goes on producing new content, new material and new campaigns.</p> <p>Plenty of marketers will talk at length about how much content they are producing, how packed their <a href="https://econsultancy.com/blog/64587-eight-free-content-calendar-templates-to-help-plan-your-output/">editorial calendars </a>are and how they are preparing to launch their “next big campaign”, but what about the content that they already have?</p> <p>Content marketers are focused so heavily on producing new content that meets the evolving needs of both their audiences and the expectations of search engines, that they are neglecting to ensure that their existing content does likewise. </p> <h3>A daunting prospect</h3> <p>The phrase “content audit” conjures up many feelings, and few of them positive. </p> <p>For many, it is a laborious process that involves hours upon hours, days upon days or even weeks upon weeks of manual review, fiddling around in analytics, and identifying gaps in coverage. It’s not, for many, the most enthralling responsibility in the job description.</p> <p><img src="https://assets.econsultancy.com/images/0007/6721/content-audit.jpg" alt="" width="400" height="300"></p> <p>Even if you do manage to conduct a thorough audit, it can often be difficult to force through changes on key brand pages due to the influence of various stakeholders, compliance issues and various other obstacles.</p> <p>Many also find the results and impact of a content audit difficult to measure, and so decide to focus their efforts elsewhere.</p> <p>But content auditing is something that needs to be a prominent and regular part of not only your content marketing strategy, but your wider digital marketing strategy.</p> <p>Just think about how many search algorithm updates that there may have been, how many new devices have been launched and how many new media platforms have emerged since you last reviewed your content – that could be quite a sobering realisation. </p> <h3>The case for a content audit</h3> <p>The ultimate purpose of any content audit is to understand how your content is performing, how it is delivering for your customers and what value it is providing. </p> <p>There are plenty of both tangible and intangible measurements for successful content, but this doesn’t necessarily confirm that content is useful, relevant or could be considered ‘quality’ by most reasonable measures.</p> <p>You could, for instance, use social shares as a measurement of quality content but, in doing so, it’s likely that you’ll reach conclusions that, whilst they may drive engagement, don’t necessarily drive a commercial return. Providing content that your audiences will engage with is undoubtedly a starting point but, and I hate to break this to you, human beings may not always be the best judges of quality.</p> <p>What your content audit is ultimately about is ensuring that every piece of content on your site is making some form of contribution to improving conversion rates, search visibility, user experience, and relevance.</p> <p>Get it right and you could even start stealing that prized <a href="https://econsultancy.com/blog/66672-semantic-search-the-future-of-search-marketing">Google Knowledge Graph</a> real estate. </p> <h3>The manual approach</h3> <p>If you’re in a position where you are managing a relatively small site with a handful of pages, then manual content auditing might not be such a hardship.</p> <p>Starting with your URL and keywords, you can start to build a picture of where your brand ranks for these key terms, which pages consistently rank for those key terms, and how your competitors perform. </p> <p>It is then down to you to make a human assessment of each of these pages, and you can look at multiple factors to judge <a href="https://econsultancy.com/blog/66971-a-content-manager-s-practical-guide-to-doing-just-enough-seo/">how well optimised your pages are for search</a>, and how they contribute to the user journey. These factors could include URL optimisation, title tags, meta description, ‘H-tag’ optimisation and hierarchy, keyword coverage and word count.</p> <p>You can then add layers of insight from Google Analytics, social monitoring tools and start to understand how these pages contribute to the customer search journey.</p> <p>Are there pages that are haemorrhaging traffic through unusually high exit rates? If so, this page might not adequately serve the customer search query. </p> <p>With only this very top-level and basic approach to content, you can already start to understand just how much time that you're going to have to spend with your head in an Excel spreadsheet, and why many marketers are reluctant to run a manual content audit at any sort of scale.</p> <h3>A scientific approach</h3> <p>But content auditing doesn’t have to be such a daunting prospect, and it is possible to take a more scientific, algorithmic approach to content auditing.</p> <p>At Stickyeyes we use SCOT (<a href="http://www.stickyeyes.com/content-optimisation-tool/">Stickyeyes Content Optimisation Tool</a>), to look at content in the same way that a search engine may look at it, and identify key areas of success and areas for improvement. In short, addressing that critical first hurdle – where to start.</p> <p>The factors we consider include technical elements, such as keyword coverage, meta data and the use of header tags, as well as engagement factors for which there is evidence of a correlation with higher search rankings – factors such as bounce rate, time on page, social engagement and brand awareness for example.</p> <p>For those with sizable websites, this kind of process can be invaluable in understanding just where to focus effort and resource. Here is just one example of a typical output for a printing brand that we ran through the tool. </p> <p><img src="https://assets.econsultancy.com/images/0007/6722/graph1.jpg" alt="" width="668" height="276"></p> <p>What we can see clearly is that whilst the brand in this example does have some strong content optimisation scores, in excess of 85%, there are a number of revenue-driving keywords for which the domain scores poorly – notably “cheap leaflet printing”, “cheap flyers”, and “cheap flyer printing”.</p> <p>Evidently, this brand has struggled to provide content for search terms with a “cheap” prefix and this therefore provides some direction for their content review.</p> <p>Of course, it may be that the brand sees itself as a quality brand and therefore may not want to specifically target search terms such as “cheap” and “low cost”, but the level of insight provided allows the brand to make that decision.</p> <h3>Identifying the quick wins</h3> <p>Of course, any content appraisal and audit needs to have a degree of human intervention, but what this algorithmic approach does is allow us to automate large parts of the process and using this insight, content managers can start to make some key decisions and prioritise their actions. </p> <p>There are, in this example, a number of pages that score highly and, with a few minor tweaks, can potentially drive further value. These are what we would classify as “quick wins”. </p> <p>Of course, it isn’t simply enough to throw a few keyword-heavy paragraphs into the page in the hope that Google will deem that to be more relevant, but we can now start considering how we can enhance the user experience for these pages and these terms.</p> <p>It may be that we create specific content for these terms, we may change the site structure to make our existing pages more prominent, or we may actually decide to remove certain pages to focus traffic on more valuable pages.</p> <p>What we are essentially trying to do is enhance the user journey rather than hinder it; and there are different ways to do that depending on the circumstances. </p> <p>This process makes it easier to run audits on a more regular basis, allowing you to monitor the success of any changes that you do make, understand the contribution that your new content is making and identify the next key actions for your optimisation strategy. If something appears to be having an adverse effect, this can be identified and rectified very quickly. </p> <h3>The impact on search</h3> <p>We have been using this approach for a number of brands and what we have found is that as we continually work on improving our content scores within SCOT, we have experienced increased visibility within organic search. </p> <p><img src="https://assets.econsultancy.com/images/0007/6723/graph2.jpg" alt="" width="814" height="336"></p> <p>Of course, what we can’t do is isolate the impact of these content amendments from the various other elements of activity that may have been undertaken to improve search performance, but there is evidence of a strong correlation between the quality of on-page content and search rankings. </p> <p>And it is important to stress that whilst we may be looking to introduce an algorithmic approach to content auditing, this shouldn’t be mistaken as an algorithmic approach towards content creation.</p> <p>What we are trying to do here is to ensure that our <a href="https://econsultancy.com/blog/67605-why-content-marketing-isn-t-seo-and-why-seo-isn-t-just-content/">content strategies plug key gaps</a> in what our audiences are looking for, but this shouldn’t turn content creation and optimisation into little more than a box ticking exercise. </p> <p>What matters above all else is that your brand is still providing value to the end user and delivering the best possible experience. Adding a layer of technical competence helps to deliver that user experience, but is also valued by search engines as they look to deliver the most relevant results. </p> <p><a href="http://www.stickyeyes.com/content-optimisation-tool%20">Try the latest version</a> of SCOT for free.</p> tag:econsultancy.com,2008:BlogPost/68061 2016-07-18T13:09:12+01:00 2016-07-18T13:09:12+01:00 23 clever uses for colour in ecommerce UX Ben Davis <h3>1. Virgin America - green for validated fields</h3> <p>Let's start with something simple but beautiful. Upon validating my data entry, <a href="https://econsultancy.com/blog/65065-30-little-things-i-love-about-the-new-virgin-america-website/">Virgin America</a> turns each field green.</p> <p>Purple is also used to highlight a field that hasn't been completed yet, as I click into it.</p> <p><img src="https://assets.econsultancy.com/images/0007/7055/virgin_validation.gif" alt="virgin america" width="615"></p> <h3>2. ASOS - flagging up sales in a mega menu</h3> <p>You might say this design touch is almost imperceptible, but using red text to highlight sales and savings in a mega menu will catch the eye.</p> <p>A great way to encourage increased browsing and basket value.</p> <p><a href="http://www.asos.com/women/"><img src="https://assets.econsultancy.com/images/0007/7044/Screen_Shot_2016-07-13_at_14.07.25.png" alt="asos website" width="615" height="477"></a></p> <h3>3. Nike - showing off product and encouraging add to cart</h3> <p>I've included Nike for its conspicuous lack of colour. The black and white design lets its products impress with their own colour.</p> <p><a href="http://www.nike.com/gb/en_gb/"><img src="https://assets.econsultancy.com/images/0007/7034/Screen_Shot_2016-07-13_at_12.12.34.png" alt="nike homepage" width="615" height="331"></a></p> <p>The one place where a splash of orange is used? The 'add to cart' button, for obvious reasons.</p> <p><img src="https://assets.econsultancy.com/images/0007/7035/Screen_Shot_2016-07-13_at_12.12.47.png" alt="nike product page" width="615" height="332"> </p> <h3>4. The Trainline - contrast, clarity, fun</h3> <p>The combination of bold colour and smart iconography makes <a href="https://econsultancy.com/blog/67022-nine-things-i-love-about-the-trainline-app/">the Trainline's app</a> and website easy and fun to use.</p> <p>Contrast in the booking engine allows users to methodically follow the booking process, taking one step at a time without fear of making a mistake.</p> <p><img src="https://assets.econsultancy.com/images/resized/0006/7779/img_2228-blog-flyer.png" alt="trainline app" width="300"></p> <h3>5. Pure Cycles - product differentiation</h3> <p>Pure cycles sells bikes online. What the retailer understand very well is the way that colour can be used to differentiate between products or present them in an appealing way.</p> <p>Lots of these bikes have similar elements (certainly in appearance), so using different colour on the wheels and frames allows Pure to create a diverse looking catalogue that the customer is not bored to browse.</p> <p>There's something for everyone, rather than an academic exercise of distinguishing between materials and detailed specs.</p> <p><a href="https://www.purecycles.com/"><img src="https://assets.econsultancy.com/images/0007/7042/Screen_Shot_2016-07-13_at_14.01.58.png" alt="pure cycle" width="615" height="352"></a></p> <p>This approach extends to cheaper products, such as grip sets. Pure Cycles displays all the colours together, to aim for high impact from an ostensibly functional and boring item.</p> <p><img src="https://assets.econsultancy.com/images/0007/7043/Screen_Shot_2016-07-13_at_14.04.15.png" alt="pure cycle products" width="615" height="341"></p> <p>When it comes to Pure Cycles' glow bikes, it really goes the extra mile to make product imagery stand out.</p> <p>Sales is all about the product, so making it look great on an ecommerce site should be aesthetic priority number one.</p> <p><img src="https://assets.econsultancy.com/images/0007/0134/bike_glow.gif" alt="pure cycles" width="505" height="280"></p> <h3>6. Pelican - more contrast and comprehension</h3> <p>A brand with rich heritage in design, it's unsurprising that Pelican's ebook-buying website is bold, simple and uses colour to instantly convey the distinctive clarity of Penguin's non-fiction house.</p> <p>This clarity helps reassure the customer that reading a book on their personal device (possibly a smartphone) will be an easy and enjoyable process.</p> <p>Clarity through contrast is something that many subscription and service businesses try to achieve, as these are often interfaces that the customer expects to use frequently, and wants to enjoy using (e.g. Spotify).</p> <p><img src="https://assets.econsultancy.com/images/0007/7038/Screen_Shot_2016-07-13_at_12.20.41.png" alt="pelican library" width="615" height="339"></p> <p><a href="https://www.pelicanbooks.com/"><img src="https://assets.econsultancy.com/images/0007/7037/Screen_Shot_2016-07-13_at_12.20.38.png" alt="pelican book" width="615" height="340"></a></p> <p>Though you might regard this as a publishing website, it still sells stuff through a checkout - maybe you'd like to emulate its chunky design?</p> <p><img src="https://assets.econsultancy.com/images/0007/7036/Screen_Shot_2016-07-13_at_12.20.20.png" alt="pelican checkout" width="615" height="338">  </p> <h3>Houzz - branding &amp; conversion</h3> <p>Houzz isn't strictly an ecommerce website (<a href="https://econsultancy.com/blog/67987-home-sweet-home-why-houzz-is-worthy-of-the-best-app-award">and app</a>), it's a marketplace where consumers can find designers, architects and products.</p> <p>But apart from the lack of a checkout, there's lots of features here that are directly transferable to a 'traditional' ecommerce site.</p> <p>The site and app's UX revolves around the use of brand colouring (green) to highlight certain elements in the design. It's a very effective way of encouraging or reassuring the user whilst asserting the brand.</p> <p>Lots of ecommerce sites do this, but Houzz takes it to the nth degree.</p> <p><strong>7. Highlighting products in UGC</strong></p> <p>Green is used throughout the very good Houzz app. Of note are the green price tags that signify products that can be clicked on, within photographed interiors.</p> <p><img src="https://assets.econsultancy.com/images/0007/7041/IMG_3040.PNG" alt="houzz app" width="350"></p> <p><strong>8. Highlighting reviews</strong></p> <p>This is often done in orange, but Houzz uses brand colouring to pick out reviews, bringing some social proof to the selection of designers and architects.</p> <p><a href="http://www.houzz.co.uk/"><img src="https://assets.econsultancy.com/images/0007/7016/Screen_Shot_2016-07-13_at_11.13.15.png" alt="highlighting reviews" width="615" height="271"></a></p> <p><strong>9. Ghost buttons</strong></p> <p>A feature of modern web design on desktop, in green again.</p> <p><img src="https://assets.econsultancy.com/images/0007/7015/ghost.gif" alt="ghost button" width="615"></p> <p><strong>10. Calls to action</strong></p> <p><em>'Visit store' call to action</em>  </p> <p><strong><img src="https://assets.econsultancy.com/images/0007/7024/Screen_Shot_2016-07-13_at_11.23.17.png" alt="call to action - houzz" width="615" height="311"></strong></p> <p><strong>11. Picking out breadcrumb trails and filters</strong></p> <p>This is a nice way to keep customers oriented.</p> <p><img src="https://assets.econsultancy.com/images/0007/7023/Screen_Shot_2016-07-13_at_11.20.27.png" alt="houzz breadcrumb" width="615" height="315"></p> <p><strong>12. Product rollovers</strong></p> <p>Another piece of UX assistance. Here Houzz highlights the save button (for creating a wishlist of sorts) and the email icon (to send the product listing to a friend).</p> <p><img src="https://assets.econsultancy.com/images/0007/7020/rollover_products.gif" alt="rollovers houzz" width="500"></p> <h3>13. Wish - discount flashes</h3> <p><a href="https://econsultancy.com/blog/67873-12-examples-of-persuasive-mobile-ux-from-ecommerce-app-wish/">Wish</a> is an ecommerce website and app aimed at bargain hunters.</p> <p>Its heavily discounted and promoted products and highlighted with orange flashes to show percentage discount, number remaining, and time remaining.</p> <p><img src="https://assets.econsultancy.com/images/0007/5257/IMG_2923.PNG" alt="wish app" width="300">  <img src="https://assets.econsultancy.com/images/0007/5248/deal_clocks.PNG" alt="wish app" width="300"></p> <p>Wish even uses this tactic in the checkout, again using an orange banner.</p> <p><img src="https://assets.econsultancy.com/images/0007/5247/checkout_incentive.PNG" alt="wish app" width="300"></p> <h3>14. Helbak - alternative to white space</h3> <p>Helbak Ceramics uses pastel shades to back product photographs on the hompage.</p> <p>This helps to delineate space and perk up the overall design, as well as add lustre to the products.</p> <p><a href="http://www.helbak.com/"><img src="https://assets.econsultancy.com/images/0007/7106/Screen_Shot_2016-07-14_at_13.03.30.png" alt="helbak" width="615" height="343"></a></p> <h3>15. Best Buy - flagging items in your cart</h3> <p>This is standard procedure - a cart that highlights when it has items in it, so the user knows to checkout.</p> <p>A lot of sites do this - here's Best Buy using its brand yellow, which it also uses for its 'add to cart' buttons.</p> <p><img src="https://assets.econsultancy.com/images/0007/7070/Screen_Shot_2016-07-14_at_08.38.51.png" alt="best buy" width="615" height="211"></p> <h3>16. Crayola - branding &amp; sheer fun</h3> <p>No other menu will give you this much joy in ecommerce. If websites should reflect their brands, Crayola nails it here.</p> <p><a href="http://www.crayola.com/"><img src="https://assets.econsultancy.com/images/0007/7045/Screen_Shot_2016-07-13_at_14.41.35.png" alt="crayola website" width="615" height="330"></a></p> <p><em>And on mobile</em></p> <p><img src="https://assets.econsultancy.com/images/0007/7046/crayola.gif" alt="crayola on mobile" width="227" height="309"></p> <h3>17. Flipkart - highlighting notifications</h3> <p>Notifications are becoming more common in ecommerce, a messaging feature used to flag up offers to customers, which are often also pushed to app users.</p> <p>Flipkart uses yellow to make the bell icon stand out.</p> <p><img src="https://assets.econsultancy.com/images/0007/7071/Screen_Shot_2016-07-14_at_09.04.23.png" alt="flipkart" width="615" height="222"></p> <h3>18. Currys - checkout progress indicator</h3> <p>Another bit of practical colouring here. Many ecommerce sites do this.</p> <p><img src="https://assets.econsultancy.com/images/0007/7095/Screen_Shot_2016-07-14_at_12.09.19.png" alt="currys" width="615" height="386"> </p> <h3>19. Lush - product contrast</h3> <p>We love lush (<a href="https://econsultancy.com/blog/67158-why-lush-is-the-undisputed-master-of-b-commerce/">see this article</a>). Like the Nike example above, Lush's copious whitespace allows its colourful products to shine.</p> <h3> <img src="https://assets.econsultancy.com/images/0006/8739/Screen_Shot_2015-11-05_at_19.12.09.png" alt="lush website" width="615"> </h3> <h3>20. Kayak - making sense of a booking engine </h3> <p>Booking engines can be dauntingly rich in information. Kayak uses its brand orange to pick out important features or information.</p> <p>It also uses a secondary colour, green, for persuasive elements such as savings and reviews.</p> <p><a href="https://www.kayak.co.uk"><img src="https://assets.econsultancy.com/images/0007/7063/Screen_Shot_2016-07-13_at_15.57.11.png" alt="kayak booking page" width="615" height="416"></a> </p> <h3>21. Odd Pears - product illustrations</h3> <p>I haven't seen many ecommerce sites do this - use illustrations instead of product photographs. Obviously, this will only work for a predictable commodity such as socks, but here it is quite effective.</p> <p>The patterns are given extra vibrancy in 2D and the uniformity between the images makes users want to collect them all.</p> <p>Adding colour swatches underneath each image adds to the attraction.</p> <h3><img src="https://assets.econsultancy.com/images/0006/8727/Screen_Shot_2015-11-05_at_18.03.34.png" alt="odd pears" width="615"></h3> <h3>22. IKEA - checkout errors</h3> <p>Another standard feature, using red to highlight where a user has missed a field or given incorrect information.</p> <p>Some checkouts only use red text and have generic messaging - IKEA is much clearer, bordering the field in red and including an intstructive message in red.</p> <p><img src="https://assets.econsultancy.com/images/resized/0007/7103/screen_shot_2016-07-14_at_12.43.51-blog-flyer.png" alt="ikea checkout" width="470" height="364"></p> <h3>23. AO.com - colour coding products</h3> <p><a href="https://econsultancy.com/blog/66768-ao-com-the-best-ecommerce-experience-available-online/">AO.com</a> uses colour well, with its brand green picking out key features such as delivery information and calls to action.</p> <p>The site also adds the energy rating flags of each appliance (traditionally coloured green to red depending on efficiency). This allows energy conscious users to quickly pick out the best machines.</p> <p><img src="https://assets.econsultancy.com/images/0007/7069/Screen_Shot_2016-07-14_at_08.30.52.png" alt="ao.com" width="615" height="526"> </p> tag:econsultancy.com,2008:BlogPost/68028 2016-07-06T14:21:35+01:00 2016-07-06T14:21:35+01:00 Five ecommerce lessons from Burberry and Hermes Bart Mroz <p dir="ltr"><a href="https://us.burberry.com/">Burberry</a> is a luxury brand that really gets it right. The brand’s digital experience is perfectly aligned with its image and persona - creating a sleek, chic, modern and cool feel.</p> <p dir="ltr">The couture brand uses bold visuals throughout its site, with a dynamic homepage that integrates interactive elements and visually stunning photography that instantly captures the attention of any consumer.</p> <h3 dir="ltr">Create compelling visual design</h3> <p dir="ltr">It’s important to build an ecommerce site that offers compelling visual design to help differentiate your brand from the competition.</p> <p dir="ltr">Burberry does an excellent job at this by creating innovative product pages that are dramatically different from those of its competitors.</p> <p dir="ltr">The details that go into the design elevate the shopping experience and add to the perceived brand value.</p> <p><img src="https://assets.econsultancy.com/images/0007/6804/product_images_plus_thumbnail.png" alt="" width="700" height="412"></p> <p dir="ltr">Product images are all perfectly shot on a consistent backdrop with every element of the product and the model in clear, crisp focus.</p> <p dir="ltr">This makes it possible to see even minute details without zooming in. Consistent and high-quality visuals such as these display your products in the best possible light.</p> <p dir="ltr">One unique visual feature that Burberry’s site utilizes is the use of large image tiles, which makes for a visually appealing browsing experience.</p> <p dir="ltr">Additionally, supplementary product details are sectioned off so consumers can quickly find the exact information they desire.</p> <p><img src="https://assets.econsultancy.com/images/0007/6805/recommended.png" alt="" width="700" height="414"></p> <p dir="ltr">And while many ecommerce sites provide <a href="https://econsultancy.com/blog/65866-how-do-product-recommendations-influence-buyer-behavior/">product recommendations</a> directly below the featured product, this practice can distract shoppers from following through on the purchase.</p> <p dir="ltr">By reducing the footprint of the product recommendation display and aligning it off-center, Burberry presents shoppers with additional options without detracting from the main product. </p> <h3 dir="ltr">Infuse branded content with commerce</h3> <p dir="ltr">An ecommerce site is much more than a destination to purchase products. It provides a platform for brands to engage with visitors and deliver content that tells an interactive story about the brand.</p> <p dir="ltr">Burberry’s website achieves this by seamlessly merging content and commerce to create a fluid and consistent brand image throughout the site.</p> <p dir="ltr">These experiences give users an emotional connection to the brand – similar to that of visiting a physical retail store.</p> <p><img src="https://assets.econsultancy.com/images/0007/6806/burberry_acoustic.png" alt="" width="700" height="416"></p> <p dir="ltr">The <a href="https://us.burberry.com/acoustic/#/acoustic">Acoustic</a> section, for example, features up-and-coming musicians performing in natural environments while dressed in Burberry clothing, yet there is no sign of a hard sell.</p> <p dir="ltr">It feels more like an exclusive look into these individuals’ lives which helps create emotional connections to visitors through music.  </p> <p><img src="https://assets.econsultancy.com/images/0007/6807/burberry_spring_summer.png" alt="" width="700" height="417"></p> <p dir="ltr">The <a href="https://us.burberry.com/our-history/#/heritage/heritage-1800-1">Our History</a> section provides a visual recap of how the iconic Trench Coat has evolved through the years, featuring world-famous models and prominent advertisements through different points in time.</p> <p dir="ltr">Each of these iconic images imbues a deep connection into the history of the brand and the people who helped shape it.</p> <h3 dir="ltr">Simplify the site’s structure</h3> <p dir="ltr">Brands often feature an extensive product line-up so effectively categorizing each product can be challenging, making it difficult for consumers to find exactly what they are looking for.</p> <p dir="ltr">Therefore, it’s crucial to simplify the site’s structure to make it easy for visitors to navigate your products.</p> <p><img src="https://assets.econsultancy.com/images/0007/6809/burberry_site_structure.png" alt="" width="700" height="412"></p> <p dir="ltr">Burberry did an excellent job of this by designing a site that makes exploring both intuitive and simple. The dynamic directory on the left-hand side of the page makes it simple to navigate and search products by category and/or collection.</p> <p dir="ltr">Each and every part of the website can be accessed through this directory and major categories can be expanded into subcategories.</p> <p dir="ltr"><strong><a href="http://www.hermes.com">Hermes</a></strong>, while also a world-class luxury brand with exceptionally crafted merchandise, offers a digital commerce experience that’s severely lacking.</p> <p dir="ltr">When visitors first arrive at the homepage, they’re immediately presented with three options: the brand site, the ecommerce store and store listings.</p> <p dir="ltr">There is a major divide between content and commerce, forcing shoppers to pick one path instead of allowing them to experience the brand in its entirety, and this is just the beginning of the shopper’s journey.</p> <p><img src="https://assets.econsultancy.com/images/0007/6810/hermes_homepage_2.png" alt="" width="700" height="537"></p> <h3 dir="ltr">Balance creativity with functionality</h3> <p dir="ltr">Some brands go so far into differentiating their sites from the competition that they end up confusing their visitors.</p> <p dir="ltr">The Hermes online shop is a prime example of this since the brand presents an unconventional design that makes visitors question whether it functions as an ecommerce site. </p> <p dir="ltr">The homepage looks more like a boutique art gallery than a luxury brand store, with its hand-drawn images that lack descriptions.</p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0007/6802/hermes_homepage.png" alt="" width="750" height="474"></p> <p dir="ltr"> There is no information to be found about the Hermes brand or any of its product, both of which can add context and content to the brand.</p> <p dir="ltr">Without these elements, the brand loses out on the opportunity to deliver an engaging brand experience.</p> <h3 dir="ltr">Offer Robust Product Pages</h3> <p dir="ltr">On many of Hermes’ product pages, <a href="https://econsultancy.com/blog/67052-a-copywriter-s-template-for-excellent-product-page-descriptions/">product descriptions</a> consist of a few sparse words such as “Printed beach towel” or “Hermes silk tie”.</p> <p dir="ltr">However, the lack of content and information doesn’t stop there.</p> <p dir="ltr">Many product pages offer just one or two images and products are presented on sketches rather than on models; this makes for a great artistic statement but it doesn’t translate well for commerce.</p> <p dir="ltr">.<img src="https://assets.econsultancy.com/images/0007/6811/hermes_towel.png" alt="" width="700" height="356"></p> <p dir="ltr">The Hermes site seems to have been created by artists, for artists.</p> <p dir="ltr">While this approach may resonate with some of the brand’s loyal fans, brands can’t afford to take ecommerce design to such an extreme creative direction in today’s increasingly competitive digital commerce landscape.</p> <p dir="ltr">If a brand’s ecommerce offering doesn’t drive sales or provide content that elevates the brand image, then it fails to deliver on consumer expectations and risks losing market share to its competitors.</p> <p dir="ltr"><em>For more on this topic, see:</em></p> <ul> <li><a href="https://econsultancy.com/blog/64767-where-are-luxury-brands-going-wrong-online/"><em>Where are luxury brands going wrong online?</em></a></li> <li><a href="https://econsultancy.com/blog/67604-what-s-the-point-of-social-media-for-luxury-brands/"><em>What’s the point of social media for luxury brands?</em></a></li> <li><a href="https://econsultancy.com/blog/67731-think-affiliate-marketing-doesn-t-work-for-luxury-brands-think-again/"><em>Think affiliate marketing doesn’t work for luxury brands? Think again</em></a></li> </ul>