tag:econsultancy.com,2008:/topics/user-experience-and-usability Latest User Experience and Usability content from Econsultancy 2016-08-31T11:39:44+01:00 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> tag:econsultancy.com,2008:BlogPost/68197 2016-08-24T09:57:53+01:00 2016-08-24T09:57:53+01:00 Which restaurants deliver the best mobile web UX? Nikki Gilliland <p>A mobile-optimised site will go a long way to helping get customers through the door. </p> <p>In fact, research shows that nearly <a href="http://www.xad.com/press-releases/80-percent-of-uk-mobile-restaurant-searchers-make-a-purchase-most-within-the-day-says-xadtelmetrics-2013-u-k-mobile-path-to-purchase-study/">80% of mobile searches for UK restaurants result in a booking</a>.</p> <p>Of course, mere optimisation is not always enough. There are four extra features which combine to greatly improve the user experience. </p> <ul> <li>Online menu (no pesky PDF's).</li> <li>Location-based services.</li> <li>Ability to book a table.</li> <li>Opening times and click to call.</li> </ul> <p>Here are some examples that deliver!</p> <h3>Online menu</h3> <h4>Nandos</h4> <p>We all know what’s on the Nandos menu, right? We don't even need to look before ordering.</p> <p>However, one thing that’s really great about the mobile site is that – as well as a handy spice-meter – it allows the user to calculate the nutritional value of a meal.</p> <p>A feature that’s likely to be ignored by the masses, but it’s a lovely little touch for anyone on a diet and still in the mood for a cheeky bit of chicken.</p> <p><img src="https://assets.econsultancy.com/images/0007/8100/nandos_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8101/nandos_3.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8103/nandos_4.PNG" alt="" width="200" height="355"></p> <h4>Wagamama</h4> <p>There’s a vast amount of choice, but with its easy-to-navigate and in-depth mobile menu, Wagamama hopes to reduce the amount of time diners spend deciding at the table.</p> <p>A short synopsis explains each meal and a handy side-bar means users can easily switch between categories.</p> <p><img src="https://assets.econsultancy.com/images/0007/8104/Wagamama.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8105/Wagamama_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8106/wagamama_3.PNG" alt="" width="200" height="355"></p> <h4>Jamie’s Italian</h4> <p>It’s easy to dismiss the 40-strong Jamie's Italian as yet another chain, but its mobile site reflects its focus on delivering transparency to the customer.</p> <p>There is a lot of information about nutrition, allergens and even gluten-free eating, and the comprehensive menu conveniently includes a filter to select vegan and healthy options.</p> <p><img src="https://assets.econsultancy.com/images/0007/8115/jamies.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8117/jamies_3.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8116/jamies_2.PNG" alt="" width="200" height="355"></p> <h3>Location-based services</h3> <h4>Homeslice</h4> <p>A restaurant address is all well and good, but any decent mobile site will have a location-based service.</p> <p>Homeslice cleverly uses copy to point the user’s attention towards its onsite map. Even better, it’s ‘take me there’ button opens up Google Maps.</p> <p><img src="https://assets.econsultancy.com/images/0007/8123/homeslice.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8124/homeslice__2_.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8125/homeslice_3.PNG" alt="" width="200" height="355"></p> <h4>Dirty Burger</h4> <p>With eleven restaurants in London alone, Dirty Burger’s website it designed around locations. </p> <p>Clicking onto each one, the user is met with contextual copy and an integrated Google Map.</p> <p>The only feature that’s missing is to be able to click out to the app itself, however the added convenience of Deliveroo integration means that it's slightly forgiven.</p> <p><img src="https://assets.econsultancy.com/images/0007/8126/dirty_brger.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8127/dirty_burger_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8128/burger_deliveroo.PNG" alt="" width="200" height="355"></p> <h4>Social Eating House</h4> <p>With its one-click navigation, Social Eating House is one of the most basic mobile restaurant sites I’ve come across. Yet, all the information is there.</p> <p>The 'location’ tap takes users through to Google Maps with just one click – simple yet very effective.</p> <p> <img src="https://assets.econsultancy.com/images/0007/8110/SEH_1.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8111/SEH_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8112/SEH.PNG" alt="" width="200" height="355"></p> <h3>Ability to book a table</h3> <h4>Pizza Express</h4> <p>Whether you need to actually book at Pizza Express is debatable, however its mobile system is definitely worth a mention here.</p> <p>With its bright and friendly design, it’s super easy to find the desired location.</p> <p>What’s more, it gives the option to book with a MyPizzaExpress account, meaning loyal customers will get extra incentives and offers in future.</p> <p><img src="https://assets.econsultancy.com/images/0007/8129/pizza_express.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8130/pizza_express_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8131/pizza_express_3.PNG" alt="" width="200" height="355"></p> <h4>Spring</h4> <p>It’s unusual to find a high-end restaurant affiliated with a third-party booking system, but I was pleasantly surprised to discover Spring on OpenTable.</p> <p>With its simple and elegant typography, the mobile site is very easy on the eyes, too. Being able to book a table makes it a dream.</p> <p><img src="https://assets.econsultancy.com/images/0007/8132/Spring.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8133/Spring_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8134/Spring_3.PNG" alt="" width="200" height="355"></p> <h4>STK</h4> <p>Most mobile booking systems tend to send you onto the third-party (e.g Bookatable), however STK’s is integrated into its own mobile site.</p> <p>The reason I like this is that it makes the whole experience feel entirely seamless, allowing users to search and book a table without leaving the page.</p> <p>Oh, and the prominent purple 'Book' button is impossible to miss.</p> <h3> <img src="https://assets.econsultancy.com/images/0007/8135/STK.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8136/STK_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8137/STK_3.PNG" alt="" width="200" height="355"> </h3> <h3>Opening times &amp; click to call</h3> <h4>Caravan</h4> <p>Caravan splits its information by two locations - listing both its opening times and contact details on one page.</p> <p>Although the phone number could be made clearer, it is clickable, and its location features are also easy to find here.</p> <p><img src="https://assets.econsultancy.com/images/0007/8139/caravan.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8140/caravan_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8141/caravan_3.PNG" alt="" width="200" height="355"></p> <h4>Wahaca</h4> <p>Another restaurant website that is split into locations, Wahaca's contact details are clear and precise - and pink, of course!</p> <p>In fact, its mobile-site is generally above average across the board.</p> <p><img src="https://assets.econsultancy.com/images/0007/8145/wahaca.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8146/wahaca_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8147/wahaca_3.PNG" alt="" width="200" height="355"></p> <h4>Hubbard and Bell</h4> <p>Finally, Hubbard and Bell is hot on letting its customers know how to get in touch.</p> <p>Even better, it deserves extra points for including a phone number alongside its mobile booking sytem.</p> <p>Wait, calling to reserve a table, in London? Well I never.</p> <p><img src="https://assets.econsultancy.com/images/0007/8149/HB.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8150/HB_2.PNG" alt="" width="200" height="355"> <img src="https://assets.econsultancy.com/images/0007/8151/HB_3.PNG" alt="" width="200" height="355"></p> <p><strong>Food &amp; Drink is one of the sectors covered at the <a href="http://www.festivalofmarketing.com/welcome?utm_source=econsultancy&amp;utm_medium=blog&amp;utm_campaign=econ%20blog" target="_blank">Festival of Marketing 2016</a>, which takes place in London on October 5-6.</strong></p> tag:econsultancy.com,2008:Report/3008 2016-08-24T09:35:00+01:00 2016-08-24T09:35: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/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>