tag:econsultancy.com,2008:/topics/web-design Latest Design content from Econsultancy 2017-04-27T10:54:14+01:00 tag:econsultancy.com,2008:BlogPost/69029 2017-04-27T10:54:14+01:00 2017-04-27T10:54:14+01:00 MealPal review: Are Londoners hungry for a lunch subscription service? Nikki Gilliland <p>I was lucky enough to bag a free trial recently, so what’s a girl to do other than write a review about it? Here’s what I thought of the whole process.  </p> <h4>What does MealPlan offer?</h4> <p>Originally launching in New York City, MealPlan is a lunch subscription service that lets you reserve food at a number of participating restaurants. It offers two plans – both of which last for 30 days – £4.79 per meal for 12 or £4.39 per meal for 20.</p> <p>Either way, it guarantees you will pay less than a fiver each time, along with the promise of your lunch being ready and waiting so you don’t have to queue.</p> <p><img src="https://assets.econsultancy.com/images/0008/5644/Flexible_plans.JPG" alt="" width="760" height="396"></p> <h4>Planning ahead</h4> <p>You can use the service through a dedicated app or via the main website.</p> <p>Once you’ve signed up, you will be instructed to reserve your meal between 5pm and 9:30am for the next day. If you miss this time slot, you’ll have to wait until the ‘kitchen’ is open again the following evening. This could prove mildly annoying for some, but I found it quite enjoyable to plan ahead.</p> <p>It’s also handy if you're someone who finds yourself stuck in a food rut. The participating restaurants are listed in a visually-pleasing map format, which you can then filter by specific location or type of food. This means you might come across places you've never tried before - plus it's actually quite fun to browse and see what everyone's dish of the day will be.</p> <p><img src="https://assets.econsultancy.com/images/0008/5658/IMG_4974.PNG" alt="" width="250"></p> <p>It's important to stress that <strong>there is only one choice of meal from each restaurant</strong>. However, this meal changes on a daily basis, meaning that you still get a decent amount of variety over the course of a week. It also helps facilitate the service in the first place, as it means restaurants can produce a higher volume of meals in a shorter time frame when there is no customisation involved.</p> <p><img src="https://assets.econsultancy.com/images/0008/5659/IMG_4975.PNG" alt="" width="250"></p> <h4>Skipping the queue (and deliberation)</h4> <p>Instead of paying more for delivery, MealPal is hoping that consumers will be drawn in by the prospect of paying less to pick up in person – getting one over on the likes of <a href="https://econsultancy.com/blog/68206-ubereats-vs-deliveroo-a-comparison-of-the-app-user-experience/" target="_blank">Deliveroo and UberEats</a>. Unsurprisingly, it heavily leans on the fact that consumers can skip the queue when they arrive.</p> <p>This is one area I was a little dubious about. It’s London after all – surely those already queuing will be less than pleased about people jumping ahead?</p> <p>Having said that, my experiences have so far been pretty seamless. More often than not, I have spotted other MealPal members politely enquiring at the side of counters and merely followed suit. If the company grows in popularity, however, one problem could be restaurants keeping on top of this demand at the same time as satisfying regular customers. </p> <p>Alongside the no-queue element, if you’re an indecisive sort, you might also enjoy the fact that you don’t have to make a decision on the spot. What's more, it means that you can actually spend more of your lunch break enjoying it rather than waiting around.</p> <p><img src="https://assets.econsultancy.com/images/0008/5660/IMG_4976.PNG" alt="" width="250"></p> <h4>Is it worth it?</h4> <p>I generally found there was no skimping on portion-size with MealPal, meaning you'd definitely be paying more if you ordered as a regular customer. You can also leave feedback on factors such as size and speed after each meal, and the app will learn your preferences over time in order to offer suggestions you might like.</p> <p>Overall, there’s no denying that it’s a viable way to save money for those who buy their lunch every day. Of course, success also depends on whether or not you’re guaranteed to use up all your meals within the time frame.</p> <p>This might put off customers from keeping subscriptions for the long-term, with a lack of freedom and repetitive menus being potential bugbears. Also keep in mind that, although most participating restaurants are littered in the City, Soho and Canary Wharf, there are more in some areas than others.</p> <p>Will I be signing up? I could be persuaded to give it a proper go in future, if cancelling membership is hassle-free. It beats going to Pret seven days a week anyway. </p> <p><strong><em>Related reading:</em></strong></p> <ul> <li><em><a href="https://econsultancy.com/blog/68197-which-restaurants-deliver-the-best-mobile-web-ux/" target="_blank">Which restaurants deliver the best mobile web UX?</a></em></li> <li><em><a href="https://econsultancy.com/blog/64445-why-aren-t-restaurants-taking-advantage-of-mobile-search/" target="_blank">Why aren't restaurants taking advantage of mobile search?</a></em></li> </ul> tag:econsultancy.com,2008:BlogPost/69036 2017-04-27T10:52:19+01:00 2017-04-27T10:52:19+01:00 Six ways Aldo’s new mobile site streamlines the shopping experience Nikki Gilliland <p>Designed to make shopping more seamless across all channels, the mobile site in particular has got customer convenience in mind. Here are six features that deliver on the promise.</p> <h4>Prominent imagery and reviews</h4> <p>One major focus of Aldo’s redesign has been making it easier for mobile users to gain a more detailed view of the product – recognising that even in-store shoppers would like <a href="https://econsultancy.com/blog/9366-ecommerce-consumer-reviews-why-you-need-them-and-how-to-use-them/" target="_blank">customer reviews and ratings</a>.</p> <p>Reviews are now a prominent feature on all product pages, including information about general sizing, calf size and width. It even allows customers to give feedback on where or how they have worn the item – e.g. ‘wear it for prom or party’ – to give reviews much more depth.</p> <p><img src="https://assets.econsultancy.com/images/0008/5715/Product_pages_2.JPG" alt="" width="250"></p> <p>Alongside this, imagery is now at the forefront with photo galleries showcasing products from multiple angles. As well as giving a better view of the product, this also makes the mobile site look much more slick and polished.</p> <p><img src="https://assets.econsultancy.com/images/0008/5716/Product_pages.JPG" alt="" width="250"></p> <h4>Social tie-ins </h4> <p>Today, <a href="http://www.fourthsource.com/social-media/social-media-shopping-next-step-retail-21641" target="_blank">more than half of consumers</a> who follow a brand on social media say they do so to research products and find inspiration. In line with this changing user behaviour, Aldo has introduced user-generated content into its mobile site, with an Instagram feed embedded directly into the homepage.</p> <p>Not only does this draw on the <a href="https://econsultancy.com/blog/68409-four-key-trends-within-the-world-of-influencer-marketing/" target="_blank">power of influencers</a>, but it also helps to drive additional purchases, with the ‘Shop the look’ feature including multiple products in one image.</p> <p><img src="https://assets.econsultancy.com/images/0008/5717/Shop_the_Look.JPG" alt="" width="250"></p> <h4>In-store convenience</h4> <p>Recognising the fact that not everyone who browses online will want to checkout, the ‘Find a Store’ feature lets users locate the product to buy offline.</p> <p>Using geo-locational technology, it is super quick and easy to locate the store that’s nearest to you. With information on store opening times and an indication of how many items are in stock, it’s a highly effective way of driving offline conversions based on mobile interest. </p> <p><img src="https://assets.econsultancy.com/images/0008/5718/Find_a_store_2.JPG" alt="" width="250"></p> <h4>True-Fit technology</h4> <p>In a bid to <a href="https://econsultancy.com/blog/68477-how-six-online-retailers-are-combatting-wrong-size-returns/" target="_blank">reduce returns</a>, Aldo is another retailer to integrate True Fit – technology that helps customers find the right size.</p> <p><img src="https://assets.econsultancy.com/images/0008/5719/TrueFit_2.JPG" alt="" width="250"></p> <p>By asking users the brand and size of a shoe that fits them particularly well, it is then able to tell them whether an item will be true to size, or whether to scale up or down.</p> <p>According to research, 60% of consumers say that they would be willing to provide information like this if it meant they'd be guaranteed the perfect fit first time. When it comes to shopping on mobile in comparison to in person, this reassurance can massively increase the likelihood of a transaction.</p> <p><img src="https://assets.econsultancy.com/images/0008/5720/True_Fit_3.JPG" alt="" width="250"></p> <h4>Post-purchase tracking</h4> <p>Of course, the customer journey does not end after the point of purchase, which is nicely highlighted by Aldo’s easy tracking feature.</p> <p>Instead of hiding it within a help or customer service section, this is located towards the bottom of the landing page, with large font to catch the user’s attention.</p> <p><img src="https://assets.econsultancy.com/images/0008/5721/Easy_tracking.JPG" alt="" width="250"></p> <p>As well as being useful post-purchase, it is also likely to instil confidence in those in the early browsing stages, indicating that the brand is focused on delivering good customer service.</p> <h4>Simplified checkout  </h4> <p>Multiple forms or mandatory sign-ups are likely to increase <a href="https://econsultancy.com/blog/67120-12-ways-to-reduce-basket-abandonment-on-your-ecommerce-site/" target="_blank">basket abandonment rates</a>, and when it comes to mobile, customers have even less time for complicated processes.</p> <p>Aldo’s redesign has simplified this experience, giving users the option for a guest checkout as well as condensing everything into a single page.</p> <p><img src="https://assets.econsultancy.com/images/0008/5722/Checkout_2.JPG" alt="" width="250"></p> <p>Upfront delivery information and returns policies are also helpful for providing reassurance throughout the process, driving customers towards that all-important final purchase.</p> <p><em><strong>Related articles:</strong></em></p> <ul> <li><em><a href="https://econsultancy.com/blog/68465-eight-features-to-appreciate-on-fat-face-s-new-ecommerce-site/">Eight features to appreciate on Fat Face’s new ecommerce site</a></em></li> <li><em><a href="https://econsultancy.com/blog/66644-how-debenhams-site-redesign-led-to-ecommerce-sales-growth/" target="_blank">How Debenhams' site redesign led to ecommerce sales growth</a></em></li> </ul> tag:econsultancy.com,2008:BlogPost/68908 2017-04-05T13:00:00+01:00 2017-04-05T13:00:00+01:00 Website design briefs: Be very careful what you ask for Paul Randall <p dir="ltr">Briefs typically go wrong for a very simple reason: they start off focusing in the wrong place. The list of requirements is usually framed along the lines of ‘We need the website to…’ The ‘we’ in question is, of course, the business commissioning the new site.</p> <p dir="ltr">This is more or less the normal mindset when agencies are briefed about redesigning a website or ecommerce store. It’s also, in my view, completely the wrong focus.</p> <p dir="ltr">And if your project starts off asking for the wrong things don’t be surprised if it doesn’t deliver the ROI you hoped for. It will then take a lot of effort and cost down the line to deliver the performance and conversions you need.</p> <h3 dir="ltr">A clearer way of thinking about your new site</h3> <p dir="ltr">There’s a simple change in the way you think about your new site and how you brief your agency. It’s one that could lead to a much better return on investment.</p> <p dir="ltr">Instead of, <em>‘we need to...’</em>, how about, <em>‘our customers need to...’</em></p> <p dir="ltr">If everything you ask for in your redesign brief is based on what you believe your business needs, where does that leave your customers? Sure, business goals matter. There has to be a clear picture of how your new site fits into your wider business goals. They absolutely should influence the project brief - more than is often the case.</p> <p dir="ltr">Having a clear and common understanding of what results you want the new site to achieve (how many more sales or enquiries, in what areas of your business), will be an improvement on many briefs. But you can, and should, go further.</p> <p dir="ltr">The <a title="UX Project Checklist" href="https://uxchecklist.github.io/" target="_blank">UX Project Checklist</a> is a great place to start looking at all the components you'll need for a successful website.</p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0008/4788/Screen_Shot_2017-03-17_at_11.16.27.png" alt="UX Project Checklist" width="1266" height="613"></p> <h3 dir="ltr">Customers are your business</h3> <p dir="ltr">Your business goals can only be achieved through the <em><strong>behaviour</strong></em> of your customers. So how can it make sense if they are anything less than the focal point of the website project? </p> <p dir="ltr">Think back to the last time you briefed a web agency. How much weight did you put on customers: what they want to do, what they like, what turns them off? Did you have reliable insights into any of these?</p> <p>The big advantage (and challenge) of focusing on customer intent and preferences is that there are no shortcuts. To get to this level of clarity there’s no room for the easy assumptions, generalisations and misplaced optimism that end up in low conversion rates and poor returns. To understand your customers you need structured effort, proper research, data and careful observation.</p> <p dir="ltr">The benefit of this effort is that your new site is designed to deliver the user experience your customers crave - and which you’re currently failing to deliver. And to do this from day one!</p> <h3 dir="ltr">Audience Personas - so what?</h3> <p dir="ltr">You certainly need to go way beyond writing a set of <a href="https://econsultancy.com/blog/66976-are-your-audience-personas-really-helping-to-inform-your-content-strategy/">audience personas</a> and pinning them on the wall to remind the developers who the site is for.</p> <p dir="ltr">You, or your design agency, can learn a surprising amount from your current site before dismissing it completely. There, you have information showing how people move through the site, where they drop off and where they fail to convert. You probably also have onsite search data that might indicate unsatisfied user intent.</p> <p dir="ltr">You can supplement these insights with usability studies to get a deeper level of understanding. Analytics may point out where the problems are, but not why!</p> <p dir="ltr">The start of every new website project should always involve an investigation into the existing site to find the strengths and the weaknesses before starting again from scratch. You have to remember if you alienate your existing customers, there is a higher chance they will leave. Retention isn’t thought of as much as acquisition in new site builds.</p> <p dir="ltr">It could be that you don’t want to start your redesign straight away. You can <a href="https://econsultancy.com/blog/67249-a-beginner-s-guide-to-a-b-testing/">A/B split test</a> enhancements and new landing pages before you incorporate them in your new site. That way you can prove that they really do give users an experience they value.</p> <p dir="ltr">From these insights you can build a clearer picture of the user experience you need to deliver across your site. You’ll have a more meaningful design brief. The brief will be based around creating the user experience that will serve up the business results you need. </p> <h3 dir="ltr">Understand intent</h3> <p dir="ltr">Document, in detail, the journeys that will allow customers to fulfil their intent as quickly and easily as possible. Be clear about how customers will expect to interact with your new site. Specify what they will need to learn or understand along the route to a successful conversion. These are the questions that so often go unasked. Customer fears, uncertainties and doubts are conversion killers!</p> <p dir="ltr">When you think you know the answers you can develop and user test wireframes and prototypes, based on streamlined user journeys. Leave nothing to chance. You’ll then be in a happier position of launching the new site with confidence.</p> <p dir="ltr">You’ll be as sure as you can be that it delivers the best user experience possible - because your customers were in the driving seat from the outset.</p> <h3 dir="ltr">Are you really ready to brief your agency?</h3> <ul> <li>Can you clearly articulate what different users will want to do on your site and how they will travel through your content?</li> <li>Do you know how you need to speak to your customers? Could you say what their favourite film is likely to be, what they read, what TV programmes they like? These questions will tell you a lot about the language and images needed to engage and persuade them.</li> <li>Can you list five things customers most value and most hate about your current site? How do you know?</li> <li>Do you have a clear conversion process and can you quantify how your new site needs to perform at each stage?</li> <li>Can you specify exactly what you will need to measure on your new site (over and above the obvious stuff like bounce rates)?</li> </ul> <p dir="ltr">If all that sounds too difficult there’s always the easy way out: find an agency that doesn’t ask tricky questions and hope for the best.</p> <p dir="ltr"><em><strong>Subcribers can download Econsultancy's <a href="https://econsultancy.com/reports/user-experience-and-interaction-design-for-mobile-and-web/">User Experience and Interaction Design for Mobile &amp; Web</a></strong></em></p> tag:econsultancy.com,2008:BlogPost/68880 2017-03-27T14:06:45+01:00 2017-03-27T14:06:45+01:00 10 of the best digital agency websites Ben Davis <p>Most are from <a href="http://digitalagencies.econsultancy.com/">Econsultancy's Top 100 Agencies 2016 report</a>, which has a UK flavour, but not all of them feature there. Am I an expert? Not really, but I've shown my workings below...</p> <h3>1. Made by Many</h3> <p>Made by Many has an incredibly charming website. The delightfully naive, <a href="https://en.wikipedia.org/wiki/David_Shrigley">Shrigley-esque</a> logo is echoed in much of the typography, and high quality illustrations help to give a warm and integrity-laden feel.</p> <p><a href="https://madebymany.com/"><img src="https://assets.econsultancy.com/images/0008/4793/made_by_many.jpg" alt="made by many" width="800" height="413"></a></p> <p>Here are some of my favourite bits...</p> <p>A blog with lovely illustrations of each author.</p> <p><img src="https://assets.econsultancy.com/images/0008/4794/blog.jpg" alt="made by many blog" width="800" height="413"></p> <p>Big and convincing testimonials, including photos of the client in question.</p> <p><img src="https://assets.econsultancy.com/images/0008/4791/testimonial.jpg" alt="made by many" width="800" height="411"></p> <p>A little side menu in the header, containing categories, side projects and events, each of which are beautifully represented. The side projects contain some ingenious little endeavours, such as a solution to let the agency's studio dwellers know when the toilet is vacant.</p> <p><img src="https://assets.econsultancy.com/images/0008/4795/side_projects.jpg" alt="is the toilet free?" width="800" height="415"></p> <p>The events page is worthy of framing.</p> <p><img src="https://assets.econsultancy.com/images/0008/4790/events.jpg" alt="events made by many" width="800" height="414"></p> <p>A newsletter sign-up. Not all that common to see one of these so prominent on an agency website, but definitely a good idea, to ensnare those that might be considering enlisting a new agency.</p> <p><img src="https://assets.econsultancy.com/images/0008/4792/newsletter.jpg" alt="made by many newsletter" width="800" height="413"></p> <h3>2. Stink Studios</h3> <p>The Stink Studios website exudes the same kind of cool you get from those infrequently-published fashion magazines you see in the newsagents with titles such as 'The Gentlewoman' or 'sum zine'.</p> <p>There's a confidence in the typography, white space above the fold, and lack of showing off with any scrolling trickery. It looks just as cool on mobile, too. The Stink group used to consist of Stink Films, Stinkdigital and Stinkstudios but at the beginning of this year, the latter two were fused together.</p> <p>It feels significant that the word 'digital' has disappeared. On the website itself, you aren't bombarded with digital guff, rather the work speaks for itself, and happens to include digital assets.</p> <p><a href="http://www.stinkstudios.com/"><img src="https://assets.econsultancy.com/images/0008/4746/stink.jpg" alt="stink studios" width="800" height="439"></a></p> <p>I should probably pick out a few UX/design details I noticed and liked.</p> <p>Scroll down quickly on the News or Work or Contact pages and watch how nicely the images perform their lazy load. Lovely squares in graduated pastel patiently wait for their images to overlay, meaning the page looks cool whether the images have loaded or not.</p> <p><img src="https://assets.econsultancy.com/images/0008/4747/lazy.jpg" alt="stink studios" width="800" height="444"></p> <p style="font-weight: normal;">There's a quirky little fact rotator on the careers page.</p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/4745/facts.gif" alt="agency facts" width="360" height="225"></p> <p style="font-weight: normal;">Scrolling down any page, you can move your mouse to the left margin and the header menu will appear down the left-hand side, so you can navigate without needing to scroll back to the top.</p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/4748/side_menu_stink.jpg" alt="stink side menu" width="800" height="416"></p> <h3>3. DigitasLBi</h3> <p style="font-weight: normal;">I was occasionally a little disoriented when clicking around LBi's new website. But, heck, it was fun. And eventually you realise it's all there in the header menu.</p> <p style="font-weight: normal;">There is no real way to do the website justice, other than telling you to explore it, so I have simply collected a variety of intriguing screenshots. It is bold, colourful and feels unique.</p> <p style="font-weight: normal;"><em>Inspired by <a href="https://econsultancy.com/blog/65065-30-little-things-i-love-about-the-new-virgin-america-website/">Virgin America</a>?</em></p> <p style="font-weight: normal;"><a href="http://www.digitaslbi.com/en-us/"><img src="https://assets.econsultancy.com/images/0008/4749/america.jpg" alt="unicorns" width="800" height="439"></a></p> <p style="font-weight: normal;"><em>Careers</em></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/4753/careers2.jpg" alt="careers lbi" width="800" height="443"></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/4754/careers.jpg" alt="careers lbi" width="800" height="442"></p> <p style="font-weight: normal;"><em>People</em></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/4751/linkedin.jpg" alt="lbi linkedin" width="800" height="438"></p> <p style="font-weight: normal;"><em>More unicorn</em></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/4750/chicago.jpg" alt="digitaslbi" width="800" height="441"></p> <p style="font-weight: normal;">Look out for the yearbook (shown below), where DigitasLBi produces a little vignette every single day to show off a member of staff or a piece of work.</p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/4755/yearbook.jpg" alt="lbi yearbook" width="800" height="442"></p> <p style="font-weight: normal;">There's some very creative video of staff, too, capturing their hobbies.</p> <p style="font-weight: normal;"><a href="http://www.digitaslbi.com/en-gb/people"><img src="https://assets.econsultancy.com/images/0008/4752/people.jpg" alt="digitas people videos" width="800" height="444"></a></p> <p style="font-weight: normal;"><em>And a great 404</em></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/4764/404.jpg" alt="404" width="800" height="420"></p> <h3>4. Sagmeister &amp; Walsh</h3> <p>If you're a client of Sagmeister &amp; Walsh, you can simply visit the agency's homepage to check whether the staff are working hard or not. Yes, the homepage is live video from the agency's offices.</p> <p><a href="http://sagmeisterwalsh.com/"><img src="https://assets.econsultancy.com/images/0008/4860/sag_home.jpg" alt="sagmeister and walsh home" width="800" height="442"></a></p> <p>The website, with plenty of black and white, and 'plain text' font appears basic at first glance – just look at the 'services' and 'clients' sections on the 'about' page below.</p> <p>However, the agency, which has heritage in print and identity design, is fairly obviously just projecting its ridiculously confident personality.</p> <p><img src="https://assets.econsultancy.com/images/0008/4858/sag_services.jpg" alt="sagmeister and walsh services" width="800" height="443"></p> <p>In the 'News' and 'Work' sections of the site, colour finally reigns. One of the nice bits of UX when you're navigating the site is a chunky 'x' for a cursor, and all-in-all you do get the feel of a luxury brand (indeed, the agency has worked with many luxury clients).</p> <p><img src="https://assets.econsultancy.com/images/0008/4859/sag_blog.jpg" alt="sagmeister and walsh blog" width="800" height="441"></p> <p><em>Work</em></p> <p><img src="https://assets.econsultancy.com/images/0008/4857/sag_work.jpg" alt="sagmeister and walsh work" width="800" height="444"></p> <p>Clicking through to individual case studies, the imagery is really nicely presented, and the way it fills the page makes it seem as if you are flicking through a coffee table book.</p> <p>The design is left to speak for itself, with little accompanying text unless you click to see project info.</p> <p><img src="https://assets.econsultancy.com/images/0008/4856/sag_jewish_museum.jpg" alt="sagmeister and walsh work" width="800" height="414"></p> <h3>5. Clearleft</h3> <p>Another agency that has redesigned its website in 2017, Clearleft is my favourite on this list. As you'd expect from an agency with its roots in usability, the website is just beautifully easy to navigate and its information easy to absorb.</p> <p>And it doesn't stop at the typography and the layout, the case studies are impressively extensive, the people profiles informative (and not cutesy) and the blog articles very measured and insightful (showing passion, too).</p> <p><em>Homepage</em></p> <p><a href="https://clearleft.com/"><img src="https://assets.econsultancy.com/images/0008/4756/clearleft_home.jpg" alt="clearleft home" width="800" height="491"></a></p> <p><em>Client stories</em></p> <p><em><img src="https://assets.econsultancy.com/images/0008/4758/client_stories.jpg" alt="client stories" width="800" height="441"></em></p> <p><img src="https://assets.econsultancy.com/images/0008/4757/client_stories_2.jpg" alt="clearleft client stories" width="800" height="436"></p> <p><em>Case study</em></p> <p><img src="https://assets.econsultancy.com/images/0008/4759/clearleft_case_study.jpg" alt="case study" width="800" height="442"></p> <p><em>People</em></p> <p><img src="https://assets.econsultancy.com/images/0008/4760/clearleft_people.jpg" alt="clearleft people" width="800" height="440"></p> <p><em>Posts</em></p> <p><img src="https://assets.econsultancy.com/images/0008/4761/clearleft_blog.jpg" alt="clearleft posts" width="800" height="431"></p> <h3>6. Hugo &amp; Cat</h3> <p>There are a number of websites I have selected because of their sheer simplicity of message.</p> <p>Hugo &amp; Cat employs simple and powerful copywriting with great contrast between typography, illustration and background. Examples of copywriting:</p> <ul> <li>'We transform relationships between brands and people'</li> <li>'Going beyond delivery'</li> <li>'Calling a new generation'</li> <li>'Turning fun into fans'</li> <li>'Collaboration that creates powerful results'</li> </ul> <p><em>Homepage</em></p> <p><a href="http://www.hugoandcat.com/"><img src="https://assets.econsultancy.com/images/0008/4822/hugo_cat_home.jpg" alt="hugo &amp; cat" width="800" height="415"></a></p> <p><em>Contact page</em></p> <p><img src="https://assets.econsultancy.com/images/0008/4833/love_to_hear_from_you.jpg" alt="hugo &amp; cat contact page" width="800" height="416"></p> <p>The most striking part of the design is on the individual client work pages.</p> <p>Though they all use the same templates – with clearly presented copy and images, and detail on the type of work and what awards it has won – each page uses a different colour scheme, and this brings a really strong visual thread through the agency's work.<strong><br></strong></p> <p><em>Work template</em></p> <p><img src="https://assets.econsultancy.com/images/0008/4819/template.jpg" alt="work template - hugo &amp; cat" width="800" height="414"></p> <p><em>Various case study headers</em></p> <p> <em><img src="https://assets.econsultancy.com/images/0008/4821/camper.jpg" alt="camper work - hug &amp; cat" width="800" height="412"></em></p> <p><img src="https://assets.econsultancy.com/images/0008/4818/ireland.jpg" alt="ireland work - hugo &amp; cat" width="800" height="415"></p> <p><img src="https://assets.econsultancy.com/images/0008/4820/sony.jpg" alt="sony work page - hug &amp; cat" width="800" height="414"></p> <h3>7. Bolden</h3> <p>Netherland-based Bolden has a homepage that looks slightly confused (if cool) until you scroll over either the blue or red filter in either corner (see further below).</p> <p>The blue translucent style font is used throughout and is very effective.</p> <p><a href="http://www.bolden.nl/"><img src="https://assets.econsultancy.com/images/0008/4867/bolden_home.jpg" alt="bolden home" width="800" height="444"></a></p> <p><img src="https://assets.econsultancy.com/images/0008/4866/bolden_home_blue.jpg" alt="bolden home blue filter" width="800" height="443"></p> <p>Bolden is one of the only websites on this list that uses black and white imagery on its case studies page. The stylised images really help to intrigue the user, with a title showing on rollover with the mouse.</p> <p><img src="https://assets.econsultancy.com/images/0008/4868/bolden_cases.jpg" alt="bolden cases" width="800" height="440"></p> <p>And lastly, Bolden lays claim to the coolest 'about' page of the lot, beginning with a simple list of names of each member of staff. Again in that icey translucent blue.</p> <p><img src="https://assets.econsultancy.com/images/0008/4869/bolden_about.jpg" alt="bolden about" width="800" height="440"></p> <h3>8. Code</h3> <p>Code (formerly Code Computerlove) is another agency with big colours and chunky typography. Beginning as a minimal viable product, this website is consequently very easy to navigate and does the job you feel a website for any smallish independent agency should do. </p> <p><a href="https://www.codecomputerlove.com/"><img src="https://assets.econsultancy.com/images/0008/4865/code_home.jpg" alt="code homepage" width="800" height="440"></a></p> <p><em>Simple copywriting</em></p> <p><img src="https://assets.econsultancy.com/images/0008/4864/code_partners.jpg" alt="code partners" width="800" height="443"></p> <p>The 'work' pages positively zing in client brand colours with a big hero logo and a question that sums up the brief. </p> <p><img src="https://assets.econsultancy.com/images/0008/4863/code_amnesty.jpg" alt="amnesty code" width="800" height="441"></p> <p><img src="https://assets.econsultancy.com/images/0008/4862/code_asda.jpg" alt="code asda" width="800" height="442"></p> <h3>9. Rawnet</h3> <p>The word that best describes Rawnet's website is 'memorable'.</p> <p>Ultra bold colours and typography, and full-screen imagery along with a far-from-conventional sideways scroll on desktop (for many pages, barring individual case studies), means this is an agency website you're unlikely to see copied by its competition.</p> <p>The sideways scrolling is certainly interesting, but arguably a little confusing, especially as on a few pages my trackpad seemed happier when I motioned to scroll down (which took the page sideways). Those potential customers who don't like experimentation, may be put off - no bad thing, perhaps.</p> <p><em>Case studies (sideways scroll)</em></p> <p><a href="http://www.rawnet.com/case-studies"><img src="https://assets.econsultancy.com/images/0008/4796/case_studies_rawnet2.jpg" alt="Rawnet cases studies" width="800" height="406"></a></p> <p><img src="https://assets.econsultancy.com/images/0008/4800/case_studies_rawnet.jpg" alt="rawnet cae studies" width="800" height="405"></p> <p><em>Hero illustration for a case study page</em></p> <p><img src="https://assets.econsultancy.com/images/0008/4798/playstaion.jpg" alt="rawnet case study" width="800" height="416"></p> <p><em>Chunky typography</em></p> <p><img src="https://assets.econsultancy.com/images/0008/4799/write_the_future.jpg" alt="rawnet contact" width="800" height="415"></p> <h3>10. dogstudio</h3> <p>Last on the list is Belgium's dogstudio. I have to admit that the only reason I added it here is because I love the way that the work is presented on the homepage – click and you're taken to the client's actual website (designed by dogstudio), rather than to a long case study page.</p> <p>I love this idea (and that it opens in a new tab) because it encourages engagement with their work, and cuts down on marketing spiel.</p> <p><a href="http://www.dogstudio.be/"><img src="https://assets.econsultancy.com/images/0008/4871/dogstudio_work.jpg" alt="dogstudio work" width="800" height="443"></a></p> <p>There's some slightly more off-the-wall imagery and copy, too.</p> <p><img src="https://assets.econsultancy.com/images/0008/4872/make_good_shit.jpg" alt="dogstudio" width="800" height="443"></p> <p>And a very creative contact page. I have only captured one example in the GIF below, but the message here cycles at least 20 times, containing some strange, perhaps even inappropriate sentences ("If you like hitting on grandmas..").</p> <p><img src="https://assets.econsultancy.com/images/0008/4870/gif_like_dogs.gif" alt="dogstudio gif" width="600"> </p> <p>And on that note, we come to the end of our list.</p> <p><em><strong>Agree? Disagree? What makes a great agency website - let us know below.</strong></em></p> tag:econsultancy.com,2008:BlogPost/68910 2017-03-27T12:04:45+01:00 2017-03-27T12:04:45+01:00 Why so many website relaunches fail (but shouldn’t have) Paul Randall <p dir="ltr">But this is 2017. Surely, we have better tools than ever to unearth what it is customers want. We’ve never been better equipped to test web pages before they are rolled out. So why do brands continue to make a hash of launching a new site?</p> <p dir="ltr">One basic reason might be the temptation to go for a big bang launch, complete with PR fanfare. Great if it works. But what if conversion rates suddenly drop through the floor? </p> <p dir="ltr">You won’t have enough usable analytics data to identify where the problems are so you’ll either have to make changes and hope for the best, or quickly restore the old site. When you can make a series of controlled and tested incremental improvements, why take the risk of the big bang relaunch? That’s the riskiest thing you could do!</p> <p dir="ltr">It’s interesting to compare the approaches of Google+ and LinkedIn when they relaunched. LinkedIn seemed to do a great job of annoying the hell out of some of its most important users by plonking the new version on their desktops without much warning (I'm referring to LinkedIn's previous relaunch here, not the one currently underway).</p> <p dir="ltr">These people shared, very publicly, what they didn’t like about the new version. As the roll-out gradually reached other users there was an expectation that they wouldn’t like what they were about to see – even though for most of us it turned out to be okay.</p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0008/5026/old_linkedin.jpg" alt="" width="700" height="622"></p> <p dir="ltr">Google+, on the other hand, went out of its way to keep users informed. Google ran the new and old versions side by side for several months and people could switch back and forth at will. By the time the new version was fully rolled out there had been changes based on the feedback and there was very little outcry.</p> <p dir="ltr">The BBC website is also one that seems to be in a constant state of development. It offers new options for keeping up with news, sports results etc., that you can try out, but always with the option of going back to what’s familiar. When new features are fully rolled out, users have been involved and everything is thoroughly tested.</p> <p dir="ltr">Surely this is a smarter way to approach website upgrades and relaunches. Compare this to CNN which, in a desire to ‘update and refresh’, launched a site that used more resources and made it harder for readers to find the news that interested them – users hated it. Or how about the legendary <a href="https://econsultancy.com/blog/6477-is-digg-digging-itself-into-a-hole-with-its-new-design">Digg.com relaunch that almost killed the business</a>.</p> <h3>Learn from your current site before relaunching</h3> <p dir="ltr">A classic mistake is to assume there’s nothing to learn from your existing site. Okay, it’s going to get binned. But you have thousands of customers using it every day providing data on what they want, how they want to do things and what they find difficult. You need to make use of that data.</p> <p dir="ltr">Yes, it does make sense to do usability studies even on a site you are replacing. That way you can focus on improving the parts people dislike, and keep hold of the things you know they like and use.</p> <p dir="ltr">And while you’re at it, talk to your customer service teams. They’ll have some excellent insights to offer on where people find the current website troublesome, as well at where there’s room for improvements to be made.</p> <h3 dir="ltr">What does your business need to achieve?</h3> <p dir="ltr">Every business has targets: the number of new customers, sales growth by product/service category, <a href="https://econsultancy.com/reports/customer-lifetime-value/">lifetime customer value</a>, cost of acquisition. How often do these business goals feed directly (and I mean <em>directly</em>) into your website redesign?</p> <p dir="ltr">It’s one thing to launch a new website because you need to increase sales by 20%. It’s quite another to identify exactly <em>how</em> the new site and the activities that feed traffic to it will achieve that goal. And it’s yet another thing to have the test data to show that the new site will deliver the conversions you need.</p> <p dir="ltr">Businesses rarely approach website relaunches with this degree of confidence. That’s because they don’t join up the dots between what the business needs to achieve and what the website is designed to deliver. And they rarely put those assumptions to the test before they launch. Result: disappointing return on the investment.</p> <p dir="ltr">With clear goals and certainty about the weak areas on your current site you can focus the development priorities more productively. Are your current below-target sales because people struggle to select the right products, or because too many shoppers abandon carts before completing a purchase? It certainly helps to know.</p> <h3 dir="ltr">What user experience do you want to create?</h3> <p dir="ltr">You’ve collected data and insights on current issues. You’ve blended these with the business goals you need to achieve. The next step is to define a user experience that will satisfy customers and deliver your goals.</p> <p dir="ltr">What, exactly, do people need to do on your site? How are you going to make this simple, enjoyable and rewarding?</p> <p dir="ltr">Draft a succinct and crystal clear statement for each key page across the website that defines the main objective(s) for your new, improved customer experience. Refer back to this constantly as you design and build the new solution to ensure you’re still focusing on your primary objectives.</p> <h3 dir="ltr">What does your brand stand for?</h3> <p dir="ltr">A website redesign is an excellent opportunity to revisit your fundamental brand values. What do you stand for? What is it that particularly appeals to your customers?</p> <p dir="ltr">What needs do you meet, what value do you create, and why do you do it better than your competition? What emotional drivers decide how visitors will act? Do they want to picture themselves as being more healthy, successful, in control, influential or contented? Or are they looking for something else?</p> <p dir="ltr">This analysis will guide colours, imagery, typography, content and vocabulary. Your insights will help you create more powerful CTAs and better performing landing pages.</p> <p dir="ltr">Here’s a great example of some content guidelines we recently came across from the team at uSwitch:</p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0008/4825/Screen_Shot_2017-03-17_at_15.32.32.png" alt="uSwitch tone chart" width="790" height="274"></p> <p dir="ltr"><em>uSwitch tone chart guide: <a href="https://ustyle.guide/language/tone.html">https://ustyle.guide/language/tone.html</a> </em></p> <h3 dir="ltr">Making it real</h3> <p dir="ltr">So now you’re clear about what your target audience think of your current website; you understand how the new site needs to perform, and how it needs to support visitors on their journey to becoming customers. What now?</p> <p dir="ltr">Wireframes let you test the structure and navigation against defined user journeys. How obvious will each step be? Are there too many steps? You can design the prompts and help users will need at each stage. You can make better informed decisions about content, headings and CTAs.</p> <p dir="ltr">Design visuals start to build a realistic picture of the look and feel of the new site that you can test against the business objectives and brand values.</p> <p dir="ltr">Everything you design can, and should, be tested before launch on a variety of devices. There are great tools out there for usability and A/B split testing that will take the risk out of your new web pages. </p> <h3 dir="ltr">The testing never stops</h3> <p dir="ltr">Launch isn’t the time to put your feet up. It’s a time to dive into the data and see whether all the hard work is paying off. It’s a time to be plotting tests and optimisation efforts to keep the metrics improving and to squeeze even more value out of your investment.</p> <p dir="ltr">The digital world moves quickly. Technologies emerge, and your customers will be trying to outdo your user experience. Plan how you are going to stay ahead in the long term.</p> tag:econsultancy.com,2008:BlogPost/68912 2017-03-20T14:23:51+00:00 2017-03-20T14:23:51+00:00 About.com rebrands with new standalone sites to target different interests Nikki Gilliland <p>So, what’s behind the change? Here’s a bit more on the story, as well as why the move has so far proved successful.</p> <h3>New sites for a new user experience</h3> <p>About.com first launched in 1996 as a website featuring expert advice and information on a wide range of topics. While the formula proved to be successful for a number of years, the brand was reportedly floundering in the face of competing lifestyle publishers.</p> <p>Now separating its content into separate verticals, it is aiming to combine the authority of the former site with a more accessible and simple design. In other words, each site is designed to offer a user experience that complements the topic.</p> <p>For example, when it comes to the subject of money, a user might be more likely to search for a specific article rather than browse through categories. This is reflected in the direct nature of <a href="https://www.thebalance.com/">The Balance’s</a> main menu – About.com’s new financial site – which asks the user what exactly it is they’re looking to solve. </p> <p><img src="https://assets.econsultancy.com/images/0008/4827/The_Balance.JPG" alt="" width="760" height="372"></p> <p>On the other hand, someone interested in lifestyle content such as redecoration or food might be more open to discovery, as well as other mediums like video or photo galleries.</p> <p>The Spruce’s <a href="https://econsultancy.com/blog/68765-why-brands-should-be-making-more-use-of-pinterest/" target="_blank">Pinterest</a>-like design is highly effective for encouraging this less structured user experience. Content is separated into loosely labelled categories like ‘Must Reads for Pet Owners’ – designed to catch attention more than anything else - while each page contains a multitude of related articles.</p> <p><img src="https://assets.econsultancy.com/images/0008/4826/The_Spruce.JPG" alt="" width="760" height="389"></p> <p>Similarly, it is clear that The Spruce is designed to be inspirational as opposed to merely functional – something that was evidently missing from home articles on About.com.</p> <p>Another aim of the About.com rebrand appears to be to create spaces that users feel comfortable in, and removing the danger of feeling overwhelmed or overloaded with content.</p> <p><img src="https://assets.econsultancy.com/images/0008/4828/About.JPG" alt="" width="760" height="385"></p> <p>With many visitors landing on the site from social media or links on other sites, clarity over subject matter and navigation is also key – factors that each new site clearly strives to offer.</p> <h3>A positive response</h3> <p>So, how have users responded to the new sites? According to reports, The Spruce, The Balance and Lifewire all rank as top 10 websites in their respective sectors, all drawing in between 6m-10m unique users in the US each month. </p> <p>Similarly, Verywell – the new health site -  is seeing a clickthrough rate three times higher than its former incarnation on About.com.</p> <p>While <a href="https://econsultancy.com/blog/65455-why-you-need-an-evergreen-content-strategy/">evergreen content</a> means that the sites are still getting traffic from existing links, the rebrand does appear to encouraging greater traffic. </p> <p>What’s more, it is likely that the new sites will also encourage greater activity on social in the form of shares and user engagement. While About.com had both scope and notoriety, its size was becoming its downfall, with articles becoming lost and users failing to make any real connection to the overall brand.</p> <p>With even more vertical brands to launch soon, the next being travel site TripSavvy, About.com looks set to change its former reputation for good.</p> <p><em><strong>Related reading:</strong></em></p> <ul> <li><em><a href="https://econsultancy.com/blog/63099-five-tips-for-a-successful-rebrand/" target="_blank">Five tips for a successful rebrand</a></em></li> <li><em><a href="https://econsultancy.com/blog/64991-five-ingenious-marketing-rebrands-that-changed-society/" target="_blank">Five ingenious marketing rebrands that changed society</a></em></li> </ul> tag:econsultancy.com,2008:BlogPost/68887 2017-03-14T14:56:56+00:00 2017-03-14T14:56:56+00:00 Ethical CRO: The end of dark patterns Paul Randall <p dir="ltr">In an attempt to increase the numbers, psychological tricks which affect user behaviour in a negative way are being used to mislead an unsuspecting audience.</p> <p dir="ltr">Although not technically illegal they are certainly unethical. Businesses need to be aware of the long-term risks posed by knowingly misleading customers for short-term gain, both in terms of UX and brand reputation.</p> <h4 dir="ltr">Dark patterns</h4> <p dir="ltr">Harry Brignull coined the phrase in 2010 and ever since has received hundreds of examples with the hashtag #darkpattern. His website: <a href="https://darkpatterns.org/">https://darkpatterns.org/</a> holds a collection of just some of them.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">How can designers sleep at night, when they no longer allow users to say "No"? <a href="https://t.co/R4659wBYyM">pic.twitter.com/R4659wBYyM</a></p> — Micah Scott (@scanlime) <a href="https://twitter.com/scanlime/status/832729043761967104">February 17, 2017</a> </blockquote> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">What it looks like when companies are on their way out of business-Legally mandated unsubscribe link colored white <a href="https://twitter.com/hashtag/ux?src=hash">#ux</a> <a href="https://twitter.com/hashtag/darkpatterns?src=hash">#darkpatterns</a> <a href="https://twitter.com/zynga">@zynga</a> <a href="https://t.co/3XZ04teBK3">pic.twitter.com/3XZ04teBK3</a></p> — Mark Bailey (@themarkbailey) <a href="https://twitter.com/themarkbailey/status/833775152424816642">February 20, 2017</a> </blockquote> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">Really, <a href="https://twitter.com/STN_Airport">@STN_Airport</a>, you need to coerce your customers into subscription? <a href="https://t.co/GJ8Y2SLGPt">pic.twitter.com/GJ8Y2SLGPt</a></p> — Sebastian Deterding (@dingstweets) <a href="https://twitter.com/dingstweets/status/833248153507860480">February 19, 2017</a> </blockquote> <h4 dir="ltr">Why dark patterns work</h4> <p dir="ltr">It's easy to understand how people can be affected by these.</p> <p dir="ltr">When we are tired, or hungry we pay less attention to our surroundings - it’s almost like being on autopilot. Sites with a high cognitive load require lots of mental effort, so reducing this is a good thing. But when you aren’t giving your total attention you can misinterpret what you see and read.</p> <p dir="ltr">When we are shown a left arrow and a right arrow, in Western cultures we have learnt that the right arrow is the next step. This is learnt at a very early age and has become second nature. This example comes from <a href="https://www.zsl.org/ticket/zsl-london-zoo">ZSL London Zoo</a>:<a title="ZSL London Zoo" href="https://www.zsl.org/ticket/zsl-london-zoo"><br></a></p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0008/4652/zsl_blurred.jpg" alt="" width="700" height="428"></p> <p dir="ltr">If the right arrow is also green (another convention for ‘next step’) we automatically assume this is the thing we need to do next. We may not even read the text on it anymore, and this is where designers can exploit our ingrained behaviours.</p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0008/4654/zsl_focused.jpg" alt="" width="700" height="428"></p> <h4 dir="ltr">The difference between influencing user behaviour and tricking people</h4> <p dir="ltr">The grey area comes when you aren't tricking people into doing something, but using clever psychological nudges to do so. Countdown timers if used appropriately can inform customers that placing an order before 10pm can get Next Day delivery. This is displaying relevant and meaningful information.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">Snapchat's <a href="https://t.co/jIJ8qMwKGo">https://t.co/jIJ8qMwKGo</a> has a fake time-pressure countdown in their checkout. It's just a looping animation. <a href="https://t.co/YmWqvQJzt0">pic.twitter.com/YmWqvQJzt0</a></p> — Harry Brignull (@harrybr) <a href="https://twitter.com/harrybr/status/837597399082217472">March 3, 2017</a> </blockquote> <h4 dir="ltr">‘Why’ - The missing metric</h4> <p dir="ltr">When you hear of a site with a 2% conversion rate, the natural question is "what happened to the 98%". Numbers only tell you how many people didn't complete a task. Crucially, it won't tell you why they didn't convert.</p> <p dir="ltr">Research needs to be undertaken to uncover and remove fears, uncertainties and doubts that can lead to someone leaving a site before completing a task. It’s easy when you see thousands of visitors to lose sight of their individual needs and think that the same technique will work on all of them.</p> <h4 dir="ltr">You can improve user experiences and conversion rates without misleading visitors</h4> <p dir="ltr">I recently worked on a big redesign for a utilities company where the use of forms was getting out of hand. Forms on the homepage, in popups — all in the aim to generate leads!</p> <p dir="ltr">While gathering some feedback through usability studies it was found that forms everywhere gave the complete wrong impression. People saw the forms, but they just felt the company was too ‘grabby’ in wanting their visitors' details.</p> <p dir="ltr">So, by removing all but one of the forms and creating a simple user journey with compelling content, form submissions went up by 18%.</p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0008/4655/flogas_screenshot.jpg" alt="" width="700" height="433"></p> <p dir="ltr">Just because you want to improve leads or sales doesn’t mean you have to do it at the expense of your user experience.</p> <p dir="ltr">This wasn’t an easy sell either. Convincing clients to remove things is a rarity but the truth is that adding gimmicks isn’t sustainable in the long term, and the negative press that comes when you get called out on it isn’t worth thinking about.</p> <h4 dir="ltr">Where do ethics sit: the company, or the designer?</h4> <p dir="ltr">The User Experience Professionals Association (UXPA) has a <a href="http://uxpa.org/resources/uxpa-code-professional-conduct">code of conduct</a> which looks to address professional conduct between a UX designer and their client. There is also <a href="https://ind.ie/ethical-design/">Ethical Design</a> outlined by ind.ie which focuses on the efforts and rights of human beings.</p> <p dir="ltr">But neither of these focus on the responsibility a website has to its audience. These standards are typically held within a company but the truth is that some businesses (i.e. budget airlines) have a reputation for using dark patterns during the payment process, and negative experiences will ultimately not help long-term growth and customer advocacy.</p> <p dir="ltr">Should companies agree to an ethical code of conduct on the web, and support others which do so? Have your say in the comments below.</p> tag:econsultancy.com,2008:BlogPost/68882 2017-03-13T10:00:00+00:00 2017-03-13T10:00:00+00:00 Four ways Tiger is transforming the in-store retail experience Nikki Gilliland <h3>Design-lead concept</h3> <p>Unlike other stores with a similar price range, Tiger does not lead with a low-cost concept. Instead, it is better known for its focus on design, stocking a wide range of cheap, cheerful and brightly coloured products – often sourced from Asia.</p> <p>It is a formula that has become a hallmark, and in turn, has made Tiger’s proposition about more than just affordable prices. </p> <p>You might go into a Tiger in search of a specific item, but more often than not, regular consumers also visit for the purpose of having a browse. This is because - drawing on its tagline of ‘everyday magic’ – it promotes the idea that you don’t know what you might find in its stores. </p> <p>While sourcing products from Asia surely helps to offer consumers something new, Tiger has also taken steps to commission artists to create original items specifically for the store. For example, it has previously partnered with Japanese artist Misaki Kawai to create a range of unique tote bags.</p> <p><img src="https://assets.econsultancy.com/images/0008/4520/Tiger_online.JPG" alt="" width="780" height="398"></p> <h3>Low-cost quality</h3> <p>While the majority of Tiger’s items are very low in price, often falling between just £1 to £3, Tiger doesn’t sell itself on this basis. More importantly, it manages to bypass the notion that low-price equals low quality, and this is largely due to the store’s all-inclusive nature.</p> <p>By refusing to shout about its prices, it has managed to disrupt the idea that cheap equals a poorly-made product.</p> <p>Of course, that is not to say that the consumer does not appreciate good value. Rather, perhaps that consumers are beginning to consider their money even more than ever before – with expectations becoming less about BOGOF offers and more about legitimate value as well as quality.</p> <p><img src="https://assets.econsultancy.com/images/0008/4518/Tiger_store.JPG" alt="" width="780" height="521"></p> <h3>Seasonal products and travel stores</h3> <p>Another reason why Tiger has generated a loyal following is its dedication to the changing seasons. </p> <p>You only have to look at its social media channels to see how it taps into events like Easter and Pancake Day – conveniently selling season-related products you probably never knew existed.</p> <p>Similarly, it is able to drive sales of its craft and DIY products by continuously introducing new ranges, in turn ensuring that its stores remain interesting and exciting to even the most regular consumers.</p> <p><img src="https://assets.econsultancy.com/images/0008/4519/Tiger_Insta.JPG" alt="" width="780" height="519"></p> <p>Tiger has also recently entered the <a href="https://econsultancy.com/blog/68371-why-travel-retail-is-big-business-for-beauty-brands/" target="_blank">travel retail</a> space, opening its first ever store in a London tube station. With a slightly different product-range, skewed to ‘on the go’ consumers, it is a sign that Tiger is intent on expanding – as well as evidence that there is a demand for it.</p> <h3>In-store discovery</h3> <p>When it comes to its in-store layout, Tiger has clearly been inspired by fellow Scandinavian brand, <a href="https://econsultancy.com/blog/67694-10-examples-of-great-ikea-marketing-creative/" target="_blank">Ikea</a>. Its larger shops are distinctly labyrinthine, taking consumers on a one-way journey through the entire store.</p> <p>It’s a clever concept. Not only does it ensure consumers will travel past all potential products before they leave, increasing the likelihood of an impulse purchase, but it also builds on consumer panic. For example, by placing food and drink items near the checkout, but not quite the nearest thing to it, consumers will pick up these items knowing they won’t easily be able to turn back again.</p> <p>It’s not only the layout that sets Tiger apart, of course. Its focus on the ‘surprise and discovery’ concept of its stores extends even to the background music, with the stores playing a familiar soundtrack of songs from the 1960’s to the 1990’s. </p> <p>Whether or not you actually need anything it sells, there’s no doubt Tiger is intent on changing the stale shopping experience of most low-price stores.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">These mini notebooks from <a href="https://twitter.com/FlyingTigerCph">@FlyingTigerCph</a> really speak to my soul <a href="https://t.co/DLois99DFO">pic.twitter.com/DLois99DFO</a></p> — Billy Davis (@Billy_Davis85) <a href="https://twitter.com/Billy_Davis85/status/838089100385271809">March 4, 2017</a> </blockquote> <p><em><strong>Related articles:</strong></em></p> <p><a href="https://econsultancy.com/blog/68787-why-did-poundland-s-ecommerce-trial-fail/" target="_blank">Why did Poundland’s ecommerce trial fail?</a></p> tag:econsultancy.com,2008:BlogPost/68808 2017-02-16T10:00:00+00:00 2017-02-16T10:00:00+00:00 UK retailers still failing to meet web accessibility standards Chris Rourke <p>With so many barriers in store, shopping online from the comfort of your home is an attractive option. Furthermore, under the Equality Act 2010 all retailers must provide access to their goods online as well as in store. </p> <p>We decided to review the online accessibility of six well known UK retailers to identify the main barriers for online shoppers with disabilities.</p> <p>The chosen retailers were:</p> <ol> <li><a title="Accessibility Review of Online Retailers Part 1: Boots" href="http://uservision.co.uk/2017/01/accessibility-review-boots/" target="_blank">Boots</a></li> <li><a title="Accessibility Review of Online Retailers Part 2: Mothercare" href="http://uservision.co.uk/2017/01/accessibility-review-mothercare/" target="_blank">Mothercare</a></li> <li><a title="Accessibility Review of Online Retailers Part 3: House of Fraser" href="http://uservision.co.uk/2017/01/accessibility-review-house-off-fraser/" target="_blank">House of Fraser</a></li> <li><a title="Accessibility Review of Online Retailers Part 4: Joules" href="http://uservision.co.uk/2017/01/accessibility-review-joules/" target="_blank">Joules</a></li> <li><a title="Accessibility Review of Online Retailers Part 5: Tesco" href="http://uservision.co.uk/2017/01/accessibility-review-tesco/" target="_blank">Tesco</a></li> <li><a title="Accessibility Review of Online Retailers Part 6: Not on The High Street" href="http://uservision.co.uk/2017/01/accessibility-review-not-on-high-street/" target="_blank">Not on the High Street</a></li> </ol> <h3>How did we measure/review online accessibility?</h3> <p>To evaluate the accessibility of a site we audit them against the Web Consortium Accessibility Guidelines from the W3C. Also known as <a title="Web Consortium Accessibility Guidelines from the W3C" href="https://www.w3.org/WAI/intro/wcag.php" target="_blank">WCAG 2.0</a>, these guidelines help to improve web accessibility and are the best way to ensure the site serves the widest audience.</p> <p>We followed a typical shopping journey to assess how the retailers approached accessibility on their sites. This included:</p> <ul> <li>Homepage and search</li> <li>Browse (including any product category and product range pages)</li> <li>Selection (product page and basket)</li> <li>Payment (delivery and payment details)</li> </ul> <p>We focused on the major aspects of WCAG 2.0 Level AA, including important factors such as keyboard accessibility and screen reader compatibility. Items we looked out for included:</p> <ul> <li>Use of <strong>headings</strong> </li> <li>Alt text for <strong>images</strong> </li> <li>Availability of<strong> skip links</strong> </li> <li>Inclusion of a <strong>visible focus</strong> </li> <li>Access to <strong>forms</strong> </li> <li>Use of <strong>ARIA</strong> to provide greater context</li> <li>Access of <strong>pop ups / modal windows</strong> </li> <li><strong>Colour contrast</strong></li> <li>Navigating around is in a <strong>logical order</strong> </li> <li> <strong>Links</strong> are meaningful and describe their purpose</li> </ul> <h3>What were the common barriers?</h3> <p>We gained a good insight into the main barriers disabled users face when shopping online. There were several common themes and unfortunately all of the sites failed to meet the Level AA of the WCAG 2.0 guidelines.</p> <p>This means that disabled users would face difficulty in buying a product on each site, with half of the sites completely inhibiting users at certain points in their journey. The main accessibility problems are described below, with examples from across the sites.</p> <h3>Visible focus</h3> <p>This navigational technique highlights where the user is on the page visually. This is essential for sighted users who rely on visual cues to navigate with a keyboard.</p> <p>As positive examples, Tesco and House of Fraser provide clear and consistent visible focus so users can see their location as they move their focus through the site. Other retailers had a mix of custom, default or no focus at all so that they relied on the default browser focus which is not sufficient since it can be unclear and inconsistent between browsers.</p> <p>Below we can clearly see that the “Home Electrical” link has keyboard focus on the Tesco site as the text is underlined and is displayed in a blue colour which is distinguishable from the rest of the text on the page: </p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/0008/3895/VisibleFocusExample_Tesco.png" alt="Clear visible focus on the Tesco homepage enables users to see where they are on the page." width="967" height="282"></p> <h3>‘Skip to’ links</h3> <p>For non-sighted users, ‘skip to’ links provide an easy way to move through the navigation and into the main content of the page.</p> <p>Only half of the sites had implemented ‘skip to’ links meaning that keyboard users would repeatedly have to step through lengthy navigation menus, an even more tedious task for screen reader users listening to the links.</p> <p>House of Fraser was a great example of a site that had clear ‘skip to’ links:</p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/0008/3896/SkipToLinks_HOF.png" alt="Good example of clear and visible ‘Skip to main content’ link on House of Fraser site." width="891" height="128"></p> <p>Joules had more than one ‘skip to’ link but they were designed to be hidden for sighted users. Consequently, sighted keyboard users were unable to take advantage of this functionality.</p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/0008/3897/SkiptolinksBadExample_Joules.png" alt="‘Skip to content’ link on Joules.com does not become visible" width="1010" height="655"></p> <h3>Alternative text for images</h3> <p>Alternative text is read by screen readers in place of images, allowing the content and function of the images to be available to those with visual or certain cognitive disabilities. All informative images on a page should have suitable alternative text, providing all users with the same access to content.  </p> <p>Across our retailers, use of alternative text was generally good with appropriate and descriptive alt tags on product images. However, we did notice issues on both Boots and Mothercare where image descriptions were read to the screen reader more than once.</p> <p>This was due to images having both an alt tag and identical title attribute. We recommend retailers remove titles with duplicate text to make sure the image descriptions are not repeated unnecessarily.</p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/0008/3898/AltTextforImages_Mothercare.png" alt="Product descriptions on Mothercare site are read to screen reader users more than once" width="853" height="593"></p> <h3>Providing context to screen reader users</h3> <p>This is fundamental for screen reader users who are not able to visually group information together or understand meaning through visible presentation. Information and relationships must be therefore associated programmatically.</p> <p>Examples of this from our retailers included:</p> <p><strong>Form fields</strong> need to have programmatically associated labels so that screen reader users know what information is required for the form input field. When a form field receives focus the label for the field (e.g. “first name”, “surname”, “email address”) should be called out by the screen reader.</p> <p>This was a persistent issue across all retailers. Some sites such as notonthehighstreet.com frustratingly had correctly implemented this in some areas and not others, meaning inconsistent access to information for their screen reader users.</p> <p>All retailers at one point or another had <strong>links that did not make sense out of context</strong>. Common examples found were ‘show more’ and ‘edit’. As we can see below, Mothercare.com used ambiguous links such as “edit” and “remove”.</p> <p>Without the visual cues, a screen reader user would struggle to know what they are editing or attempting to remove.</p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/0008/3899/AmbiguousLinks_Mcare.png" alt="Mothercare.com uses ambiguous links such as “edit” and “remove”. Screen reader users are not provided with any more context as to what will happen if they click these links" width="409" height="445"> </p> <p>In providing important tools to select product options such as size and colour, some retailers <strong>did not provide screen reader users with all the information they need to make the purchase</strong>.</p> <p>For retailers such as House of Fraser and Joules, there was no notification that a certain size was out of stock. Visually, sizes which aren’t available are scored out and in a lighter grey colour, but these sizes still get read out to the screen reader, indicating that they are available.</p> <p>This would prevent a screen reader user from choosing a product size, and they would need to either give up or ask for assistance.</p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/0008/3900/ProgrammaticallyAssociatedInfo_Joules.png" alt="The colour and size selection/availability on the Joules site are visually clear, but not conveyed programmatically for screen reader users" width="800" height="235"></p> <h3>What we learned:</h3> <p>With physical accessibility in store being such a challenge, online retail may seem the ideal solution. Unfortunately, retailers who fail to consider the issues and barriers mentioned above will not provide the answer for many disabled people.</p> <p>Most retailers had reassuring text on their sites describing their dedication to making their online offerings accessible. Most had also implemented some accessible features on their sites – for instance alternative text for images was widely implemented – yet shortcomings were readily found.</p> <p>Since these accessibility barriers were identified through a relatively short accessibility audit, retailers need to build on these great intentions and implement WCAG 2.0 to significantly improve accessibility across their sites.</p> <p>Retailers should consult with accessibility and UX experts to fully understand the needs of disabled customers and the technical solutions to provide accessibility.</p> <p>Once the identifiable accessibility barriers have been removed, the retailers should involve people with disabilities in usability testing to ensure that the site is usable for this audience as well as compliant to WCAG standards. </p><p><em>Many thanks to my colleagues Marie Moyles and Natalie Simpson for leading the accessibility analysis of the retailer websites.</em></p> tag:econsultancy.com,2008:BlogPost/68783 2017-02-07T14:22:55+00:00 2017-02-07T14:22:55+00:00 The pros and cons of personalised packaging for FMCG brands Nikki Gilliland <p>Since 2011, a number of other FMCG brands have embraced this trend, launching personalised (or customised) versions of products, usually with a pretty noticeable mark-up.</p> <p>But is this a marketing gimmick, or a strategy that can actually increase loyalty long-term? Let’s start with a few examples, and reasons why they often resonate.</p> <h4>Connecting with core consumers</h4> <p><a href="https://econsultancy.com/blog/63175-10-inspiring-digital-marketing-campaigns-from-coca-cola/" target="_blank">Coca-Cola</a>’s Share a Coke campaign was born out of the realisation that - while many viewed the brand as iconic - young people were failing to connect with it on a relatable level. </p> <p>Consequently, the campaign was created to directly communicate with this core demographic, with the personalisation element used to heighten its impact.</p> <p>But why is using someone’s name so powerful? Apparently, it’s one of the most effective ways to instil a sense of importance in another person, as well as create a long-lasting impression. Think of it like a brand’s version of a firm handshake.</p> <p>For brands aiming to create personal and one-to-one connection with audiences, it tends to be a simple but highly effective approach. With consumers supposedly taking an average of three to seven seconds to pick a drink from a supermarket shelf, using a name is an instantaneous way of catching attention and increase sales.</p> <p><img src="https://assets.econsultancy.com/images/0008/3702/Marmite.JPG" alt="" width="690" height="472"></p> <h4>Creating value</h4> <p>By turning an everyday item into something unique or customised, brands are also able to increase the value of their products – both figuratively and literally.</p> <p>One example of this is Heinz, which sold personalised cans of soup via its ‘Get Well Soon’ campaign for over twice the price of a regular item. </p> <p>With the added incentive of £1 per can sold also going to charity, consumers appeared to be more than willing to pay the extra, with more than 96,000 people logging into Facebook to find out more.</p> <p>This opt-in element is partly why the campaign worked so well. Instead of using the concept to drive its main television ads, Heinz aimed to create a trickle effect, with consumer interest being subtly piqued, before users would have to actively seek out the service on social.</p> <h4>Meets long-term needs</h4> <p>While personalisation can be used as a straight-forward sales tactic, it can also help brands understand consumer needs for the long-term and inform future engagement. Likewise, it can also be used to emphasise a brand’s values, particularly when it comes to community.</p> <p>Take Nutella, for example, whose personalisation campaign was built around the unique ways people already use the chocolate spread as an ingredient in meals and snacks. </p> <p>Featuring these as ‘Nutella stories’ on its website and social media, it manages to foster a sense of community and increase the chances of turning customers into brand advocates. </p> <h3>The problem with personalisation</h3> <p>There is the argument that personalised packaging isn’t actually personal – how can it be when there are millions of people around the world with the same first name? </p> <p>Similarly, there is the danger that charging over the odds for something so basic could actually put consumers off rather than draw them in. Ultimately, there must be a trade-off, with customers feeling like they are getting something of real value in return for their money (and data).</p> <p>If they don’t, brands run the risk of appearing outdated or blatantly chasing sales, simultaneously alienating consumers through overly friendly or personal messaging.</p> <h3>In conclusion...</h3> <p>While personalised packaging has proven to be a success for brands like Marmite and Coke, the concept certainly has its limitations. Perhaps the next step will be true personalisation in terms of tailored ingredients or recipes.</p> <p>We’ve already seen some experimentation with this concept. Kit-Kat’s pop-up chocolatory built on Coke’s naming trend with the added incentive of customised toppings and flavours. </p> <p>While <a href="https://econsultancy.com/blog/68400-the-kitkat-chocolatory-is-nestle-s-london-pop-up-store-any-good/" target="_blank">my own review</a> was that it was somewhat underwhelming – with the concept coming off as overhyped and overpriced – it is still an interesting example of how to take personalisation to the next level. </p>