tag:econsultancy.com,2008:/topics/user-experience-and-usability Latest User Experience and Usability content from Econsultancy 2016-09-29T14:19:12+01:00 tag:econsultancy.com,2008:BlogPost/68342 2016-09-29T14:19:12+01:00 2016-09-29T14:19:12+01:00 13 UX improvements Nespresso should make to its ecommerce customer journey Ben Davis <p>N.B. I should say that I have previously written positively about Nespresso, and believe it to be a great brand doing great things.</p> <p>However, with the ecommerce website not changing dramatically since I wrote <a href="https://econsultancy.com/blog/64507-nespresso-experiential-marketing-at-its-best/">this piece in early 2014</a>, and with subscription ecommerce maturing, there's a definite need for a slicker experience. </p> <h3>1. FREE delivery for large orders - missed opportunity on homepage</h3> <p>Look below. The homepage says 'next day delivery or pick up point when you purchase 200 or more capsules'.</p> <p>Bizarrely it doesn't say 'FREE' delivery, which is indeed the case for these larger orders, saving the customer £3.95.</p> <p><img src="https://assets.econsultancy.com/images/0007/9638/Screen_Shot_2016-09-27_at_16.11.22.png" alt="free delivery" width="615" height="398"></p> <h3>2. FREE delivery for large orders - missed opportunity on product pages</h3> <p>When I delve into the capsule product listings, one or two of them include a nice little banner saying 'FREE STANDARD DELIVERY - With 200 capsules or more'.</p> <p>As you can see here...</p> <p><img src="https://assets.econsultancy.com/images/0007/9637/Screen_Shot_2016-09-27_at_16.11.14.png" alt="free delivery" width="615"></p> <p>But the majority of the product listings do not contain this message (see below).</p> <p>Nor is the free delivery message stressed when I use a dropdown to select my order size - this would be the perfect place to put a marker, next to the 200 option.</p> <p><em>The majority of Nespresso product pages do not carry a free delivery banner</em></p> <p><img src="https://assets.econsultancy.com/images/0007/9636/Screen_Shot_2016-09-27_at_16.09.15.png" alt="free delivery" width="615"></p> <h3>3. Distraction issues in the checkout - downselling!</h3> <p>This one baffled me. I had £62 worth of coffee capsules in my basket, I proceeded to checkout and I'm offered a lower price selection of capsules (£47.50) that comes with a free gift.</p> <p>Now, this offer is for new Nespresso members, of which I am one, so you might argue that this represents good practice - I'm welcomed aboard with the offer of a free gift.</p> <p>Perhaps this gift and selection of capsules will stand a chance of increasing my <a href="https://econsultancy.com/blog/65435-what-is-customer-lifetime-value-clv-and-why-do-you-need-to-measure-it/">lifetime value</a>?</p> <p>However, in my opinion not only does this cross-sell (or down-sell, however you want to look at it) add another barrier in the checkout process (I have to click the small text link 'I am not interested for now'), but it is reducing average order value, by encouraging me to spend £14.50 less.</p> <p><img src="https://assets.econsultancy.com/images/0007/9635/Screen_Shot_2016-09-27_at_16.15.28.png" alt="free gift" width="615" height="615"> </p> <h3>4. Distraction issues in the checkout - milk frother cross-sell</h3> <p>More <a href="https://econsultancy.com/blog/66856-cross-selling-online-why-it-s-important-how-to-do-it/">cross-selling</a> issues arise when I get to the payment part of the checkout.</p> <p>I am shown a little ad for milk frothers. Again, I think it's strange to offer me this now, when Nespresso has almost got my money.</p> <p>Okay, if there was the option to add a milk frother to my bill there and then, it might make sense, but this is inviting me to exit the checkout altogether and start shopping again.</p> <p>Surely, this is increasing the chance of <a href="https://econsultancy.com/blog/64167-basket-abandonment-emails-why-you-should-be-sending-them/">basket abandonment</a>.</p> <p><img src="https://assets.econsultancy.com/images/0007/9614/Screen_Shot_2016-09-27_at_16.25.44.png" alt="frother cross sell" width="615" height="395"> </p> <h3>5. Postcode field validation is poor</h3> <p>This field doesn't like lower case letters.</p> <p>It's so boring having to capitalise things when a computer could have done it for me if it was that bothered.</p> <p><img src="https://assets.econsultancy.com/images/0007/9618/Screen_Shot_2016-09-27_at_16.17.37.png" alt="postcode" width="400" height="124"> </p> <h3>6. Sign in? I already have</h3> <p>Once I have ordered my coffee, I am now registered with Nespresso and logged in.</p> <p>However, the slightly strange prompt to sign in (which is not fixed to the header and scrolls up and down) remains.</p> <p><img src="https://assets.econsultancy.com/images/0007/9613/Screen_Shot_2016-09-27_at_16.27.25.png" alt="account" width="615" height="244"> </p> <h3>7. Poor copywriting: 'You have made your order from Internet'</h3> <p>In 'My account' I can see all my order details. There's a slightly clunky bit of <a href="https://econsultancy.com/training/courses/online-copywriting/">copywriting</a> here - 'You have made your order from Internet'.</p> <p>Little typos like this often show up an organisation still reliant on <a href="https://econsultancy.com/blog/67346-agile-development-what-do-marketers-need-to-know/">waterfall processes</a>. These sorts of tiny errors should be fixed as soon as they are noticed.</p> <p>And they should be noticed by ongoing testing.</p> <p><img src="https://assets.econsultancy.com/images/0007/9612/Screen_Shot_2016-09-27_at_16.27.25_copy.png" alt="order from internet" width="600" height="385"></p> <h3>8. Pointless-alert alert </h3> <p>An alert based on your usual order frequency to notify you when your capsules have most likely finished.</p> <p>This is a strange feature. Firstly, I've only made one order, so Nespresso has no idea what my consumption rate is.</p> <p>Secondly, even if Nespresso knew more about me, this alert is simply a stab in the dark.</p> <p>Of course, chivvying me along to buy more capsules isn't a bad thing and it sort of works for both parties, but there's an obvious conclusion to reach here.</p> <p>Wouldn't it be better to offer me an automatic subscription to a set number of capsules per month or three months, then give me a nominal discount on the order value for doing so?</p> <p>After all, there are other companies winning business with this subscription model, which is more convenient than even the reorder feature Nespresso offers. </p> <p><img src="https://assets.econsultancy.com/images/0007/9610/Screen_Shot_2016-09-27_at_16.45.21.png" alt="capsule alert" width="615" height="317"> </p> <h3>9. Recycling bags - add a prompt in the checkout</h3> <p>It's great that Nespresso encourages recycling. You can take a bag of empty capsules to your nearest store, or arrange a free collection alongside your next coffee delivery.</p> <p>The recycle bags are free and a recommended product when browsing coffee on the website (see the bottom right of <a href="https://assets.econsultancy.com/images/0007/9637/Screen_Shot_2016-09-27_at_16.11.14.png">this screenshot</a>).</p> <p>However, I didn't notice this recommendation, then when I tried to get a recycling bag after making a purchase, the Nespresso checkout won't allow me to (see screenshot below).</p> <p>I think the obvious solution is to add a simple one-click prompt in the checkout (do you want a free recycling bag?).</p> <p>This would do a lot for uptake of the service, something Nespresso is no doubt keen to see further adoption of to bolster its <a href="https://en.wikipedia.org/wiki/Corporate_social_responsibility">CSR</a> efforts and make the brand more friendly.</p> <p>Getting rid of that earlier milk frother ad in favour of a recycling prompt is a no-brainer.</p> <p><img src="https://assets.econsultancy.com/images/0007/9609/Screen_Shot_2016-09-27_at_16.49.58.png" alt="recycling" width="615" height="377"></p> <h3>10-12. Minor address field niggles (but things that I still noticed)</h3> <p><strong>10. Poorly labelled field: 'Delivery Remark'</strong></p> <p>Better copywriting needed here.</p> <p><img src="https://assets.econsultancy.com/images/0007/9634/Screen_Shot_2016-09-27_at_16.17.02.png" alt="delivery remark" width="400" height="176"> </p> <p><strong>11. Why is pickup point selected as default?</strong></p> <p>I have already been asked for my delivery address. So why then make pickup the default?</p> <p>Pickup points should have been an option before I had to enter a delivery address.</p> <p><img src="https://assets.econsultancy.com/images/0007/9617/Screen_Shot_2016-09-27_at_16.19.15.png" alt="pickup" width="615" height="577"> </p> <p><strong>12. 'Delivery instructions' field not labelled</strong></p> <p>If I select to allow my delivery to be left 'in a safe place', I am told to specify this safe place in the 'delivery instructions field above'.</p> <p>But there is no such field labelled above.</p> <p>One has to assume the text is referring to the box I have highlighted in the second screenshot below. Again, there is a really simple fix that hasn't been made.</p> <p><img src="https://assets.econsultancy.com/images/0007/9616/Screen_Shot_2016-09-27_at_16.22.38.png" alt="nespresso" width="615" height="258"></p> <p><em>Delivery instructions field?</em></p> <p><img src="https://assets.econsultancy.com/images/0007/9615/Screen_Shot_2016-09-27_at_16.22.56.png" alt="delivery instructions" width="615" height="424"> </p> <h3>13. Mobile app works nicely but no delivery prompt for +200</h3> <p>I haven't included much on the mobile app here. It's an altogether nicer experience than using the desktop site and looks fairly slick.</p> <p>However, there are still issues. Again, free delivery for larger orders is not highlighted. All I get is a prompt to round my capsules to the nearest 50.</p> <p><img src="https://assets.econsultancy.com/images/0007/9647/IMG_3175.png" alt="nespresso app" width="300">  <img src="https://assets.econsultancy.com/images/0007/9649/IMG_3176.png" alt="nespresso app" width="300"></p> <h3>14. Emails are not mobile optimised</h3> <p>I had lots of useful follow-up emails, welcoming me as a member, giving me my order details and telling me of order dispatch.</p> <p>Unfortunately, none of the three were readable without plenty of zooming on mobile.</p> <p><img src="https://assets.econsultancy.com/images/0007/9651/nesp_email.png" alt="email nespresso" width="335" height="595"></p> <h3>In conclusion...</h3> <p>Why did I bother with this exercise you might ask? Well, as I mentioned in the intro, standards continue to rise, <a href="https://econsultancy.com/blog/68325-how-can-startups-beat-fmcg-giants-an-interview-with-cornerstone-s-founder/">particularly in FMCG as subscription models raise the bar</a> for online UX.</p> <p>Nespresso's ecommerce functionality didn't make me curse and I managed to easily order my coffee.</p> <p>But, if Nespresso produces a top notch and slick experience on the next development of its platform, alongside a subscription offering, I am more likely to return.</p> <p>As it is, I may simply head back to my supermarket, and the next best brand.</p> tag:econsultancy.com,2008:BlogPost/68330 2016-09-27T10:20:00+01:00 2016-09-27T10:20:00+01:00 An in-depth analysis of how Expedia converts visitors into customers: Part one Duraid Shaihob <p>One of the largest travel sites in the world, Expedia and its subsidiaries (which include Hotels.com, Trivago, HomeAway and Travelocity) help millions of travelers find flights and hotels every month.</p> <p><a href="https://econsultancy.com/reports/conversion-rate-optimization-report/">Conversion rate optimization</a> is a major concern for a business as large as Expedia’s.</p> <p>When you’re dealing with tens of millions of transactions every year, even a 0.2% bump in conversion rates can translate into millions in extra revenue.</p> <p>For obvious reasons, there’s a lot you can learn about CRO best practices and innovations by understanding how Expedia turns visitors into customers. </p> <p>Paul Rouke, Founder &amp; CEO at PRWD previously wrote about <a href="https://econsultancy.com/blog/64681-is-booking-com-the-most-persuasive-website-in-the-world/">Booking.com being the most persuasive website in the world</a>, and after using Expedia for the first time, I think it also deserves to be ranked among the best in the business.</p> <p>In the first of two posts, I’ll do an in-depth teardown of Expedia.com and show you how it converts traffic coming in from two different channels - organic search and direct type-ins.</p> <p>Part two, due to be published next week, will focus on traffic from <a href="https://econsultancy.com/reports/paid-search-marketing-ppc-best-practice-guide/">PPC</a> and social (organic and paid).</p> <h3>Expedia: Then vs. Now</h3> <p>Expedia was founded in October 1996, which makes it one of the oldest travel sites online.</p> <p>Here’s how the site looked like at launch:</p> <p><img src="https://assets.econsultancy.com/images/0007/9491/expedia_1996.png" alt="" width="800" height="573"></p> <p>The site did not even have a search box when it was launched, let alone a flight booking facility. </p> <p>This is a far cry from the slick, conversion-optimized website that greets you today:</p> <p><img src="https://assets.econsultancy.com/images/0007/9492/expedia_1.png" alt="" width="800" height="446"></p> <p>If you’ve hung out on any CRO focused websites, a few things about the Expedia.com site will jump out immediately:</p> <p><strong>1.</strong> <strong>Highly noticeable CTAs:</strong> Both the “Search” button and the top “Hello bar” are in a bright shade of yellow.</p> <p>This grabs attention as soon as you land on the site, especially when contrasted against the blue/gray colors.</p> <p><strong>2.</strong> <strong>Non-intrusive navigation:</strong> The navigation menu doesn’t necessarily grab attention. Instead, the entire focus of the site is on the flight/hotel booking area.</p> <p><strong>3. Distinctive notifications:</strong> The notification icon in the top navigation menu has a distinctive red color and a clear “alarm” icon.</p> <p>You can’t really land on the homepage without noticing it.</p> <p><strong>4. Above the fold:</strong> All the important information - booking a flight, checking out different deals , etc. - is above the fold.</p> <p>In fact, you don’t even have to scroll down the page to book a ticket or a hotel room.</p> <p>There are plenty of other tactics Expedia uses to grab and focus user attention, as you’ll see later.</p> <h3>How Expedia Converts Visitors in Different Scenarios</h3> <p>As a large travel site, Expedia gets its users from search, social, referrals, direct type-ins and paid channels. </p> <p>How Expedia tailors its user experience for visitors coming in from each of these channels can teach you a lot about CRO.</p> <p>For example, on Expedia’s Twitter handle, the company promotes <a href="https://viewfinder.expedia.com/">its blog</a> instead of the main website.</p> <p>It also promotes its other social channels such as Snapchat through pinned tweets and custom logos.</p> <p><img src="https://assets.econsultancy.com/images/0007/9493/expedia_twitter.png" alt="" width="800" height="472"></p> <p>This is very different from the company’s Facebook page where it promotes its main site, Expedia.com:</p> <p><img src="https://assets.econsultancy.com/images/0007/9494/expedia_twitter_2.png" alt="" width="800" height="527"></p> <p>Below, I’ll breakdown the user experience for different channels and show you how Expedia maximizes conversion rates for organic search, social, and direct traffic.</p> <h3>Scenario #1: Direct Traffic to Expedia.com</h3> <h4>The Situation</h4> <p>Imagine that you’re a 35-year-old man from Texas. For an upcoming anniversary, you want to treat your wife to a vacation in New York.</p> <p>Since you’ve seen dozens of Expedia ads on TV, you decide to give Expedia a try to book flights. </p> <p>Thanks to the constant advertising, you have strong recall for the Expedia website. So instead of search, you type in Expedia.com directly into your browser.</p> <p>Here’s how Expedia turns such a user into a customer:</p> <h3>The landing page</h3> <p>When you land on Expedia.com, this is the page that greets you:</p> <p><img src="https://assets.econsultancy.com/images/0007/9495/expedia_landing_page.png" alt="" width="700" height="384"></p> <p>Four things to note here:</p> <p><strong>1.</strong> <strong>The default open tab is flight + hotel “Bundle Deals”. </strong></p> <p>This is more profitable for OTAs (Online Travel Agencies - like Expedia or Booking.com) since they get to sell not one but two products - a hotel and a flight.</p> <p>It’s also better value for customers since they can often get bundled deals. </p> <p><strong>2. “Hello Bar” promotes sign-ups</strong></p> <p>You’ll notice that there is no “sign-up” button anywhere on the homepage.</p> <p>To find this link, you have to click on “Account”, then “Sign-in” to get to the login page.</p> <p>The only other sign-in prompt is at the top of the page on the yellow Hello Bar.</p> <p><img src="https://assets.econsultancy.com/images/0007/9497/expedia_3.png" alt="" width="800" height="256"> </p> <p>This is something Expedia shares with most of its subsidiaries.</p> <p>For example, here’s Travelocity’s navigation bar:</p> <p><img src="https://assets.econsultancy.com/images/0007/9498/expedia_5.png" alt="" width="800" height="241"></p> <p>And here’s Orbitz’s navigation:</p> <p><img src="https://assets.econsultancy.com/images/0007/9499/orbitz_nav.png" alt="" width="717" height="261"></p> <p>Clearly, this is a strategy that’s working for Expedia.</p> <p><strong>3. The notification icon in the navigation menu</strong></p> <p>This icon tells visitors about the “My Scratchpad” feature.</p> <p>This has been a big part of the conversion rate optimization push at Expedia. I’ll show you how it works later.</p> <p><img src="https://assets.econsultancy.com/images/0007/9500/expedia_notification.png" alt="" width="645" height="207"></p> <p><strong>4. The app download incentive</strong></p> <p>Expedia offers customers points for using its service, called “Expedia+ points”.</p> <p>You can redeem these points for tickets and hotel rooms on the platform (you can also donate these points for cash to St. Jude Children’s Hospital for charity).</p> <p>To incentivize downloads of the Expedia mobile app, the company features a banner for the app on its homepage. Plus, it gives you 3x more points for using the app.</p> <p>Clicking on this text banner takes you to <a href="https://www.expedia.com/app?mcicid=USTriple2">a landing page that promotes the mobile app features</a>, reviews, etc.</p> <p>Expedia also gives users a $25 off coupon for the first hotel booking through the app.</p> <p><img src="https://assets.econsultancy.com/images/0007/9501/expedia_coupon.png" alt="" width="800" height="304"></p> <p>These incentives can compel new users to try out a new app.</p> <p>In fact, research shows that besides recommendations from family and friends and personalized offers, such one-time offers are one of the biggest reasons for trying out new apps.</p> <p><img src="https://assets.econsultancy.com/images/0007/9502/bar_graph.png" alt="" width="859" height="509"></p> <p><a href="http://skift.com/2014/12/19/what-travels-top-ceos-have-to-say-about-consumers-mobile-habits/">As per Expedia CEO Dara Khosrowshah</a>i, roughly 40% of Expedia’s users are booking across multiple devices.</p> <p>Incentivizing mobile app downloads with coupons and reward points is a big part of the company’s strategy to capture users on smaller screens.</p> <h3><strong>Using Expedia's search tool</strong></h3> <p>Let’s say that instead of flights + hotels, you only want to book a flight ticket from Expedia.</p> <p>So you click on the ‘Flights’ tab and enter your preferences:</p> <p><img src="https://assets.econsultancy.com/images/0007/9503/expedia_search.png" alt="" width="700" height="380"></p> <p>Note that you can also select ‘Add a Hotel’ and ‘Add a Car’ to expand your search beyond flights.</p> <p>As Expedia starts the search process, this is what you see:</p> <p><img src="https://assets.econsultancy.com/images/0007/9504/expedia_6.png" alt="" width="800" height="439"></p> <p>Take note of three things here:</p> <p><strong>1. A progress bar shows the status of the search</strong></p> <p>This is a neat UI/UX touch that not only cues in visitors to the status of the search, but also discourages people from abandoning a lengthy search.</p> <p><strong>2. The “Price Alerts” modal on MyScratchpad</strong></p> <p>As soon as you start the search, a Javascript modal box pops up telling you that the “search has been saved in your Scratchpad”, and that by clicking the bright yellow button, you can “Get Price Alerts”.</p> <p>What is the Scratchpad? Think of Scratchpad as a digital notepad for planning your travels (Expedia even calls it that in its marketing docs).</p> <p><img src="https://assets.econsultancy.com/images/0007/9505/scratchpad.png" alt="" width="800" height="446"></p> <p>This “digital notepad” keeps track of all your searches and gives you the option to get fare alerts for a particular search. </p> <p>More importantly, this scratchpad retains its information even as you move across devices.</p> <p>This means you can start your search on your laptop, then switch to the smartphone and still find all your old searches.</p> <p>As Expedia’s CEO explains:</p> <blockquote> <p>So ScratchPad is really a framework that we’ve built. We are going to take it across devices as far as push notifications.</p> <p>You can imagine appending searches. If you’ve done a bunch of flight searches, you might be able to append them, send them to your wife, share them socially.</p> </blockquote> <p>For obvious reasons, this is good for conversions. </p> <p><strong>3. “Why shop with us” benefits list</strong></p> <p>OTAs have a big problem on their hands: they have no real way to differentiate themselves. </p> <p>It doesn’t matter whether you go to Travelocity or Booking.com or Expedia - you’re still going to buy the same end-product - a flight ticket or a hotel room.</p> <p>The only way travel sites can differentiate themselves is through the quality of their services, better prices, and low fees.</p> <p>This is exactly what this section hopes to accomplish - by telling users exactly why they should choose Expedia over competitors.</p> <h3>Booking a Flight</h3> <p>After selecting a flight by clicking “Continue”, you will be taken to another similar page to select the return flight.</p> <p>Once you’ve selected the flight, Expedia prompts you to book a hotel as well to get steep discounts:</p> <p><img src="https://assets.econsultancy.com/images/0007/9507/expedia_booking_a_flight.png" alt="" width="800" height="260"></p> <p>Combined with the default open tab on “Flights + Hotels”, this is another example of Expedia’s core strategy to upsell hotels along with flights.</p> <p>After you click through, you’ll be taken to the checkout page.</p> <p>Lots of interesting things happening here:</p> <p><img src="https://assets.econsultancy.com/images/0007/9508/expedia_booking.png" alt="" width="800" height="439"></p> <p><strong>1. “Best value flights” prompt</strong></p> <p>This prompt (note the green color and the checkmark) congratulates you on selecting the right flight.</p> <p>Then it asks you to “book now” so you get the best possible price.</p> <p><strong>2. Correct flight departure</strong></p> <p>In my case, I’m landing at LGA but departing from EWR.</p> <p>Expedia helpfully warns me about it - in highly noticeable red text, no less.</p> <p><strong>3. Hotel prompt</strong></p> <p>Once again, Expedia upsells a hotel package.</p> <p>There’s a simple reason for the aggressive upselling - <a href="http://articles.economictimes.indiatimes.com/2016-01-12/news/69704913_1_hotel-segment-hotel-chains-market-share">hotels offer OTAs 10-15% margins</a>, vs. just 5% for flight bookings.</p> <p><strong>4. “34 people book a flight…”</strong></p> <p>This prompt acts as social proof - one of the foundational principles of persuasion - by showing that there are plenty of others (34, to be exact) who’ve booked the exact same flight.</p> <p><strong>5. Upsell for Expedia credit card</strong></p> <p>Yet another upsell, this time for an Expedia Voyage credit card that will not only help you score great travel deals, but also get you 25,000 Expedia+ points.</p> <p>Since the user is already somewhat committed to the purchase, this is a good place to upsell this credit card.</p> <p><strong>6. Best Price Guarantee</strong></p> <p>Expedia “guarantees” the best possible price (<a href="https://www.expedia.com/p/info-other/guarantees#1">here’s the page explaining how</a>).</p> <p>In fact, if you find a lower price than Expedia’s, the company will pay you the difference and give you a $50 coupon.</p> <p>Again, this helps assure customers that they’re getting the best possible deal.</p> <p><strong>7. “Best Value”</strong></p> <p>More pats on the customer’s back for picking the flight that offers the best value.</p> <p>Expedia wants to make you feel that you were smart enough to pick the right flight (and not that Expedia picked the flight for you).</p> <p>Giving the customer agency this way can help improve conversion rates.</p> <p>After reviewing the price, you can continue the purchase by clicking the appropriately named button - “Continue Booking”.</p> <p>On this page, you’ll be asked for the passenger details.</p> <p><img src="https://assets.econsultancy.com/images/0007/9509/expedia_passenger_details.png" alt="" width="800" height="633"></p> <p>Besides the points noted above, a few more things stand out here:</p> <p><strong>1. Sign-in prompt</strong></p> <p>Expedia wants to convert more of its browsers into users. To do this, it offers customers bonus “Expedia points” for signing-in. </p> <p><strong>2. “Prices not guaranteed” </strong></p> <p>This can serve both as a warning and an incentive.</p> <p>It tells users that the prices shown on the page are not “guaranteed” until they actually book it.</p> <p>So if they want to lock in the savings, they better finish the booking process fast.</p> <p><strong>3. No navigation bar </strong></p> <p>Like the previous checkout page, the only navigation link here is the “Sign-in” button.</p> <p>All other navigational elements have been removed to focus on converting users.</p> <p><strong>4. “Breadcrumbs” navigation</strong></p> <p>This navigation menu helps guide users through the checkout process. Note the use of icons next to the text.</p> <p><strong>5. “Secure transmission”</strong></p> <p>A gray lock icon and a security declaration helps reassure customers that their data isn’t going to get lost - a big concern after the number of major companies losing customer data after breaches (most famously, the Target data breach).</p> <p><strong>6. Hotel upsell</strong></p> <p>Notice that in this upsell, Expedia gives you an exact figure for how much you can save on hotels by booking it with your flight tickets.</p> <p>Giving exact figures works better since they sound more “real” than rounded figures like “50% off”.</p> <p>In the case of pricing, for example, the lack of “roundedness” <a href="http://www.jstor.org/discover/10.1086/678484?searchUri=%2Faction%2FdoBasicSearch%3FQuery%3Dthis%2Bnumber%2Bjust%2Bfeels%2Bright%26amp%3Bacc%3Doff%26amp%3Bwc%3Don%26amp%3Bfc%3Doff%26amp%3Bgroup%3Dnone&amp;resultItemClick=true&amp;Search=yes&amp;searchText=this&amp;searchText=number&amp;searchText=just&amp;searchText=feels&amp;searchText=right&amp;uid=3739696&amp;uid=2134&amp;uid=2&amp;uid=70&amp;uid=4&amp;uid=3739256&amp;sid=21106111788201">improves conversion rates for rational purchases such as flight tickets</a>.</p> <h3>Paying for the flight</h3> <p>After you enter the passenger details, you’ll be taken to the payment page. This is the moment of truth - every step in the customer’s journey has been leading up to this.</p> <p>Expedia uses this page to maximize its earnings by heavily promoting an upsell: a $20 travel insurance policy.</p> <p><img src="https://assets.econsultancy.com/images/0007/9511/expedia_paying_for_the_flight.png" alt="" width="800" height="459"></p> <p>Keep in mind that Expedia doesn’t charge a transaction fee to users.</p> <p>Whatever money it makes, it makes through upsells and by charging hotels and airlines a commission.</p> <p>By pushing an insurance policy, Expedia can dramatically increase the amount of money it makes from every customer.</p> <p>How it promotes this offer is an exercise in conversion optimized design. From clever use of color to <a href="https://econsultancy.com/training/courses/online-copywriting/">smart copywriting</a>, Expedia pulls out all the guns to get people to buy more.</p> <p>Let’s take a look at everything Expedia is doing here:</p> <p><strong>1. Fear of Missing Out</strong></p> <p>FoMO (Fear of Missing Out) is a well documented psychological phenomenon where people are compelled to do something just because it might not be available later.</p> <p>Expedia takes advantage of that by boldly asking customers to not “Miss Out” on this deal. A clock icon and red text adds to the effect.</p> <p><strong>2. Loss aversion</strong></p> <p>On the surface, this list of reasons looks innocuous enough. Dig deeper, however, and you’ll notice how they all focus on negativity - loss, sickness, medical emergencies.</p> <p>This plays into <a href="https://en.wikipedia.org/wiki/Loss_aversion">the psychological phenomenon of loss aversion</a>, where people are motivated more by losing something than making new gains.</p> <p><strong>3. Purchase affirmation + negative opt-out</strong></p> <p>Here, Expedia makes “Yes” the default choice. It also phrases the purchase as protection (“I want to protect my trip”) and not as insurance.</p> <p>The statement - “Expedia protects over 1 million flight travelers a year” - works as social proof.</p> <p>If 1m people are buying insurance every year, surely they all can’t be wrong?</p> <p>Also note the checkmark next to this statement. The choice is also highlighted by clever use of color - green is frequently <a href="http://adpearance.com/blog/color-theory-and-landing-page-buttons">associated with wealth, renewal and stability</a> in color psychology. </p> <p>To opt out of buying the insurance, you have to click a radio button with a negative choice.</p> <p><img src="https://assets.econsultancy.com/images/0007/9512/expedia_insurance.png" alt="" width="800" height="150"></p> <p>By vocalizing the negative choice, Expedia makes it sound much less appealing.</p> <p>This is a tactic frequently used by marketers to push more users towards the positive opt-in. For example, here’s a pop-up on Copyhackers:</p> <p><img src="https://assets.econsultancy.com/images/0007/9513/copyhackers_messages.png" alt="" width="800" height="510">v</p> <p>Interestingly, the font for the opt-out button is slightly smaller than the font for the opt-in.</p> <h3>Testimonial </h3> <p>Effective use of testimonials is one of the best weapons in any CRO’s arsenal to push conversions.</p> <p>Here, Expedia not only uses a testimonial from a real customer, but also gives an exact value of the monetary benefits from the insurance.</p> <p>Combined, these design choices help push Expedia’s conversion rates for this upsell much higher.</p> <p>The actual payment form is surprisingly sparse:</p> <p><img src="https://assets.econsultancy.com/images/0007/9514/payment_details.png" alt="" width="750" height="478"> </p> <p>The only visual element are logos of different payment providers. Expedia includes a total of six logos - far beyond the usual two or three logos.</p> <p>This gives customers the impression that they have multiple payment options to choose from, which can give <a href="http://www.retailtechnologyreview.com/articles/2009/05/06/476-survey-finds-that-merchants-are-losing">a small boost to conversion rates</a>.</p> <p>Scroll down further and you’ll be asked to enter your email address to receive booking confirmation:</p> <p><img src="https://assets.econsultancy.com/images/0007/9515/booking_confirmation.png" alt="" width="750" height="465"></p> <p>The only thing of interest here is that Expedia checks the “Join Expedia+” checkbox by default.</p> <p>Just so you aren’t sore about it (and to make the membership more appealing), it offers you 56 Expedia+ points to push you to sign-up for an account.</p> <p>Once you’ve entered the payment information and clicked “Continue Booking”, you’ll have the flight ticket in your account.</p> <h3>Scenario 2: Organic Traffic Teardown</h3> <h4>The Situation</h4> <p>The Texas man who wants to gift his wife a weekend for two in New York city now heads over to Google instead of Expedia.com directly.</p> <p>He types in a query - “flight tickets to New York”.</p> <p>On the first page, he finds a search result from Expedia that looks promising:</p> <p><img src="https://assets.econsultancy.com/images/0007/9516/kayak_search_results.png" alt="" width="750" height="508"></p> <p>Let’s take a look at how Expedia converts this search visitor into a customer.</p> <h3>The landing page</h3> <p>This is the landing page from a search for “flights to New York” on Google. A few things deserve our attention:</p> <p><img src="https://assets.econsultancy.com/images/0007/9518/expedia_new_york_fights.png" alt="" width="750" height="321"></p> <p>The landing page is customized for the query.</p> <ul> <li>The lowest possible price ($98) is shown first to convince visitors to stick around.</li> <li>The landing page lists three reasons for choosing Expedia - tons of hotels, guaranteed low prices, and free 24 hour cancellation.</li> </ul> <p>Scroll down a bit further and you’ll see a list of flights to New York from different cities.</p> <p>Things to note here:</p> <p><img src="https://assets.econsultancy.com/images/0007/9519/expedia_options.png" alt="" width="750" height="333"></p> <p>1. The share button is a small drop down menu.</p> <p>The button blends into the background and doesn’t really attract attention.</p> <p>Obviously, shares are not a big source of traffic for Expedia for users coming in from search, which is why it has muted the button.</p> <p>2. As with the landing pages we saw above, Expedia pushes its Flights + Deals over flight-only deals.</p> <p>The reason is simple enough: OTAs make more money from hotel bookings than just flight bookings.</p> <p>3. The highest possible discount is highlighted in the section headline without any information on the flight’s date, hotel type or airline.</p> <p>The sole purpose is to get users to click through to the next page.</p> <h3>Using flight search</h3> <p>Once you initiate the search, you are greeted by a page similar to the one you saw above:</p> <p><img src="https://assets.econsultancy.com/images/0007/9520/expedia_flight_search.png" alt="" width="800" height="453"></p> <p>There are two design elements here that I want to highlight.</p> <p>Firstly, if you’ve made any previous searches on Expedia, you can “turn on search notes” in your Scratchpad to see how prices have changed since your last search.</p> <p>Secondly, a small but hard-to-ignore pop-up box in bright yellow informs me that “4043 people are shopping for flights to NYC on Expedia right now”. How is that for social proof?</p> <p>But before I can look at the search results, a pop-up shows on screen:</p> <p><img src="https://assets.econsultancy.com/images/0007/9521/expedia_pop_up.png" alt="" width="800" height="434"></p> <p>This pop-up warns users that ticket prices are set to rise in the next few days.</p> <p>The way it is phrased makes it sound like it is merely doing a service to users - warning them about an impending price change.</p> <p>However, from a CRO perspective, it is clear that this warning is meant to drive conversions, not just warn users.</p> <p>Two things you should note about it:</p> <p>1. Instead of giving a vague “prices are about to rise!” warning, it gives an exact figure for the expected price rise - 55%. This makes the warning sound much more believable.</p> <p>2. The price rise is time bound. Instead of saying that prices are going to rise “in the next few days”, Expedia tells you the exact number of days (six) before the impending price rise. </p> <p>Together, this compels more users to take action since prices will go up by more than half in less than a week.</p> <p>Also note the pop-up at the bottom - more social proof!</p> <h3>Selecting the flight</h3> <p>After you select a departing and a return flight (I’m picking the very first one), you’ll see a pop-up promoting a hotel + flight offer:</p> <p><img src="https://assets.econsultancy.com/images/0007/9523/expedia_hotel_and_flight_offer.png" alt="" width="800" height="308"> </p> <p>Again, Expedia pushes the flight + hotel deal since it’s better for Expedia as well as customers.</p> <p>The booking review page is similar to the page we saw earlier.</p> <p>Note the congratulatory message at the top - a subtle push to persuade users to finish the purchase.</p> <p><img src="https://assets.econsultancy.com/images/0007/9524/expedia_booking_review.png" alt="" width="750" height="372"></p> <h3>Paying for the flight</h3> <p>After entering the passenger details, you’ll be taken to the payment page. This is similar to the page we saw above.</p> <p>There’s the same upsell for travel insurance along with the customer testimonial, conversion focused design and persuasive copywriting:</p> <p><img src="https://assets.econsultancy.com/images/0007/9525/expedia_confirmation.png" alt="" width="750" height="392"></p> <p>After entering your credit card information, you can hit ‘Complete Booking’ and wrap up the purchase.</p> <h4>See you next time...</h4> <p>So far, we’ve seen how Expedia creates an optimum customer journey for users coming in through organic search and direct.</p> <p>This leaves two big acquisition channels - social media and paid traffic.</p> <p>As mentioned, the second part of this analysis will be published on Econsultancy's blog next week.</p> tag:econsultancy.com,2008:BlogPost/68324 2016-09-26T10:07:00+01:00 2016-09-26T10:07:00+01:00 A day in the life of... Feefo CCO & co-founder Ben Davis <p>Don't forget, if you're looking for a new challenge in digital <a href="https://jobs.econsultancy.com/">our jobs board</a> lists hundreds of open positions, and you can benchmark your own digital knowledge using our <a href="https://econsultancy.com/training/digital-skills-index-lite/">Digital Skills Index</a>.</p> <h3>Please describe your job: What do you do?</h3> <p>I'm chief commercial officer and co-founder at <a href="http://www.feefo.com">Feefo</a>. </p> <h3>Whereabouts do you sit within the organisation? Who do you report to?</h3> <p>I co-founded Feefo Holdings with Andrew Mabbutt, the CEO. We’ve always run the business together and complement each other’s skills.</p> <p>At heart we’re both salesmen, so we’ve taken great pride in beating every target we set and reporting amazing results to our Chairman. </p> <h3>What kind of skills do you need to be effective in your role?</h3> <ul> <li>An excellent communicator</li> <li>Ability to see the bigger picture</li> <li>Multitasking (as well as I can!) </li> </ul> <h3>Tell us about a typical working day… </h3> <p><strong>6am start: </strong>Walk the dog, brekkie &amp; coffee if I have time.</p> <p><strong>9am: </strong>At the government offices for Visit Britain, pushing an initiative to capture the sentiment of visitors to better understand the strengths and weaknesses of our tourism industry.</p> <p><strong>11am: </strong>I’m on stage speaking about the potential for instant live reviews to the fashion and apparel world.</p> <p><strong>Midday: </strong>I’m lunching with The Times Travel (they’re doing a piece on the impact of fake reviews on the travel industry &amp; how Feefo are helping to prevent this).</p> <p><strong>7pm: </strong>Hosting a dinner with Travel Weekly.</p> <p><strong>10pm: </strong>Usually at home settling down with my family, but tonight I’m packing for Vegas. </p> <p>Oh, and in between all this I have around 15 calls, connect with my team in the office &amp; regularly check my emails.</p> <p><img src="https://assets.econsultancy.com/images/0007/9474/Matt_Eames.jpg" alt="feefo cco" width="400" height="400"> </p> <h3>What do you love about your job? What sucks?</h3> <p>I love the people and the office we work in (a converted barn on a working dairy farm), and always thinking about the next new &amp; exciting development.</p> <p>What sucks? Not being able to roll out all our wonderful fresh ideas straight away.</p> <h3>What kind of goals do you have? What are the most useful metrics and KPIs for measuring success? </h3> <p>I want to make Feefo as synonymous with reviews as Money Saving Expert is with cost savings.</p> <p>Ultimately, when people want to know about a company or a product, they just ‘Feefo it!’</p> <p>Questions I regularly ask: </p> <ul> <li>Are we hiring?</li> <li>Are we looking where to open the next office (I have my sights on Beijing).</li> <li>Are we still one step ahead of our competitors?</li> </ul> <h3>What are your favourite tools to help you to get the job done?</h3> <p>Google Alerts &amp; Evernote. News apps and Twitter for keeping my finger on the pulse and on top of trending topics within the industry.</p> <p>I especially like Twitter and LinkedIn for connecting and finding people who are likeminded to us (being genuine and providing the best possible customer service). </p> <h3>How did you get started in the digital industry, and where might you go from here?</h3> <p>I actually started my career in the world of football and cricket, and then went into the world of finance.</p> <p>While I never set out to go into digital, I was always following and excited by the fast paced and innovative digital marketplace.</p> <p>I also always wanted to build my own business, coupled with the fact that I enjoy meeting new, interesting people led me down this path.</p> <p>I'm a strong believer of "it’s not what you know but who you know", and I was fortunate to know Mr Nick Wheeler (founder of Charles Tyrwhitt shirts, and Chairman of Feefo Holdings).</p> <p><img src="https://assets.econsultancy.com/images/0007/9476/Screen_Shot_2016-09-23_at_12.17.00.png" alt="feefo" width="615" height="399"></p> <h3>Which brands do you think are doing digital well?</h3> <p>There are a number of companies that continue to execute great brand awareness campaigns on social media, including Innocent Smoothies and Burberry.</p> <p>Thomas Cook &amp; Mark Warner also continue to deliver impressive fully integrated campaigns which cover all aspects of the user journey.</p> <p>However, what’s particularly exciting to me is the truly digital disruptive companies, such as Netflix, WhatsApp, Uber and Airbnb.</p> <p>WhatsApp has displaced telecoms companies, Netflix changed home entertainment and Uber has totally transformed the taxi industry.</p> <h3>Do you have any advice for people who want to work in the digital industry?</h3> <p>Digital is certainly an exciting industry to work in! If you enjoy new challenges, have a genuine passion for innovation &amp; enjoy learning, you’ll love it.</p> <p>The digital current moves quickly and it can be easy to get lost in all the action. However, if you stay focused, and take it all in your stride you’ll be successful.</p> <p>If you want to learn digital marketing then nothing beats having your own blog or website. If you have your own website you can test new marketing tactics in a safe environment.</p> <p>Some of the best digital marketers are self-taught from testing new innovative techniques on their own domain.</p> <p>Networking is also hugely important in person and via social media. There are a variety of free digital marketing events where you can learn lots and meet likeminded people.</p> <p><em>If you want to hear from two of Matt's favourite disruptors, Uber and Airbnb, why not get a ticket for the <a href="http://www.festivalofmarketing.com/welcome?utm_source=econsultancy&amp;utm_medium=blog&amp;utm_campaign=econ%20blog">Festival of Marketing</a> 2016.</em></p> tag:econsultancy.com,2008:Report/3008 2016-09-22T14:30:00+01:00 2016-09-22T14: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/68304 2016-09-19T09:57:09+01:00 2016-09-19T09:57:09+01:00 A day in the life of... VP User Experience at Huge Ben Davis <p>(NB. If you're looking for a new challenge in digital <a href="https://jobs.econsultancy.com/">our jobs board</a> lists hundreds of open positions, and you can benchmark your own digital knowledge using our <a href="https://econsultancy.com/training/digital-skills-index-lite/">Digital Skills Index</a>.)</p> <h3>Please describe your job: What do you do?</h3> <p>I head up the User Experience group at <a href="http://www.hugeinc.com/">Huge</a> in Europe.</p> <p>To put that in context, Huge operates (basically) in 3 areas; strategy, product design, and marketing/communications.</p> <p>My team works very closely with teams across our organization to help define experience strategy; to design user-friendly products and the ecosystems they sit within; and increasingly, to think about how users encounter a brand or a product as they go about their daily lives.  </p> <p>I like to joke with our head of brand planning that his job is to influence perception, while my job is to influence behavior. </p> <p><img src="https://assets.econsultancy.com/images/0007/9296/josh_FINAL.jpg" alt="josh payton" width="615"></p> <h3>Whereabouts do you sit within the organisation? Who do you report to?</h3> <p>Right now—to answer your question very literally— I sit in London, though I’ve also been based out of our Los Angeles and New York offices at different times over the years.</p> <p>I’m part of the European leadership team and I report into our global CCO, Hans Neubert.</p> <p>I’ve also been helping out our team in Singapore quite a bit in recent years as we focus more and more on growing our business in APAC.</p> <h3>What kind of skills do you need to be effective in your role?</h3> <p>The old joke around here is that the better you are as a designer the more you get promoted into roles where you don’t get to design anymore.</p> <p>I’m very aware of that so I make a point of constantly practising the basics; research, design, prototyping, presentation, process, etc. Staying hands-on is incredibly important to being effective.</p> <p>It’s not enough to “stay close to the work,” you’ve got to keep doing it. In this business, if you don’t keep making shit you turn into an irrelevant hack quick. </p> <p>I think the major key, however, is the ability to think laterally.<a href="https://www.wired.com/2014/06/why-the-best-designers-dont-specialize-in-any-one-thing/"> I talk a lot about striving to be a polymath</a> because I think that seeing the big picture and knowing how to execute against it is the most crucial skill. </p> <h3>Tell us about a typical working day… </h3> <p>I start by drinking a lot of coffee and reading. No two days are ever the same, but they all start there. </p> <p>We have clients all over the place, so I travel a lot which means a lot of taxis, airports, train stations, and being in transit. I can sleep just about anywhere almost on command. </p> <p>Most days are filled with a lot of meetings, but I try to spend more of my time being creative than administrative. That sometimes works out.</p> <p>Our office spends a lot of time at the pub. That always works out. </p> <p><em>The Huge website</em></p> <p><img src="https://assets.econsultancy.com/images/0007/9299/Screen_Shot_2016-09-19_at_09.54.11.png" alt="huge inc" width="615" height="320"></p> <h3>What do you love about your job? What sucks?</h3> <p>Variety. I love being challenged with new and different things every day. Variety makes life worth living. </p> <p>I also really love the Huge <a href="https://econsultancy.com/blog/68256-rip-innovation-how-your-company-culture-is-killing-marketing-creativity/">culture</a>. The company has grown up organically so I have friends in every office and there's a lot of opportunity and trust built into the organization. That’s a unique and special thing you don't find in many places. </p> <p>Being a manager sucks. This industry needs leaders, not managers. You need managers at McDonald's.</p> <p>Any creative person who needs to be actively managed is probably more of a liability than an asset. Management is a necessary requirement of my job, but I don't relish it.</p> <h3>What kind of goals do you have? What are the most useful metrics and KPIs for measuring success? </h3> <p>Every client engagement has different metrics and KPIs depending on what their goals and objectives are. That’s first line stuff; improve conversion, improve engagement, whatever.</p> <p>Personally my goals are all around growth; personal growth, the growth of the business, and the growth of the teams I oversee.</p> <p>A couple of years ago, I helped set the curriculum for <a href="http://www.hugeinc.com/schools">Huge Schools</a>, a ten week intensive training program that currently runs out of Huge’s Brooklyn office.</p> <p>Four people on my team in London graduated from the school and now they’re among the best designers in the company—That’s success. </p> <p>I want to do work that influences the industry. I want to do work that impacts the world. Ultimately I think the most useful metric for measuring success is whether or not you think your life is rewarding. If you don’t like your job, quit.</p> <h3>What are your favourite tools to help you to get the job done?</h3> <p>I’m going to <a href="http://bradfrost.com/blog/post/i-have-no-idea-what-the-hell-i-am-doing/">plagiarise Brad Frost</a> on this one:</p> <p>“Great minds discuss principles. Average minds discuss technologies. Small minds discuss tools.”</p> <p>Tools are a means to an end. As long as the work’s good, I really don’t care how it got done because no user is going to care either.</p> <p>That said, I’m a big fan of <a href="http://gulpjs.com">Gulp</a>, I’m a staunch advocate of Tripit, and I use Evernote and Google Drive religiously. </p> <h3>How did you get started in the digital industry, and where might you go from here?</h3> <p>I grew up in Seattle and as a kid I was obsessed with <a href="https://en.wikipedia.org/wiki/Practical_effect">practical effects</a> and pop art.</p> <p>As a teenager I was really involved in the punk scene—I ran a message board, built websites for bands, that kind of thing. I went to college for graphic design and illustration and found myself in the late 90s as a designer in Seattle who knew how to code.</p> <p>I got swept up in the original dotcom boom and have been in the digital industry ever since. I’ll probably go on to build my own product at some point, but who knows? Predicting the future has a way of making you look dumb. </p> <h3>Which brands do you think are doing digital well?</h3> <p>The native ones, obviously; Google, Apple, Uber, etc.  </p> <p>I’m particularly impressed by, and a big fan of Netflix. I’m probably more amused than I should be by the fact that they started out sending DVDs through the mail.</p> <p>They’re pushing innovation, they’re <a href="http://fortune.com/2016/06/15/netflix-net-neutrality/">on the right side of influencing government policy</a>, and they consistently nail user experience. <a href="http://www.theatlantic.com/technology/archive/2014/01/how-netflix-reverse-engineered-hollywood/282679/">Shouts to Todd Yellin</a>.</p> <p>In terms of non-native “brands” I’d have to go with the UK Government.</p> <p>Everyone knows government is a nightmare of slow moving bureaucracy and restrictive red-tape. The fact that <a href="https://econsultancy.com/blog/65774-gov-uk-the-government-s-website-is-better-than-yours/">Government Digital Service</a> is as good as they are against that backdrop is unbelievable.  </p> <h3>Do you have any advice for people who want to work in the digital industry?</h3> <p>When you’re starting out, what you learn is more important than what you earn.</p> <p>Producing great work is more important than being in charge. It’s a lot easier to bullshit your way up than it is to bullshit your way down.</p> <p>All charlatans get exposed eventually. Work hard and be nice to people. The world is getting smaller every day.</p> tag:econsultancy.com,2008:BlogPost/68229 2016-09-08T10:52:00+01:00 2016-09-08T10:52:00+01:00 How Casper uses clever marketing & content to sell mattresses Nikki Gilliland <p><a href="http://www.huffingtonpost.co.uk/2016/01/26/half-of-women-in-uk-sleep-deprived_n_9076030.html" target="_blank">46% of women</a> and 36% of men suffer from lack of sleep, so it’s a huge problem for many.</p> <p>Tapping into the selling power of a solid eight hours, mattress startup Casper has built a reputation for capturing consumer interest through its quirky <a href="https://econsultancy.com/training/courses/topics/content-marketing-and-strategy">content marketing</a> and unique business model.</p> <p>Having recently launched its ecommerce site in the UK, here’s a look at why it’s one company worth keeping an eye on.</p> <h3>The Goldilocks of mattress brands</h3> <p>Do you want a bed that’s soft, firm or somewhere in between?</p> <p>Buying a mattress is traditionally a try-it-and-see shopping experience, but Casper disrupts this by selling just a single ‘universally comfortable’ model. </p> <p>With studies showing that <a href="https://www.theguardian.com/lifeandstyle/2015/oct/21/choice-stressing-us-out-dating-partners-monopolies" target="_blank">too much choice leads to more stress</a> and less satisfaction, this might prove to be preferable for consumers.</p> <p>Casper also draws in its audience with a focus on convenience and value for money.</p> <p>As well as shipping and delivering its mattress in a special vacuum-packed box, it offers a tempting 100-day trial and free returns. </p> <p><img src="https://assets.econsultancy.com/images/0007/8450/Caspar_dream_team.JPG" alt="" width="750" height="709"></p> <p>By recognising the fact that purchasing a bed is a rare and drawn-out experience, and deliberately disrupting it, Casper’s business model could prove to be a game-changer.</p> <p>Of course, the question is - will consumers be willing to take a leap of faith over the boring but fail-safe in-store experience?</p> <h3>Dedicated to the subject of sleep</h3> <p>Both the copy and design on Casper's website is beautifully engaging.  </p> <p><img src="https://assets.econsultancy.com/images/0007/8445/Caspar_customers.JPG" alt="" width="750" height="728"></p> <p>It attracts consumers with a friendly, conversational and reassuring <a href="https://econsultancy.com/blog/67434-four-brands-with-a-brilliantly-funny-tone-of-voice/" target="_blank">tone of voice</a> – but it’s not the only way Casper utilises copy. </p> <p>It has two blogs – both designed to entertain and retain customers.</p> <p>The first, <a href="http://blog.casper.com/" target="_blank">Pillow Talk</a>, is a tongue-in-cheek take on everything bed-related.</p> <p>From ‘The cutest Casper sleepers’ to ‘Eight reasons why this blog post is trying to sell you a mattress’, it is a reflection of the brand’s fun and offbeat personality.</p> <p><img src="https://assets.econsultancy.com/images/0007/8451/Casper_blog.JPG" alt="" width="750" height="691"></p> <p>The second, <a href="http://vanwinkles.com/" target="_blank">Van Winkle’s</a>, is an independent publication that’s dedicated to all things sleep-related.</p> <p>Using sleep as a vertical much like health or lifestyle, Casper's content team writes about the subject in a more informative and authoritative fashion. </p> <p><img src="https://assets.econsultancy.com/images/0007/8447/van_winkles.JPG" alt="" width="780" height="554"></p> <p>The aim of Van Winkle does not appear to directly promote or sell Casper mattresses (the brand is absent apart from a couple of links at the bottom of the homepage) - instead, it looks to be an extension of the brand as a lifestyle.</p> <p>With syndication on the likes of Huffington Post, articles have previously garnered huge traffic.</p> <p>By adding to the conversation about sleep and getting consumers interested in the topic in general, it could still be a way to increase awareness.</p> <h3>Your mate on social media</h3> <p>Alongside its editorial offering, Casper also wins the hearts of its millennial audience on social. </p> <p>Often tweeting customers using GIFs and emojis, it is unafraid to take the informal style of its main ecommerce site and ramp it up a notch.  </p> <blockquote class="twitter-tweet"> <p lang="und" dir="ltr"><a href="https://twitter.com/yohugogo">@yohugogo</a> <a href="https://t.co/l5IXivIbep">pic.twitter.com/l5IXivIbep</a></p> — Casper (@Casper) <a href="https://twitter.com/Casper/status/768458011048312833">August 24, 2016</a> </blockquote> <p>Its subject matter is often samey – with jokes about breakfast, naps and the daily struggle of first world problems.</p> <p>Yet, it is chatty and consistent, which also gives the impression that it’s actually there to help.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">Everyone should be asking the important questions.</p> <p>Why isn't today Friday?</p> — Casper (@Casper) <a href="https://twitter.com/Casper/status/768825307860180992">August 25, 2016</a> </blockquote> <h3>Taps into trends</h3> <p>Unboxing videos are a <a href="https://econsultancy.com/blog/66678-how-the-top-five-uk-ecommerce-brands-use-youtube/" target="_blank">YouTube genre</a> usually reserved for high-tech gadgets and luxury beauty items.</p> <p>Thanks to Casper, there’s been a new trend of people filming themselves opening their packaged mattresses.</p> <p>There are countless videos online, and yes, it is as baffling as it sounds. While it’s probably quite satisfying to see a mattress spring into shape in real life, watching others do it is less thrilling.</p> <p>For Casper however, each video serves as brilliant advertising, and reinforced the vacuum-packed convenience of its USP.</p> <p><iframe src="https://www.youtube.com/embed/AD9lg11Yyv8?wmode=transparent" width="854" height="480"></iframe></p> <h3>Innovative but consistent</h3> <p><a href="http://www.forbes.com/sites/stevenbertoni/2016/04/04/how-start-up-casper-plans-to-wake-up-the-sleepy-mattress-market/#751a2cb12892" target="_blank">Describing its aim to be Nike of the sleep world,</a> Casper is unashamed in its desire to ramp up its product offering.</p> <p>With its ranges for pillows and sheets, it’s already selling more than just mattresses.</p> <p>In hopes of targeting an entirely new market, it’s also just released a dog-bed in the US.</p> <p><img src="https://assets.econsultancy.com/images/0007/8448/casper_dog.JPG" alt="" width="615" height="691"></p> <p>It remains to be seen whether these extra lines will be as successful as its main product, however it shows that Casper isn’t afraid to experiment.</p> <p>What's more, it also reflects the brand’s consistent dedication to sleep – regardless of the species.</p> <p><img src="https://assets.econsultancy.com/images/0007/8449/casper_insta.JPG" alt="" width="750" height="509"></p> <p>Across the board, consistency is one thing that Casper does really well.</p> <p>From Twitter to email, it manages to convey a consistent identity across all consumer touchpoints.</p> <p>Whether you’re in the market for a new mattress or not – there’s a lot to appreciate here.</p> tag:econsultancy.com,2008:BlogPost/68226 2016-09-07T11:27:39+01:00 2016-09-07T11:27:39+01:00 23 mobile UX mistakes that Google doesn't like Ben Davis <p>The information is taken from a variety of Google resources and includes both factors that Google has explicitly stated could be detrimental to search performance, and other factors for which the same could be implied (e.g. from Google's developer guides).</p> <p>Of course, many factors are used to judge page quality and ultimately if Google judges a page to have the best quality content, it may survive these UX errors.</p> <p>So, on we go...</p> <h3>1. Slow-loading pages</h3> <p>For some time, speed has been acknowledged as crucial for mobile search performance, with Google providing its Mobile-Friendly Test and PageSpeed Insights tool to help developers understand where they can improve.</p> <p>Minifying code, <a href="https://developers.google.com/web/fundamentals/design-and-ui/media/images/optimize-images-for-performance?hl=en">reducing image weight</a> and asyncronously loading Javascript are all common suggestions for reducing load time of pages.</p> <p>Of course, Google's <a href="https://econsultancy.com/blog/67567-four-things-you-need-to-know-about-google-accelerated-mobile-pages-amp/">Accelerated Mobile Pages</a> (AMP) project is the latest innovation designed to reduce load times even further. In May of this year, <a href="http://searchengineland.com/google-amp-reached-125-million-documents-expanding-apps-recipe-sites-250059">it was reported</a> that 125m+ documents had been indexed, across 640,000+ domains.</p> <p>Adoption of AMP is increasing rapidly though 2016 among publishers, and is now starting to spread to ecommerce.</p> <p>Whilst trackable buttons and other featues haven't yet been mastered within the format, <a href="http://www.ebaytechblog.com/2016/06/30/browse-ebay-with-style-and-speed/">eBay is making progress</a>, with 8m browse nodes currently live.</p> <p>Eventually, the pureplay retailer wants to use AMP to help improve its site search functionality, as well as interactive elements.</p> <p><em>An AMP eBay browse page.</em></p> <p><img src="https://assets.econsultancy.com/images/0007/8524/Screen_Shot_2016-08-29_at_19.29.39.png" alt="ebay amp page" width="400"></p> <p>The benefits of AMP can be seen in the numbers.</p> <p>John Shehata of Searchmetrics told Search Engine Land that amongst his clients "AMP is about 5% of total traffic (9% of total mobile traffic), 3% of total impressions, +2% in CTR and +5.6% in ranking position.”</p> <h3>2. Large popups</h3> <p>Google has made <a href="http://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html">its position on mobile interstitials</a> clear. As of January 2017, sites 'where content is not easily accessible to a user on the transition from the mobile search results may not rank as highly.'</p> <p>Popups are one such example of this content. Google defines them thus:</p> <blockquote> <p>Showing a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.</p> </blockquote> <p>In the blog post announcing its position, Google states that banners will be deemed permissible providing they 'use a reasonable amount of screen space and are easily dismissible' - app install banners for example.</p> <h3>3. Standalone interstitials</h3> <p>In the same blog post, Google also cites 'standalone interstitials that the user has to dismiss before accessing the main content.'</p> <p>The illustration below shows how these interstitials typically appear.</p> <p>Again, there are exceptions - legal obligations (such as cookie consent) or login dialogues (for private content) often necessitate an interstitial.</p> <p><img src="https://assets.econsultancy.com/images/0007/8543/Screen_Shot_2016-08-26_at_09.56.40.png" alt="interstitials" width="550"></p> <h3>4. Main content below the fold</h3> <p>Not an interstitial per se, but the use of a layout which relegates the main content below the fold is also a no-no.</p> <p>This is often designed for the same purpose as an interstitial, to encourage signup for something ahead of the main website proposition.</p> <h3>5. Low ratio of main content to supplementary content</h3> <p>Sticking to the subject of so-called 'main content', we can refer to <a href="https://econsultancy.com/blog/67412-12-practical-content-tips-from-google-s-page-quality-guidelines/">Google's Quality Rater Guidelines</a> for some general advice on sensible web page layout.</p> <p>Google's guidelines use the analogy of a bad student, who may fill their work with distracting pictures, in order to disguise its lack of content.</p> <p>Similarly, having an appropriate ratio of main content to supplementary content to ads is important for web pages to be seen as high quality.</p> <h3>6. Video elements overflowing their containers</h3> <p>Video dimensions can be controlled with JavaScript or CSS.</p> <p>Element size dependent on viewport dimensions can be specified in CSS, with 'max-width: 100%' ensuring no overflow.</p> <p>If video elements do overflow their containers, users won't be able to see all of the video.</p> <h3>7. Waffle</h3> <p>Text on web and mobile in particular should be goal-oriented, <a href="https://econsultancy.com/blog/66120-12-handy-tips-for-writing-better-web-copy/">should get to the point</a> and be written in the active voice.</p> <p>In addition, imagery can often be used to increase readability.</p> <p><a href="https://econsultancy.com/blog/66833-is-user-experience-important-for-a-higher-google-ranking/">A Searchmetrics study</a> from 2015 reported websites that rank in the top 30 use around 25% more images in their landing pages than in 2014.</p> <p><img src="https://assets.econsultancy.com/images/resized/0006/6311/ux_images-blog-flyer.png" alt="images and ranking" width="470" height="266"></p> <h3>8. Long and complicated menus</h3> <p>Keep them short and sweet is <a href="https://developers.google.com/web/fundamentals/getting-started/principles/site-and-page-navigation?hl=en">Google's developer advice</a> for mobile.</p> <p>Using as few options as will make navigation quick and easy.</p> <h3>9. No easy route back to homepage</h3> <p>A long-standing convention of web design is a logo in the top left that links back to the homepage.</p> <p>Without this, mobile users in particular will be frustrated.</p> <h3>10. Site search tucked away</h3> <p>Yet more advice from Google's mobile developers fundamentals.</p> <p>Site search, especially in ecommerce, is always visible on desktop homepages. </p> <p>On mobile, site search may be even more important, as smaller screen real-estate means navigation can involve more clicks, scrolling and page loads, which users will seek to avoid with site search.</p> <p>Therefore, site search should be visible on the mobile homepage, not located within a menu.</p> <h3>11. Unhelpful site search</h3> <p>Once users have located the site search function, it should provide them with <a href="https://econsultancy.com/blog/66658-24-best-practice-tips-for-ecommerce-site-search/">relevant search results</a>.</p> <p>Autocomplete, spelling correction and intelligent suggestions (as illustrated by Google below) are all advantageous.</p> <p><img src="https://assets.econsultancy.com/images/0007/8545/Screen_Shot_2016-08-30_at_10.01.33.png" alt="site search" width="615" height="505"></p> <h3>12. Hidden content</h3> <p><a href="https://econsultancy.com/blog/64823-the-five-golden-rules-of-responsive-web-design/">Responsive design</a> should not lead to completely hidden content.</p> <p>Users should be able to find your content, even if it is deemed low priority on mobile.</p> <h3>13. Launching new windows</h3> <p>Flitting between mobile browser windows isn't something that all mobile users are comfortable with.</p> <p>Launching new windows should be avoided where possible. </p> <h3>14. Lack of filters</h3> <p><a href="https://econsultancy.com/blog/68222-ecommerce-product-filters-best-practice-tips-for-a-great-ux/">Filters are needed</a>, not just in ecommerce, to help mobile users refine results and speed navigation.</p> <p>Other UX features can improve filters, such as numbers to show how many products/articles (etc.) each filter will return.</p> <h3>15. Upfront registration required</h3> <p>Being forced to register at checkout, instead of being allowed to <a href="https://econsultancy.com/blog/65457-be-our-guest-a-guide-to-ecommerce-guest-checkout-best-practice/">continue as a guest</a>, is even more annoying on mobile than desktop.</p> <p>Offering guest checkouts the chance to register at the end of their purchase may increase conversion.</p> <h3>17. Incorrect input types</h3> <p style="font-weight: normal;">On the subject of forms, Google has a handy guide to <a href="https://developers.google.com/web/fundamentals/design-and-ui/input/forms/choose-the-best-input-type">HTML5 input types</a>.</p> <p style="font-weight: normal;">Getting these wrong causes unnecessary extra clicks for users.</p> <p style="font-weight: normal;"><em>The email input type, with its easy-to-access @ key.</em></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0007/8552/email.png" alt="email input" width="450" height="338"></p> <p style="font-weight: normal;">Other boons for the user when filling out forms include real-time validation, letting you know if an error occurs before submitting and committing to a page load.</p> <h3>17. Repeated form interactions</h3> <p>Auto-fill is perhaps the most blessed UX feature of all. The relief a user feels when they only have to enter certain information once, then see it pulled through to other parts of the form is palpable.</p> <p>Amazon exemplifies a retailer committed to minimising repeated interaction.</p> <h3>18. Difficulty sharing</h3> <p>Copying and pasting URLs, then sending emails or composing social posts is a lengthier process on mobile compared with desktop.</p> <p>Therefore, websites should make use of share and email buttons. Ecommerce, for example, will find this encourages word of mouth online. </p> <h3>19. Faulty redirects</h3> <p>If you have a mobile website using different URLs to desktop, there should be accurate redirects in place.</p> <p>For example, when a user clicks a desktop link in an email on their phone, they should be redirected to the correct mobile URL.</p> <p>If a redirect is faulty and serves the homepage, for example, this is a particularly frustrating experience.</p> <h3>20 &amp; 21. Zooming and mis-tapping</h3> <p><a href="https://webmasters.googleblog.com/2014/11/helping-users-find-mobile-friendly-pages.html">In November 2014</a>, Google introduced a 'mobile friendly' label into mobile search results, to 'help users find pages where the text and content was readable without zooming and the tap targets were appropriately spaced'.</p> <p>This label has recently been removed from mobile search results, as Google has announced that 85% of all pages in the mobile search results now meet this criteria.</p> <p>However, the other 15% will be acutely aware that until they implement a mobile optimised or responsive design, search performance will suffer.</p> <h3>22. Unfriendly software</h3> <p>Some content will be unviewable on mobile. Flash is the most oft-cited software, as it is not broadly supported on mobile.</p> <h3>23. Typos and bad grammar </h3> <p>Though this is a general complaint, not specific to mobile, it is one which Google's Quality Rater guidelines highlight.</p> <p>That means poor editing could be a contributing factor to poor search performance.</p> <p><em>That's enough to get the list started. What other UX bugbears do you have on mobile?</em></p> tag:econsultancy.com,2008:TrainingDate/3084 2016-09-06T12:24:54+01:00 2016-09-06T12:24:54+01:00 Usability and Persuasion in E-commerce <p>Usability and persuasion techniques are proven to increase e-commerce conversion rates. From search and navigation through to product pages, shopping bag and checkout, this course will arm you with a wealth of insights that you can begin using on your own e-commerce customer experience.</p> tag:econsultancy.com,2008:BlogPost/68235 2016-08-31T11:39:44+01:00 2016-08-31T11:39:44+01:00 A closer look at the National Trust's content strategy Nikki Gilliland <p>But how exactly did the organisation manage such a big overhaul of its content? </p> <p>We recently sat down with Tom Barker, Head of Digital for the National Trust, to hear how his team planned and executed <a href="https://econsultancy.com/training/courses/digital-content-strategy/">a winning content strategy</a>.</p> <p>You can read a summary of what he said below, or watch these videos to see what he said in full.</p> <p><iframe src="https://www.youtube.com/embed/fiN494itqa0?list=PL1-kPkZBw50G5af50RWyZQktGWjOkGxLI&amp;wmode=transparent" width="854" height="480"></iframe></p> <p><iframe src="https://www.youtube.com/embed/IAz4146xkO4?list=PL1-kPkZBw50G5af50RWyZQktGWjOkGxLI&amp;wmode=transparent" width="854" height="480"></iframe></p> <h3>Out with the old</h3> <p>The National Trust’s new website launched in November of 2015, but involved months of planning and preparation prior to this.</p> <p>With an old and clunky website consisting of around 50,000 pages, the challenge was finding a way to condense such a large volume of information into a concise and user-friendly amount. </p> <p>Even after stripping out a large portion of the old site, it re-launched with the hefty sum of 9,000 pages. </p> <blockquote> <p>If you think not just about our national cause and the various elements of membership and fundraising, but the sheer number of places we have.</p> <p>So, that’s over 350 properties, 200 more major pieces of outdoor landscape and coastline... it becomes a huge website with lots of content.</p> </blockquote> <h3>Updating the new site</h3> <p>As well as the amount that needed to be included, Tom highlights how the seasonal nature of the Trust requires content to be continuously updated and refreshed. </p> <p>For the launch of its new site, 500 National Trust employees were trained on the content management system to ensure that content would be ready by launch day, as well as updated according to seasonal calendars. </p> <blockquote> <p>We have a distributed marketing model, so for each of the seven regions that the National Trust covers we have a regional digital lead, but also web editors at each of the properties and places.</p> </blockquote> <p>With news featuring heavily on the site, it is imperative that staff are able to update at a property-level as quickly and seamlessly as possible.</p> <h3>How success is measured</h3> <p>With a brand new site, the National Trust now has a far superior analytics set-up. However, despite knowing how it is being used, it is yet to discover who is using it. </p> <p>A new sign-in capability will be added later in the year, and is going to be a big focus in future.</p> <blockquote> <p>Success for me, yes it could be the traditional metrics such as visits to the site and bounce rate etc.</p> <p>But when we are able to see who is using it, we can determine whether the touchpoints match up, which means no longer means having a website or mobile app that exists in silo.</p> </blockquote> <p>For the National Trust, a seamless user experience across all channels is the ultimate sign of success. </p> tag:econsultancy.com,2008:BlogPost/68222 2016-08-30T10:34:00+01:00 2016-08-30T10:34:00+01:00 Ecommerce product filters: Best practice tips for a great UX Greg Randall <p>There are best practice guidelines to the use of filters that retailers should consider following. This is the purpose of this article.  </p> <p>It will address issues and present the best methods to construct filter behaviour in the context of enhancing online experiences. </p> <p>Due to the size of this topic which must span the various screen sizes, this article only focuses on desktop screens (and makes some references to tablet screens).</p> <p>For retailers who have large product ranges, filters are an essential part of improving online experiences.  </p> <p>If retailers can present and treat filters in the right manner, it enables consumers to quickly refine a large product range by the product attributes he/she deems important and aligned to his/her intent.  </p> <p>Some would call this act of<strong> empowering consumers with the means to manipulate content by their own hand, a personalised experience.</strong></p> <p>In order for filters to add value to a consumer’s journey, there are a core set of “filtering characteristics” to consider:   </p> <ol> <li> <strong>Filter placement:</strong> Where should filters be located on a page?</li> <li> <strong>Presenting relevant filters by product range:</strong> Different products with different attributes demand different filter options.</li> <li> <strong>Presenting the filtering options:</strong> How should a long list of filter options display as a default? </li> <li> <strong>Visually validating selected filters:</strong> When consumers select a filter, how should this be presented to provide consumers the confidence the site has reacted to this request?</li> </ol> <p>This narrative is based on the assumption that the integrity of a retailer’s product master data is to a high standard.  </p> <p>If not, this becomes the first challenge the business must overcome.  </p> <p>Some recommendations in this article are reliant on this business function.</p> <h3>Filter Placement </h3> <p><a href="https://www.nngroup.com/articles/horizontal-attention-leans-left/" target="_blank">NN Group’s eye-tracking study back in 2010</a> found 69% of consumers spend most of their time focusing on the left hand side of the page.</p> <p>There is no shortage of examples of well-known retailers placing their filters on the left hand side of the page, one of which is ASOS:</p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/resized/0007/8402/asos_filter-blog-flyer.png" alt="asos" width="470" height="516"></p> <p>From the perspective of filter placement on a page, most retailers are doing a great job.  </p> <p>This is the easy part done. </p> <h3>Presenting relevant filters by product range</h3> <p>Filters have the potential to become an enabling ingredient for consumers to shop in their own individualised way based on their unique personal needs and preferences.  </p> <p>For retailers to make the most of this opportunity there is a need to deliver relevant and unique filtering options for each category.  </p> <p>This requires retailers to have a good understanding of how consumers want to buy from them. There is an increased need for <a href="http://www.fastcompany.com/3052337/why-genuine-empathy-is-good-for-business">consumer empathy.</a>  </p> <p>One good example of relevant filtering per category is Sephora which has provided a number of different refinement options for consumers interested in Moisturisers.</p> <p>Within the Sephora Moisturiser category consumers can filter by:</p> <ol> <li>A consumer’s age (something consumers might not be comfortable discussing in a physical retail setting).</li> <li>Brand.</li> <li>Concerns (another topic some consumers might not be comfortable discussing).</li> <li>Ingredient preferences.</li> <li>Size of the product (travel vs value). Some consumers may want this product to remain in their purse/handbag while others may want to purchase something larger to save money.</li> <li>Skin type.</li> <li>Sun protection.</li> <li>Price Range.</li> </ol> <p>Notice how <a href="https://assets.econsultancy.com/images/0007/8404/sephora_moisturiser_filter.png">price range is the last of the filters in presentation</a>. This is done intentionally.  </p> <p>If the consumer finds a product perfectly matching her needs, does price matter?</p> <p>Though there are over 450 moisturiser products to choose from, but with the comprehensive filter options on offer this range could grow in size and consumers would still have a good experience. </p> <h3>The Presentation of Filters </h3> <p>The majority of retailers <a href="https://www.smashingmagazine.com/2015/04/the-current-state-of-e-commerce-filtering/" target="_blank">present filters in four different ways</a>.  </p> <p>They are: </p> <ol> <li>Displaying all filters at once.</li> <li>Applying scrolling capability within each filter type.</li> <li>Presenting filter titles with no filter options to select.</li> <li>Truncate filters (abbreviate the presentation by displaying a sub set of the filters and provide a “See more” or “See all” hyperlink to present all other filter options).</li> </ol> <h3>Displaying All Filters</h3> <p>When displaying all filters the list becomes too busy for the consumer’s eye, making it difficult to identify and absorb all options presented. </p> <p>An example of this in action is Gamestop.com.</p> <p>While the filters are styled blue to indicate they are hyperlinks, the list is long, the font is small and the spacing is tight.  </p> <p>This style of filter presentation also makes for difficult finger targets when this is translated to tablet screens.</p> <p><em>Click to see the full list of filters</em></p> <p><a href="https://assets.econsultancy.com/images/0007/8405/gamestop.png"><img src="https://assets.econsultancy.com/images/0007/8492/gamestop_small.png" alt="" width="179" height="395"></a></p> <h3>Apply scrolling capability for filters </h3> <p>A good example of filters with scrolling capability is found at Sephora.com.</p> <p><em>Click to see the full list of filters</em></p> <p><a href="https://assets.econsultancy.com/images/0007/8404/sephora_moisturiser_filter.png"><img src="https://assets.econsultancy.com/images/0007/8494/sephora_moisturiser.png" alt="" width="179"></a></p> <p>The issue with this approach is the scroll bar itself.  </p> <p><a href="https://www.smashingmagazine.com/2015/04/the-current-state-of-e-commerce-filtering/" target="_blank">Usability research completed</a> on this type of filter presentation found the following issues:</p> <ol> <li>The fixed height of the filter frame will only ever present four to five options for selection.</li> <li>Small finger target on tablet screens.</li> <li>“Scroll Hi-jacking”. This is a term used to describe the consumer’s need to be <a href="https://www.smasbhingmagazine.com/2015/04/the-current-state-of-e-commerce-filtering/" target="_blank">constantly aware of his/her mouse</a> when using the scroll bars. </li> <li>Slow page load speed.  </li> </ol> <h3>Only presenting filter titles </h3> <p>Presenting only filter titles and not showing any options may sound like a good idea for retailers with many filter types, but it comes with issues.  </p> <p>For example, Staples.com does this across its entire site, below is what you see when you select the Laser Printer sub category. </p> <p><img src="https://assets.econsultancy.com/images/0007/8495/staples_filter.png" alt="" width="179"></p> <p>The issues with this approach:</p> <ol> <li>Sometimes the naming of the filter may not be intuitive and the filter options help to explain what it means. </li> <li>The display of filters can prompt consumers to make a selection.</li> <li>Hiding filter types increases the <a href="https://www.nngroup.com/articles/interaction-cost-definition/" target="_blank">physical effort</a> of a consumer in making a selection (more clicking is required).   </li> </ol> <h3>Truncating filters</h3> <p>“Truncating filters” is a fancy term for partially displaying a selection of filtering options for each filter type with a clear “See/Show More” hyperlink prompting that action if necessary.  </p> <p>This filter presentation option has the most benefits, but there are conditions to this approach in order for it to be effective.</p> <ol> <li>Retailers will know what brands are the most popular and should display these first. Once a user selects “See More” the list of filters would then present in alphabetical order.</li> <li>“See More” or “See All” hyperlinks are clear and obvious.</li> <li>In order to manage interaction cost there needs to be clear and obvious visual cues so users know their filter selection has been honoured. It is also important to present intuitive methods to deselect filters.  </li> </ol> <p>Macy’s has the right idea by providing visual cues to the selected filters, and repeats the selected filters at the top of the page.</p> <p><img src="https://assets.econsultancy.com/images/0007/8500/macys_filter_large.png" alt="" width="750" height="996"></p> <p>One of the better examples of visual filter validation in action is Newegg.com.  </p> <p>The selected filters are repeated and presented at the top of the page, they are visually strong, and simple to deselect.  </p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/resized/0007/8411/new_egg_filter-blog-flyer.png" alt="" width="470" height="294"> </p> <h3>The end...</h3> <p>That wraps up our quick tour of filters on desktop.  </p> <p>I hope you enjoyed reading this article as much as I enjoyed creating it!</p>