tag:econsultancy.com,2008:/topics/web-design Latest Design content from Econsultancy 2017-01-17T14:41:07+00:00 tag:econsultancy.com,2008:BlogPost/68680 2017-01-17T14:41:07+00:00 2017-01-17T14:41:07+00:00 23 examples of duotones and colour filters in web design Ben Davis <p>Duotones can establish a colour theme for an agency website, for example, and help to liven up what can sometimes be quite basic website designs.</p> <p>Before you scan through these examples for inspiration, why not bookmark the rest of our <a href="https://econsultancy.com/blog/68600-10-sensible-web-design-trends-for-2017/">web design trends for 2017</a>, including <a href="https://econsultancy.com/blog/68674-four-websites-that-have-reduced-their-primary-navigation-options/">reduced primary navigation</a>, <a href="https://econsultancy.com/blog/68673-five-apps-websites-that-ditched-the-hamburger-menu/">ditching the hamburger menu</a>, and <a href="https://econsultancy.com/blog/68675-five-examples-of-meaningful-motion-in-web-design/">meaningful motion</a>.</p> <h3>Chris Redshaw</h3> <p>Look at Chris Redshaw! What does he do? Presumably something with design and direction. Whatever he does, I'm convinced he does it well, given how beautiful he looks under this yellow filter.</p> <p><a href="http://chrisredshaw.co.uk/"><img src="https://assets.econsultancy.com/images/0008/3075/Screen_Shot_2017-01-16_at_10.35.27.jpg" alt="chris redshaw" width="615" height="336"></a> </p> <h3>Evoluir</h3> <p style="font-weight: normal;">Evoluir's website isn't exactly to my taste, as it uses some tricksy scrolling and 'floaty' geometric shapes.</p> <p style="font-weight: normal;">However, the duotone backgrounds used are certainly impactful, conveying plenty of humanity without being too busy.</p> <p style="font-weight: normal;"><a href="http://evoluir.com.br/"><img src="https://assets.econsultancy.com/images/0008/3094/Screen_Shot_2017-01-16_at_10.01.48.jpg" alt="evoluir" width="615" height="336"></a></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/3095/Screen_Shot_2017-01-16_at_10.01.55.jpg" alt="evoluir" width="615" height="335"></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/3092/Screen_Shot_2017-01-16_at_10.02.03.jpg" alt="evoluir" width="615" height="334"> </p> <h3>LPK</h3> <p>Showcasing agency work can lead to slightly messy web design, as different logos and creative clash, whether on the same page or on a slider.</p> <p>LPK mitigates this effect by applying colour gradients, duotones and filters to its slider. I think it creates a high quality aesthetic with photography that might otherwise underwhelm.</p> <p><a href="https://www.lpk.com/"><img src="https://assets.econsultancy.com/images/0008/3085/Screen_Shot_2017-01-16_at_10.16.41.jpg" alt="lpk" width="615" height="336"></a></p> <p><img src="https://assets.econsultancy.com/images/0008/3084/Screen_Shot_2017-01-16_at_10.16.44.jpg" alt="lpk" width="615" height="341"></p> <p><img src="https://assets.econsultancy.com/images/0008/3083/Screen_Shot_2017-01-16_at_10.16.51.jpg" alt="lpk" width="615" height="341"> </p> <h3>Social Chain</h3> <p>Social Chain is a great example of an agency using simple duotone background images to give that 'print' feel to a basic hamburger and scroll website.</p> <p>The website's homepage goes further and uses duotone video of agency staff larking about, helping to paint the picture of a social agency that has fun.</p> <p><a href="https://www.socialchain.com/"><img src="https://assets.econsultancy.com/images/0008/3019/Screen_Shot_2017-01-12_at_12.27.16.png" alt="social chain" width="600" height="328"></a> </p> <h3>Host</h3> <p>A simple grid of squares makes a very cool navigational aid, especially painted in apple red with alternate squares carrying colour-filtered photographs of each city.</p> <p><a href="https://host-students.com/"><img src="https://assets.econsultancy.com/images/0008/3070/Screen_Shot_2017-01-16_at_10.49.46.jpg" alt="host students" width="615" height="341"></a></p> <p><img src="https://assets.econsultancy.com/images/0008/3069/Screen_Shot_2017-01-16_at_10.50.04.jpg" alt="host students" width="615" height="338"> </p> <h3>Andover Fork Truck Services</h3> <p>Who doesn't love a fork truck? And who doesn't love a splash of mint green?</p> <p>Andover Fork Truck Services livens up a perfectly serviceable black and white background image with some on-brand colouring.</p> <p><a href="http://www.andoverforktruckservices.co.uk/"><img src="https://assets.econsultancy.com/images/0008/3081/Screen_Shot_2017-01-16_at_10.29.51.jpg" alt="andover trucks" width="615" height="318"></a> </p> <h3>Coup de Coeur</h3> <p>A pink and red duotone used on homepage and across artist images perfectly complements the Coup de Coeur brand (which I think means 'crush').</p> <p><img src="https://assets.econsultancy.com/images/0008/3087/Screen_Shot_2017-01-16_at_10.08.45.jpg" alt="coup de coeur" width="615" height="340"> </p> <p><img src="https://assets.econsultancy.com/images/0008/3088/Screen_Shot_2017-01-16_at_10.08.19.jpg" alt="coup de coeur" width="615" height="342"></p> <h3>Internetum</h3> <p>An agency once again using a duotone to give an instant impression of mythic creativity.</p> <p><a href="https://www.internetum.com/"><img src="https://assets.econsultancy.com/images/0008/3080/Screen_Shot_2017-01-16_at_10.30.37.jpg" alt="internetum" width="615" height="319"></a> </p> <h3>Jargon Free Fridays</h3> <p>Duotone-tastic, these backgrounds give full force to the central message on the page.</p> <p><a href="http://jargonfreefridays.com/"><img src="https://assets.econsultancy.com/images/0008/3077/Screen_Shot_2017-01-16_at_10.32.46.jpg" alt="jargon free fridays" width="615" height="336"></a></p> <p><img src="https://assets.econsultancy.com/images/0008/3076/Screen_Shot_2017-01-16_at_10.32.48.jpg" alt="jargon free fridays" width="615" height="336"> </p> <h3>Das Bevo</h3> <p>With its jaunty autoplay sound and animated sails, this website for a windmill events venue is not everyone's cup of tea.</p> <p>I loved it, and not just for the colour filter applied to both windmill and moustachioed fella.</p> <p>Venue websites can often seem a little anaemic, failing to give a sense of fun - none such accusation here.</p> <p><a href="http://dasbevo.com/"><img src="https://assets.econsultancy.com/images/0008/3078/Screen_Shot_2017-01-16_at_10.31.50.jpg" alt="das bevo" width="615" height="338"></a> </p> <p><img src="https://assets.econsultancy.com/images/0008/3079/Screen_Shot_2017-01-16_at_10.31.38.jpg" alt="das bevo" width="615" height="333"></p> <h3>Daniel Marshall Architects</h3> <p style="font-weight: normal;">I love this website. DMA's projects scroll by in elegant grayscale, with a mouse rollover revealing them in vivid colours.</p> <p style="font-weight: normal;">Forgive me for not making a GIF, just click through and have a play yourself. A wonderful way to use an elegant restrained pallette whilst livening up browsing.</p> <p style="font-weight: normal;"><a href="http://dma.nz/"><img src="https://assets.econsultancy.com/images/0008/3090/Screen_Shot_2017-01-16_at_10.05.56.jpg" alt="dma" width="615" height="338"></a></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/3089/Screen_Shot_2017-01-16_at_10.05.58.jpg" alt="dma" width="615" height="336"> </p> <h3>Adison Partners</h3> <p style="font-weight: normal;">Another slider given some pep with a blue-purple filter.</p> <p><a href="http://www.adisonpartners.com/"><img src="https://assets.econsultancy.com/images/0008/3074/Screen_Shot_2017-01-16_at_10.44.28.jpg" alt="adison partners" width="615" height="334"></a></p> <p><img src="https://assets.econsultancy.com/images/0008/3073/Screen_Shot_2017-01-16_at_10.44.39.jpg" alt="adison partners" width="615" height="334"> </p> <h3>Transmeet</h3> <p>No colour here, but an interesting example of a video background in low-fi black and white.</p> <p>Though <a href="https://econsultancy.com/blog/67030-10-successful-homepages-that-show-the-trend-for-video-backgrounds/">video backgrounds are a divisive element</a> of homepage design, in this case the company is a video production company, and therefore this compromise makes a lot of sense.</p> <p>A quicker loadtime and less intrusive movement come from this stripped back video style. Clickthrough to view.</p> <p><a href="http://transmeet.tv/production/"><img src="https://assets.econsultancy.com/images/0008/3093/Screen_Shot_2017-01-16_at_09.59.23.jpg" alt="transmeet" width="615" height="337"></a> </p> <h3>Chunk</h3> <p>This Dutch agency uses neon colour gradients, giving the bold black header copy maximum punch.</p> <p><a href="http://chunk.nl/#!intro"><img src="https://assets.econsultancy.com/images/0008/3072/Screen_Shot_2017-01-16_at_10.45.31.jpg" alt="chunk" width="615" height="341"></a></p> <p><img src="https://assets.econsultancy.com/images/0008/3071/Screen_Shot_2017-01-16_at_10.45.38.jpg" alt="chunk" width="615" height="340"> </p> <h3>One Republic</h3> <p>I think this is some kind of band that the kids like. And why wouldn't they, given the band's website and its use of colour filters and gradients?</p> <p><a href="http://www.ohmymyexperience.com/"><img src="https://assets.econsultancy.com/images/0008/3067/Screen_Shot_2017-01-16_at_10.57.53.jpg" alt="one republic" width="615" height="338"></a> </p> <h3>Winter Capital</h3> <p>Winter Capital is another professional website that confers status with the use of black and white background images, this time using a subtle split-screen filter.</p> <p><a href="http://wintercapital.com/"><img src="https://assets.econsultancy.com/images/0008/3086/Screen_Shot_2017-01-16_at_10.12.34.jpg" alt="winter capital" width="615" height="340"></a> </p> <h3>Adaptable</h3> <p>Adaptive uses a dark blue filter on its header, with white text and white button sharply picked out.</p> <p><a href="http://weareadaptable.com/"><img src="https://assets.econsultancy.com/images/0008/3068/Screen_Shot_2017-01-16_at_10.50.24.jpg" alt="adaptable" width="615" height="338"></a> </p> <h3>Semu Design</h3> <p>Grey sophistication.</p> <p><a href="https://semu-design.at/"><img src="https://assets.econsultancy.com/images/0008/3066/Screen_Shot_2017-01-16_at_10.58.14.jpg" alt="semu design" width="615" height="336"></a> </p> <h3>Lipman Burgon</h3> <p>A simple black and white image gives Lipman Burgon &amp; Partners' website a veneer of gravitas.</p> <p><a href="http://lipmanburgon.com.au/"><img src="https://assets.econsultancy.com/images/0008/3091/Screen_Shot_2017-01-16_at_10.03.50.jpg" alt="lipman" width="615" height="339"></a>  </p> <h3>Motome</h3> <p>Another very subtle and simple way of jazzing up a page with one primary use and search field. The image doesn't have to be all-singing, all-dancing to make a difference.</p> <p><a href="https://www.motome.com.au/"><img src="https://assets.econsultancy.com/images/0008/3063/Screen_Shot_2017-01-16_at_11.02.33.jpg" alt="motome" width="615" height="339"></a></p> <h3>Owen O'Donell</h3> <p>Owen's site has one big call to action and a hamburger menu. The chunky text says it all, 'developer', and the black and white background lends some personality.</p> <p><a href="http://www.owenod.com/"><img src="https://assets.econsultancy.com/images/0008/3064/Screen_Shot_2017-01-16_at_11.01.29.jpg" alt="owenod" width="615" height="341"></a> </p> <h3>Chinatown London</h3> <p>The last of our black and white examples. A big header like this sets the tone before the user delves into detail, further down the scrolling homepage or in the header menu.</p> <p><a href="http://chinatown.co.uk/en/"><img src="https://assets.econsultancy.com/images/0008/3082/Screen_Shot_2017-01-16_at_10.17.59.jpg" alt="chinatown london" width="615" height="340"></a> </p> <h3>inherQuests</h3> <p>Pink for the win.</p> <p><a href="http://inherquests.com/"><img src="https://assets.econsultancy.com/images/0008/3065/Screen_Shot_2017-01-16_at_10.59.52.jpg" alt="inherquests" width="615" height="329"></a></p> tag:econsultancy.com,2008:BlogPost/68655 2017-01-10T14:23:00+00:00 2017-01-10T14:23:00+00:00 Cart abandonment emails: Creating content that maximises conversions Greg Randall <p>To drive revenue, the construction of cart abandonment emails requires more thought and planning in three key areas:</p> <ol> <li>Email layout</li> <li>The ideal content recipe</li> <li>Content hierarchy</li> </ol> <p>Before delving into the above let’s first understand the size of the problem.</p> <h3>Cart abandonment rates</h3> <p><a href="https://blog.salecycle.com/stats/infographic-remarketing-report-q3-2016/" target="_blank">SaleCycle produced a report in Q3 2016</a> which found the average abandonment rate from 500 leading global brands to be 74.4%:</p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/resized/0008/2559/screen_shot_2016-12-20_at_10.20.23_am-blog-flyer.png" alt="" width="470" height="250"> </p> <p>And for lots more stats, see this post: <a href="https://econsultancy.com/blog/63466-nine-case-studies-and-infographics-on-cart-abandonment-and-email-retargeting/">Nine case studies and infographics on cart abandonment and email retargeting</a>.</p> <h3>Consumer behaviour trends </h3> <p>Part of building more effective cart abandonment emails comes in a retailer’s better understanding and appreciation of today’s consumer, their behaviours, and what’s motivating him/her to take action.</p> <p>In the context of cart abandonment, there are two consumer shifts retailers should take notice of:</p> <ol> <li>How consumers engage with email content </li> <li>Behavioural shifts because of too much choice </li> </ol> <h3>How consumers engage with email content</h3> <p>In a <a href="https://econsultancy.com/blog/68437-10-of-the-best-digital-marketing-stats-we-ve-seen-this-week-2" target="_blank">recent survey of US consumers,</a> Mapp Digital found 72% of respondents regularly check their emails using a smartphone instead of a desktop or tablet. This figure rises to 91% for 18-24 year olds.</p> <p>Regardless of content relevancy, consumers are unlikely to engage with email content if it’s hard to read, has a poor layout, and the actions are unclear.  </p> <p>Here are some tips on what to consider when planning the layout for emails for smartphone screens:</p> <ol> <li>As a guideline, stick with a wide single column format.  </li> <li>Respect the “smartphone” fold. Be strategic in your content hierarchy. If the content above the fold is relevant, consumers are more likely to scroll down the page.</li> <li>Apply a large font.</li> <li>Ensure the images are large enough to be recognisable.</li> <li>Deliver white space to set off images and copy blocks.</li> <li>Ensure all calls-to-action are large “finger targets”.</li> <li>Ensure font and calls-to-action have strong contrast against the background. Email content will be viewed in environments with inconsistent and varied lighting. </li> </ol> <p>The detail behind this guidance can be found in Econsultancy's <a href="https://econsultancy.com/reports/the-fundamentals-of-email-marketing" target="_blank">The Fundamentals of Email Marketing 2016</a> report.</p> <h3>Consumer behavioural shifts from too much choice </h3> <p>Consumers can struggle to make decisions due to there being too much to choose from. <a href="https://www.thinkwithgoogle.com/articles/comparison-shopping-mobile.html" target="_blank">Two examples of what consumers face today</a> and how it affects their decisions: </p> <ol> <li>If a consumer wishes to purchase a scarf, they now have over 200,000 to choose from in Amazon.  </li> <li>In Christmas 2015, 7 out of 10 people received a Gift Card because of this inability to make a decision.</li> </ol> <p>Retailers can capitalise on the effort required to make a choice by <a href="http://www.marketingprofs.com/articles/2015/28858/how-to-use-heuristics-to-your-marketing-advantage" target="_blank">leveraging consumer “heuristics”</a>.   </p> <p>A “heuristic” is the consumer’s approach to problem solving that employs a practical method to help make a decision to assist in achieving a goal.  </p> <p>Essentially, heuristics are mental shortcuts consumers use to ease the cognitive load of making a decision.  </p> <h3>What is the “Best”?</h3> <p>The influence of too much choice combined with this development of “mental short cuts” can be seen in consumer search behaviours.  </p> <p>Consumers are now searching for “the best” of things - searches with “best” in the keyword phrase <a href="https://www.thinkwithgoogle.com/articles/comparison-shopping-mobile.html" target="_blank">have risen by 50% year on year</a>.  </p> <p>The question then becomes; what digital content, presented to consumers, contributes to having him/her think a product is "the best" amongst a large selection.</p> <p>There are <a href="https://www.thinkwithgoogle.com/articles/comparison-shopping-mobile.html" target="_blank">three primary content types:</a></p> <ol> <li> <strong>Customer reviews</strong>. In Christmas 2015, reading customer review content was one of the most popular actions consumers took while shopping online.  </li> <li> <strong>Highlighting best sellers.</strong> This is another influencer, which comes from the roots of peer review. If other people purchased a product, the inference is it must be good.  </li> <li> <strong>Presenting products in context</strong>. This is part of a merchandising strategy where retailers are helping consumers visualise the product adding value to him/her based on their need. 64% of women who shop for apparel agree seeing product images in context influences their purchase decision. </li> </ol> <p>While retailers work hard to apply these above content types on their site, there is a clear absence of this content in cart abandonment emails.  </p> <h3>Context: Why are consumers leaving? </h3> <p>Gaining an appreciation of why consumers are leaving assists in the planning to build effective cart abandonment emails.  </p> <p>The previously mentioned SaleCycle research analysed the most recent reasons consumers abandoned a purchase based on those same 500 global retailers:</p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/resized/0008/2560/screen_shot_2016-12-20_at_10.23.27_am-blog-flyer.png" alt="" width="470" height="306">  </p> <p>One key point to make on the above graphic is about the 23% leaving due to issues with shipping (cost/time).</p> <p>Don’t automatically assume this is a consumer leaving because the delivery time is too long, or the cost is too high. Many consumers leave because this content is not visible on the shopping cart page!</p> <p>For more on this topic, see this post on <a href="https://econsultancy.com/blog/64943-12-excellent-ways-to-present-ecommerce-shipping-information/">12 excellent ways to present ecommerce shipping information</a>.</p> <h3>The ideal content recipe</h3> <p>Now that we have a better understanding of behaviours and there is context as to why consumers are leaving, the focus turns to the content required to meet these varied needs.</p> <p>The content recipe can be broken down into two types: content that targets heuristics and content communicating support promises.</p> <h4>Take advantage of the heuristics: </h4> <p>This content helps persuade those consumers who are “just looking” or “researching”:</p> <ol> <li>Email subject title. Deliver a title that catches the attention of the consumer and presents a sense of urgency.</li> <li>Present a customer review (or multiple reviews) of the product. If the consumer is still in research mode, this content will help.   </li> <li>Present other content to help merchandise the product.  </li> <li>Emphasise the product is a best seller (only if it's true).</li> </ol> <h4>Delivering on a promise: </h4> <p>This content helps to de-risk the purchase and deals with the other reasons consumers may have abandoned the cart:</p> <ol> <li>Present delivery times, delivery options, and shipping costs.  </li> <li>Present <a href="https://econsultancy.com/blog/68677-how-10-ecommerce-sites-present-returns-policies/">returns content</a>. This content is highly sought after and contributes to online purchases.  </li> <li>Security symbol/message. Present a security symbol or message (“safe and secure shopping”) to deliver confidence.</li> <li>Support content. Offer contact information to the support team. Some consumers simply will not purchase online no matter how persuasive you may be. This content helps facilitate a purchase for this consumer type.</li> </ol> <h3>The email content hierarchy</h3> <p>It’s great to have a content recipe to facilitate the right actions, but the ordering of this content is crucial.  </p> <p>Once there is clarity on the right ranking of content, the email can be built and translated across all screen types.</p> <p>Below is an ordering of content based on importance and impact, and when it should be presented. This ordering is less important for desktop but crucial for smartphone screens:</p> <ol> <li>Brand – logo</li> <li>Header – main navigation</li> <li>Intro – in brand voice</li> <li>Call to action (above the fold)</li> <li>The product thumbnail and title </li> <li>Heuristic content (whatever form this takes)</li> <li>Delivery/returns/support content</li> <li>Security statement</li> </ol> <p>This ordering favours the heuristic content to persuade and satisfy the pain point of too much choice. Once satisfied, the support promises provide the assurances of getting the product in a reliable timely manner.</p> <p>Here are some great examples of real cart abandonment emails in action:</p> <h4>ASOS</h4> <p> <img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/0008/2561/email_asos.png" alt="" width="373" height="540"></p> <p>The ASOS email is very simple with messaging in the brand's voice ("Don't Forget About Me..") and clear messaging around free delivery and easy returns.</p> <h4>JOY</h4> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/0008/2562/email_joy.png" alt="" width="341" height="573"> </p> <p>JOY introduces alternatives to the product not purchased. This is a different approach to merchandising the feature product in a cart abandonment email and may have come from testing.</p> <h4>Doggyloot</h4> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/resized/0008/2563/email_doggyloot-blog-flyer.png" alt="" width="470" height="585"></p> <p>Doggyloot does a fantastic job of tugging at the emotional heart-strings of pet owners with this email.  </p> <p>It introduces urgency and uses great language to keep in brand, "Lots of licks, Your friends at doogyloot".</p> <h4>FAB</h4> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/resized/0008/2564/email_fab-blog-flyer.png" alt="" width="470" height="452"></p> <p>FAB is an example of multiple content recipe elements working together to prompt action:</p> <ol> <li>Great email title.</li> <li>"Free Shipping" and "Free Returns" content.</li> <li>A guarantee to further de-risk the purchase.</li> <li>Content reassuring the consumer the product in their cart is still on sale:  "Smile, it's still for sale".</li> <li>A contact phone number which immediately activates when on smartphone screens.</li> </ol> <p>These emails have their own reasons as to why they are great, but imagine the impact if there were customer reviews intermingled within the above examples. There is opportunity to do more.</p> <h3>In conclusion...</h3> <p>When considering putting more effort into cart abandonment emails, don't think about it as “capturing a sale”. Think about it from the perspective of the consumer and force yourself to ask the following questions:</p> <ol> <li>What information can I provide to help a potential customer feel confident enough this product is right for him/her?</li> <li>And if I can achieve this, is the action clear and obvious enough on the email for him/her to act?</li> <li>And, if I am fortunate in that the consumer is going to make the effort of coming back to my site, is the process to complete the purchase simple and obvious?</li> </ol> <p>Think like this and you can't go wrong. </p> tag:econsultancy.com,2008:BlogPost/68675 2017-01-05T13:51:48+00:00 2017-01-05T13:51:48+00:00 Five examples of meaningful motion in web design Ben Davis <p>I thought it would be useful to round up some examples of meaningful motion, so below are five examples which I've taken from Google's <a href="https://material.io/guidelines/motion/material-motion.html">Material Design guidelines</a>, as well as the Material Design Awards 2015 and 2016.</p> <p>There is a whole bunch of information in Google's guidelines - on duration and easing, movement, transforming material, choreography and creative customization - so do go and check it out. The following simply serves as a taster.</p> <p><em>And for more on this topic, check out these Econsultancy resources:</em></p> <ul> <li><a href="https://econsultancy.com/training/courses/mobile-user-experience-mobile-marketing/"><em>Mobile UX (User Experience) &amp; Marketing Training</em></a></li> <li><a href="https://econsultancy.com/reports/user-experience-and-interaction-design-for-mobile-and-web/"><em>User Experience and Interaction Design for Mobile and Web</em></a></li> </ul> <h3>First, what is motion in web design?</h3> <p>Google gives us <a href="https://design.google.com/articles/making-motion-meaningful/">a very poetic definition</a>, as it happens, stating that 'something as simple as tapping a card to expand and reveal more information is made better by fluid animation'. Some other salient points: </p> <ul> <li>'..the user is given guidance with a clear focal point.'</li> <li>'[Motion] conveys energy, drawing inspiration from forces like gravity and friction.'</li> <li>'..material design aims for motion to feel natural..'</li> <li>'..motion should above all else help guide users, providing them with the right information at the right time.'</li> </ul> <p>The following video from Google demonstrates some of the principles of Material motion. </p> <p><iframe src="https://www.youtube.com/embed/cQzien5H2Do?wmode=transparent" width="560" height="315"></iframe></p> <p>Now for the examples...</p> <h3>1. Google Photos</h3> <p>The animation when you delete photos feels incredible natural, but Google has not taken the literal approach here, as it points out in its guidelines.</p> <p>If every photo had slid along into the next position, 'overlapping motion paths' would have made the experience too messy. However, Google slides the whole grid to the left, for a smooth and simple transition.</p> <p><iframe src="https://www.youtube.com/embed/FXUW8qbbcHw?wmode=transparent" width="560" height="315"></iframe></p> <h3>2. Tumblr app</h3> <p>Tumblr's app was the recipient of a 2015 Google Design Award for the way in which it uses motion to unite users with content.</p> <p>There are smooth transitions, with 'layers of detail loading progressively' and pacing is determined by context.</p> <p>One design feature is the transformation of a button's icon when selected, with 'create post' icons transforming into a cancel action. The same technique is used in some Google services to transform menu icons into a back button, so users can return to a home screen.</p> <p><iframe src="https://www.youtube.com/embed/vYrBrbPVtMs?wmode=transparent" width="560" height="315"></iframe></p> <h3>3. 'Pesto'</h3> <p>This is actually <a href="https://material-adaptive.firebaseapp.com/pesto/app/index.html#/home">a demo</a> created by Google, which I've taken from its guidelines. It's a really clear example of how content blocks can simply transition when tapped.</p> <p><img src="https://assets.econsultancy.com/images/0008/2827/pesto_app.gif" alt="pesto" width="293" height="517"></p> <h3>4. Google Duo</h3> <p>Google Duo is a video-calling app that launched in August 2016. It was updated in December 2016, to improve video quality and allow easier signup, and could well challenge established video calling services in 2017.</p> <p>The video below shows a number of examples of motion, which Google says 'proved harder than expected' due to the spare nature of the interface, or what it calls 'the lack of connective tissue within the interface'.</p> <p>Durations are longer here, to ensure that transitions are meaningful, that the user knows what action they have performed.</p> <p><iframe src="https://www.youtube.com/embed/ydZEMOK2sIE?wmode=transparent" width="560" height="315"></iframe></p> <h3>5. Fabulous - Motivate Me</h3> <p>This app was awarded a 2016 Google Design Award with the judges praising 'crisp state transitions and pleasing goal completion animations'.</p> <p>There's a video of the app in action on its app store page. I can't embed it here, but you can <a href="https://youtu.be/zTRianAhsjE">watch it on YouTube</a>.</p> <p><img src="https://assets.econsultancy.com/images/0008/2822/fab.png" alt="fabulous app" width="615" height="335"></p> <p>Note that all these examples are apps, but that doesn't mean these principles aren't relevant to website design.</p> <p>With mobile data input now arguably more important than desktop, marketers should be discussing motion with their tech teams.</p> tag:econsultancy.com,2008:BlogPost/68659 2017-01-03T11:05:19+00:00 2017-01-03T11:05:19+00:00 Three reasons behind The White Company’s boost in profits Nikki Gilliland <p>So, in a year that saw the demise of BHS and American Apparel – what’s behind the White Company’s success?</p> <p>Here’s a bit of insight into what I think the business is doing right.</p> <h3>Knowing the customer</h3> <p>The White Company began when founder, Chrissie Rucker, was unable to find high quality and affordable white homewares on the high street.</p> <p>With the launch of The White Company, she aimed to give fellow interior lovers a slice of ‘affordable luxury’. Since then the brand has gone on to expand its range to clothing, home accessories, gifts and furniture.</p> <p>Unsurprisingly, given the motivation of its founder, The White Company prides itself on knowing exactly what its customers want.</p> <p>It has never wavered from its ‘white’ theme, only veering into cream or other ivory-like hues. And while its clean, crisp and elegant designs are far removed from the likes of <a href="https://econsultancy.com/blog/68372-how-cath-kidston-used-a-disney-tie-up-to-increase-its-customer-database/">Cath Kidston</a>, it shares a similar reputation for selling a lifestyle - not just a product.</p> <p>While a candle might just be a candle to some, to others the idea of a calm and peaceful home is also part of the appeal. Using storytelling to engage its consumers, everything from its slippers to its range of cashmere robes come with irresistible promises such as “before-bed bliss”.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">Don't get them just any socks, get them our extra-cosy Cashmere Bed Socks -&gt; <a href="https://t.co/FEdW24O0SK">https://t.co/FEdW24O0SK</a> <a href="https://t.co/6xs5AgrheN">pic.twitter.com/6xs5AgrheN</a></p> — The White Company (@thewhitecompany) <a href="https://twitter.com/thewhitecompany/status/810500181192044548">December 18, 2016</a> </blockquote> <h3>Fusing online and offline</h3> <p>The White Company’s chief executive Will Kernan recently commented that the company plans to "invest in enhancing our customers' experience through world-class new stores across the UK."</p> <p>It is this focus on the physical shopping experience which sets the brand apart, especially among fellow homeware giants like Ikea and Home Sense. In comparison to these other brands, its retail outlets are like an oasis of calm, designed to provide the kind of atmosphere you'd generally expect in a luxury or high-end store.</p> <p>Speaking about the visual nature of The White Company's stores, Chrissie herself has said that "some customers actually tell us they love it so much they often pop in just to calm down if they are having a bad day. We want it to be somewhere you love to spend time in, a bit like home really and somewhere you know you can trust the quality, advice and service."</p> <p>With this is mind, it might not be a surprise to hear that The White Company has opened seven more retail outlets in the past year. By translating its recognisable brand values into a physical experience, it has become one of the most inviting spaces on the high street.</p> <p><img src="https://assets.econsultancy.com/images/0008/2613/White_Company_store.JPG" alt="" width="760" height="473"></p> <h3>Tapping into demand</h3> <p>That being said, The White Company hasn't sidelined its ecommerce business.</p> <p>Another big reason behind its recent success has been in its expansion - not only in terms of physical stores in the UK, but also into the US online market. Seeing 'significant growth' in this area in the second half of the year, it has clearly been a shrewd move from the brand.</p> <p>Again going back to the customer experience, the brand has also been smart in how it has expanded its categories, introducing childrenswear and a line of fragrances into the mix.</p> <p>The White Company hasn't strayed too far from its origins, or its brand values for that matter. Starting life as a 12-page catalogue, it now runs at an impressive 130-pages, circulating an average of 10m copies in the UK alone each year.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">Thanks, The White Company for my Christmas brochure - so excited to receive it this morning! <a href="https://twitter.com/thewhitecompany">@thewhitecompany</a> <a href="https://twitter.com/hashtag/thewhitecompany?src=hash">#thewhitecompany</a> <a href="https://t.co/hEsfkMYy4e">pic.twitter.com/hEsfkMYy4e</a></p> — Coolcookingteacher (@Clueduponfood) <a href="https://twitter.com/Clueduponfood/status/789136310510424064">October 20, 2016</a> </blockquote> <p>With a dedication to giving consumers exactly what they want, it's easy to see why The White Company has generated such success.</p> <p><em><strong>Related reading:</strong></em></p> <ul> <li><strong><em><a href="https://econsultancy.com/admin/blog_posts/68659-three-reasons-behind-the-white-company-s-boost-in-profits/edit/Three%20reasons%20behind%20WHSmith%E2%80%99s%20boost%20in%20profits">Three reasons behind WHSmith’s boost in profits</a></em></strong></li> <li><strong><em><a href="https://econsultancy.com/blog/68568-three-reasons-behind-dominos-digital-sales-boost" target="_blank">Three reasons behind Dominos’ digital sales boost</a></em></strong></li> </ul> tag:econsultancy.com,2008:BlogPost/68660 2017-01-03T10:11:28+00:00 2017-01-03T10:11:28+00:00 A day in the life of... a full stack designer Ben Davis <p>Andrew comes from Pennsylvania, studied commercial art in high school, and graduated with a B.F.A. in Graphic Design from Montclair State University.</p> <p>Let's find out what he does every day (and remember to check out the <a href="https://jobs.econsultancy.com/">Econsultancy jobs board</a> if you are looking for new opportunities).</p> <h3>Please describe your job: What do you do?</h3> <p>To put it simply, I design, photograph, and develop content for the web, social media, and email.</p> <p>More broadly, the role of full stack designer indicates that I am capable of designing media for print and web, understand good UI/UX principles, know front-end development, and a whole lot in between.</p> <h3>Whereabouts do you sit within the organization? Who do you report to?</h3> <p>I work on the creative team at DX, along with other designers and developers. My boss is the head of design and development for the agency.</p> <h3>What kind of skills do you need to be effective in your role? </h3> <p>I work with a lot of software in my role, and it is always an advantage to know programs from Adobe Creative Cloud (Photoshop, Illustrator, etc). But in my experience, an even more invaluable skill is to be an agile learner.</p> <p>Technology and practices on the web change on a nearly daily basis, and one cannot hope to know every program and language out there.</p> <p>The best I can hope to do is remain flexible and able to grasp new ideas quickly.</p> <p><img src="https://assets.econsultancy.com/images/0008/2690/andrew_clark.jpg" alt="andrew clark" width="350"></p> <p><em>Andrew Clark</em></p> <h3>Tell us about a typical working day…</h3> <p>My schedule varies pretty widely from project to project.</p> <p>Typically I start a day by grabbing a cup of coffee and taking a seat at my computer to find out what lies in wait for me.</p> <p>I spend most days in Photoshop and Sublime Text. There’s also a lot of collaboration in my role. I spend a good deal of time in conversation with my creative team as well as the accounts team brainstorming content and execution strategies for various clients. </p> <h3>What do you love about your job? What sucks?</h3> <p>It is a blessing and a curse that my role covers so much creative territory. One minute I will be developing an email blast, then switch over to design a Facebook post, and then jump down to the studio for a photo-shoot.</p> <p>The blessing my job provides is that I can come to work and learn a new skill almost every day. There is always a new framework, code library, or photography secret that I can apply to what I make.</p> <p>The curse is that I have to rapidly switch my role (and mindset) from designer to developer to photographer and have to juggle it all, sometimes at once. That part requires some real focus and discipline. </p> <h3>What kind of goals do you have? What are the most useful metrics and KPIs for measuring success?  </h3> <p>The underlying goal that motivates all of my work is to produce the most beautiful, usable experiences the web has to offer. Everything I learn and practice is a means to achieving this goal. The more I learn, the more means I have to create the best work possible.</p> <p>For social media I find it most useful to follow the engagement generated from post content.</p> <p>There is a lot of noise on platforms like Facebook, Instagram, and Twitter, so finding a way to cut through that noise and engage those interested in a client’s brand can be tricky. It is the most difficult part of my job, but also the most rewarding.</p> <p><img src="https://assets.econsultancy.com/images/0008/2691/dx.png" alt="dx agency" width="615" height="290"></p> <p><em>DXAgency website</em></p> <h3>What are your favorite tools to help you to get the job done?</h3> <p>A lot of my work of late has been utilizing After Effects and it is quickly becoming my favorite program Adobe CC has to offer. Also, nothing beats a good, simple code editor and for that reason Sublime Text will always be a go-to standard. </p> <p>But software only takes you so far. Perhaps the largest unsung hero of my repertoire is a humble pen and notebook. It’s where I sketch all of my ideas, jot down to-dos, and make notes to aid my faulty memory. Without it I’d be lost. </p> <h3>How did you get started in the digital industry, and where might you go from here? </h3> <p>I fell in love with digital media and the web in college. I owe a debt of gratitude to one of my professors. He introduced me to designing and developing for the web, as well as giving me my first job in the industry at his studio.</p> <p>Moving forward I will strive to improve my design and development skills. That is and will always be a constant. As my multi-disciplinary experience turns into wisdom, I want to move into an all-encompassing role as a creative director.</p> <h3>Which brands do you think are doing digital well?</h3> <p>Bleacher Report quickly comes to mind. They create some dynamite content and have managed to tailor it to each social platform. They may have one of the best Twitter accounts on the web. </p> <p>Spotify is also another brand killing it in the digital space. I am constantly listening to music, and they have created a seamless multi-platform experience that works across my computer, phone, and television. That’s quite admirable. </p> <h3>Do you have any advice for people who want to work in the digital industry? </h3> <p>Google a lot.</p> <p><em><strong>Now read:</strong></em></p> <ul> <li><em><a href="https://econsultancy.com/blog/68600-10-sensible-web-design-trends-for-2017/">10 sensible web design trends for 2017</a></em></li> <li><em><a href="https://econsultancy.com/blog/68506-10-inspiring-examples-of-design-led-brands/">10 inspiring examples of design-led brands</a></em></li> </ul> tag:econsultancy.com,2008:BlogPost/68506 2016-12-19T11:00:00+00:00 2016-12-19T11:00:00+00:00 10 inspiring examples of design-led brands Ben Davis <p>Of course, there are plenty of design-led brands that don't interact with their customers via an interface, only through a product. The famous ones are easy to call to mind - Dyson, for example.</p> <p>Then, most interestingly, there are brands that are trying to digitally transform their businesses, such as in financial services. In many of these rapidly changing businesses design is starting to gain greater influence over business strategy.</p> <p>Having already tried to get the bottom of the theory around design thinking (<a href="https://econsultancy.com/search/?only=BlogPost&amp;q=design%20thinking">see previous articles</a>), I thought I'd round up some examples of brands that employ <a href="https://econsultancy.com/blog/68503-what-is-design-thinking/">design thinking</a>. Here are 10 of them...</p> <h3>1. Capital One</h3> <p style="font-weight: normal;">Capital One raised eyebrows back in 2014 when it acquired San Francisco design and UX consultancy Adaptive Path. This was (fairly obviously) Capital One's attempt to quickly bolster an internal <em>digital</em> design consultancy.</p> <p style="font-weight: normal;">Adaptive Path co-founder Jesse James Garrett wrote of the buyout, "You can see where this is going, right? Somebody came along who finally, truly, seemed to get it."</p> <p style="font-weight: normal;">He continued, "A company with a great culture that shares and values our intellectual curiosity and design sensibilities, that wants us to continue doing great work inside their organization, but also continue helping others do great work too, by fostering dialogue and teaching what we have learned."</p> <p style="font-weight: normal;">The following year, Capital One acquired another digital design firm, Monsoon, which specialises in product development. <a href="https://techcrunch.com/2015/07/08/capital-one-acquires-oakland-based-design-and-development-firm-monsoon/">Techcrunch reported</a> that this was partly an attempt at influencing culture.</p> <p style="font-weight: normal;">Sandeep Sood, co-founder of Monsoon, describes the company as an intentionally small team where individual ownership is the norm. “There’s very little centralized management…we let developers make design decisions on a daily basis. We expect it from them, in fact."</p> <p style="font-weight: normal;">So, over the past few years, Capital One has invested considerably in its design chops. View the company's <a href="http://www.capitalonelabs.com/#welcome">Labs website</a> and you'll see plenty of evidence of design-led culture, including the <a href="https://medium.com/@honkbopsax/design-fiction-that-is-not-yet-fact-de5e0288b45d#.lmx442d7p">obligatory Medium blog posts</a> that transparently discuss the brands appraoch to design and development.</p> <p style="font-weight: normal;">In 2013, Capital One appointed Scott Zimmer as its first head of design, and in 2016 <a href="http://www.capitalone.co.uk/media/press-releases/2016/capital-one-appoints-head-of-design.jsf">the brand appointed a head of design</a> in the UK team, Aline Baeck, who moved from eBay's design team.</p> <p style="font-weight: normal;">We can get a good idea of Capital One's burgeoning design culture through InVision's <a href="https://econsultancy.com/blog/68501-a-day-in-the-life-of-vp-marketing-of-a-product-design-platform/">Clair Byrd</a> and her <a href="http://blog.invisionapp.com/inside-design-capital-one/">interview with </a><a href="http://blog.invisionapp.com/inside-design-capital-one/">Ryan Page,</a> Capital One's head of design for card partnerships.</p> <p style="font-weight: normal;">Ryan says "Designing with a human perspective is key to developing a human strategy. To develop a strategy in the absence of a strong human need or a perspective on how real people see the world, well, that’s a strategy that won’t be as powerful as it might be if it’s created in collaboration with design."</p> <p style="font-weight: normal;">He continues, "We’re not saying design should create strategy by itself—we think design should be a co-creation between design, engineering, and the business. You can’t move forward without business value, but if the business value doesn’t prioritize human desirability, then we’d certainly feel like that strategy isn’t going to be as successful as it could long term."</p> <p><img src="https://assets.econsultancy.com/images/0008/1629/Screen_Shot_2016-11-18_at_14.00.20.png" alt="capitalone labs" width="615" height="340"></p> <h3>2. Airbnb</h3> <p>Airbnb was founded by two designers (Joe Gebbia and Brian Chesky) and there has been lots of coverage of its community focused approach.</p> <p><a href="https://ageofdesign.designweek.co.uk/">Age of Design</a>, a recent series by Design Week, includes a documentary shot in the Airbnb offices in which Joe Gebbia discusses the creation of a design-led business (watch below).</p> <p>Each project team at Airbnb incudes a project manager whose explicit role is to represent the customer.</p> <p>Though customer focus may seem like a banality, its value has been proven by digital unicorns. Writing eloquently for the Age of Design series, <a href="https://ageofdesign.designweek.co.uk/data-and-design-transforming-the-travel-industry/">Amanda Gosling</a> describes how digital disruption has provided 'the digital capability to match an individual who needs a service with another individual who can provide one.'</p> <p>This means, she continues, that 'organisations are shifting away from focusing on products and services to instead focus on the what the consumer needs holistically'. This is why design must now impact on business strategy.</p> <p><iframe src="https://player.vimeo.com/video/162992287?byline=0&amp;portrait=0" width="640" height="360"></iframe></p> <h3>3. Square</h3> <p>Square offers products that are easy to use and understand; this focus on simplified functionality comes squarely (ahem) from design thinking.</p> <p>In a talk at Stanford on the role of CEO as editor, Square founder and CEO Jack Dorsey puts it thus: “We have all these inputs, we have all these places that we could go…but we need to present one cohesive story to the world.”</p> <p>Square has improved the hardware and software that small businesses use for payment processing, as well as the entire user experience.</p> <p>Predictably, other companies followed, producing similarly focused products that better satisfy user needs.</p> <p><em>Square Cash app</em></p> <p><img src="https://assets.econsultancy.com/images/0008/1632/cash1.jpeg" alt="square cash" width="300">  <img src="https://assets.econsultancy.com/images/0008/1633/cash2.jpeg" alt="square cash" width="300"></p> <h3>4. GE</h3> <p>GE has been <a href="https://econsultancy.com/blog/68350-digital-transformation-in-a-b2b-giant-jp-morgan-ge/">transforming into a digital industrial company</a> for the past four to five years.</p> <p>There's a slide in <a href="http://www.slideshare.net/GrowConf/2-greg-petroff">a 2013 presentation</a> by Greg Petroff, chief experience officer at GE, that neatly encapsulates the role of design for any company that brings products to market.</p> <p><img src="https://assets.econsultancy.com/images/0008/1634/design_slide.png" alt="design" width="615" height="505"></p> <p>GE's transformation has seen it move from selling industrial engineering to packaging it together with wraparound services, using its Predix data platform.</p> <p>This transition to services means the company has had to focus more on customer needs than ever. To that end, GE set up its own design and UX studio.</p> <p>“The demand for user experience (UX) and design within GE is growing,” says Greg Petroff.</p> <p>“UX is a profession that’s really about understanding how people work – understanding their context and finding out what they’re trying to accomplish. Gaining this empathy for our users helps us develop novel solutions that enable them to accomplish their goals more quickly.”</p> <p>Designers and developers work side-by-side, building and testing to help bring clarity to the data and analytics now available to customers.</p> <p><iframe src="https://www.youtube.com/embed/WPdP95yAggY?wmode=transparent" width="560" height="315"></iframe></p> <h3>5. Netflix</h3> <p><a href="http://www.forbes.com/sites/chunkamui/2011/03/17/how-netflix-innovates-and-wins/#4a586578b69a">According to Forbes</a>, even as far back as 2001, Netflix founder Reed Hastings was spending $10m a year on research into streaming.</p> <p>That is as good a fact as any to show just how design driven and customer driven Netflix is. The same article puts Netflix's design-led approach down to four rules:</p> <ul> <li>Think Big - Netflix wasn't afraid of disrupting its existing DVD delivery business</li> <li>Start Small - The company didn't rush headlong into a new product, until the time was right</li> <li>Fail Quickly - Early attempts at streaming were abandoned. Know when to fold your hand</li> <li>Scale Fast - Netflix has done this by quickyl moving into original content, putting pressure on networks</li> </ul> <p>We're all familiar with <a href="https://econsultancy.com/blog/68457-how-netflix-became-the-most-loved-brand-in-the-uk/">the excellence of Netflix's platform</a> - card design, AI-led recommendations, great UX - but Netflix's design-led approach is more than digital design. It encompasses partnerships across the entire customer audio-visual journey.</p> <p><a href="https://www.linkedin.com/pulse/design-thinking-find-your-netflix-moment-haydn-sallmann">A post on LinkedIn</a> by Haydn Sallmann demonstrates this, highlighting the way a friend was turned from DVDs to Netflix after discovering the Netflix button on the remote for his new internet-enabled DVD player.</p> <p>There is even evidence of Netflix's focus on customer experience in their more fun and gimmicky marcomms. For the release of the new Gilmore Girls series, Netflix produced a binge candle, which releases a different scent every 90 minutes to coincide with each episode.</p> <p><iframe src="https://www.youtube.com/embed/-Kz86WpTM60?wmode=transparent" width="560" height="315"></iframe></p> <h3>6. Virgin Atlantic </h3> <p>Virgin Atlantic has a reputation for value and for a brand that comes with a certain nod and a wink, a vibrancy that you don't see from other airlines.</p> <p>As <a href="http://www.digitalartsonline.co.uk/features/creative-business/why-design-led-companies-do-better-in-business/">Lee Coomber puts it</a>, 'a committment to having fun and absolutely knowing its customer.'</p> <p>'This can be seen in the end-to-end customer experience: from the way the cabin crew chats with customers to the on-board bar, designed purely to facilitate that conversation; or from seat design and the edgy safety film to advertising and airline lounges.'</p> <p>Luke Miles is head of design, leading a multidisciplinary team that covers service design, industrial design and brand design.</p> <p>Back in 2012, <a href="https://www.designweek.co.uk/issues/may-2012/how-to-build-a-design-led-brand/">he told Design Week</a> "The team has two critical roles. The first is to finely craft the customers’ end-to-end experience through the physical, digital and service realms. This spans multiple touch-points, from the experience of one of our global clubhouses to a glass on-board."</p> <p>"The design team are not only responsible for all project work, but are also tasked with ensuring the overall experience is joined up and well-curated. This involves taking projects right from inception, through to final launch and also to review the product life cycle."</p> <p>"The second concerns brand guardianship. Importantly this element is both internal and externally facing and focuses on the culture of the organisation and how this links to the external experience of our customers."</p> <p>A pretty succinct definition of the function of a design team, I think you'll agree.</p> <p>Another Virgin airline, Virgin America produced arguably <a href="https://econsultancy.com/blog/65065-30-little-things-i-love-about-the-new-virgin-america-website/">the most noteworthy website and booking service of 2014</a>. The site included fun imagery and animation, streamlined user experience, and a bold look - this made booking tickets not only easier (fewer mistakes) but also less painful.</p> <p><em>Virgin America</em></p> <p><img src="https://assets.econsultancy.com/images/resized/0004/9535/cards-blog-full.png" alt="virgin america" width="615" height="351"></p> <h3>7. O2</h3> <p style="font-weight: normal;">O2 has a Customer Centred Design (CCD) team, set up in 2013 to provide a structure and process for service design.</p> <p style="font-weight: normal;">The CCD team brings together different departments in visioning, crystallising and prove-it stages, before full product development is embarked upon.</p> <p style="font-weight: normal;">As described by O2's CMO (in the Design Council's <a href="http://www.designcouncil.org.uk/resources/report/leading-business-design">Leading by Design</a> report), design at the company “is not about the look and feel. It is about being deliberate.”</p> <p style="font-weight: normal;">Collaboration and iteration are important tenets of the CCD approach, which extends to finding the simplest commercial models for new products and services.</p> <p style="font-weight: normal;">Fruit borne by the CCD includes the My O2 app, shown below.</p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/2167/myo2.jpeg" alt="my o2 app" width="350"></p> <h3>8. IBM</h3> <p>“There’s no longer any real distinction between business strategy and the design of the user experience.”</p> <p>That's what Bridget van Kralingen, senior vice president of IBM Global Business Services, has previously stated in the press and it's a fantastic quote.</p> <p>As IBM has a history of design ('good design is good business'), provides design services, and is investing $100m in building a design-led organisation, you'd expect it to be eating its own dog food, and indeed it is.</p> <p>Phil Gilbert, general manager of design at IBM, has discussed the company's approach on his blog, saying that 'Design is everyone’s job. Not everyone is a designer, but everybody has to have the user as their north star.'</p> <p>This focus is evident in IBM's training of its staff, with 100,000 taking part by the end of 2016. Designers have been tripled since 2013, now numbering 1,300.</p> <p>As <a href="http://qz.com/755741/ibm-is-becoming-the-worlds-largest-design-company/">Quartz points out </a>in an article on the brand's restructuring, IBM now also employs design researchers - 'formally trained ethnographers with MFA degrees to probe how their solutions are working in the real world'.</p> <p>A collaborative and group meeting-based culture has been forged, with an emphasis on transparency. Gilbert has also stated that IBM had to revamp its internal systems, moving to collaborative platforms such as GitHub, Slack, and MURAL.</p> <p><img src="https://assets.econsultancy.com/images/resized/0008/2183/ibm-blog-flyer.jpg" alt="ibm" width="470" height="264"></p> <h3>9. Barclays</h3> <p>Though banks haven't traditionally been associated with design culture, they have adapted quickly to changes in the media habits of their customers.</p> <p>Barclays, alongside some digital-first startup banks like Mint, is arguably recognised as one of the leaders of digital transformation in retail banking.</p> <p>Barclays mobile banking has a net promoter score of +62, with a banking app and a transfer app (Pingit) that have garnered considerable praise.</p> <p>For some time now, the bank has had a chief design officer and an in-house design department that brings together business, technology and control to focus on customer needs. <a href="https://medium.com/digital-experience-design/what-s-the-value-of-design-for-businesses-here-are-hard-facts-3c6b2d93b730#.sifjg7mxu">In a post on Medium,</a> Daniel Santos highlights how circumstances have dictated this focus:</p> <p>"The financial crisis and the increased tight regulation keep challenging the banking sector. This forced banks to think more out of the box and being more creative about their services and products."</p> <p>"Barclays reframed these circumstances as opportunities to connect with customers and their needs."</p> <p><em>Pingit</em></p> <p><img src="https://assets.econsultancy.com/images/0008/2199/pay.jpeg" alt="pingit" width="340"></p> <h3>10. PepsiCo</h3> <p>In 2012, PepsiCo CEO Indra Nooyi appointed Mauro Porcini (formerly 3M) as Pepsi’s first chief design officer, with a growing team based in Soho, New York.</p> <p>Nooyi <a href="https://hbr.org/2015/09/how-indra-nooyi-turned-design-thinking-into-strategy">told the Harvard Business Review last year</a> that design thinking is now driving innovation within the company and is ensuring that "products look like they’re tailored to the right cohort groups."</p> <p>This means rethinking snacks for women, for example, including a stacked crisp that comes in a plastic tray so they can be eaten easily and cleanly and don't have to be consumed in one visit. They're also less noisy to eat.</p> <p>Pepsico has also been pushing a test and learn approach in the Japanese and Chinese markets. In Japan, the Pepsi brand has introduced new versions and flavours (such as cucumber), which, if they don't sell well, can be withdrawn after three months - an approach that may be brough to the US market.</p> <p>Nooyi speaks to HBR about the challenge of creating a culture of design across such a large organisation:</p> <p>"In the past, being decentralized was our strength, but also our weakness. It’s a fine approach when the whole world is growing and life is peachy. But it doesn’t work when things are volatile globally and you need coordination."</p> <p>"We’ve given our people 24 to 36 months to adapt. I told everyone that if they don’t change, I’d be happy to attend their retirement parties."</p> tag:econsultancy.com,2008:BlogPost/68600 2016-12-13T10:11:00+00:00 2016-12-13T10:11:00+00:00 10 sensible web design trends for 2017 Ben Davis <p>Ignore all the web design trends pieces that tip their hats to virtual reality or to eye-catching animation; 2017 is about utilitarianism.</p> <p>Here are the 10 trends I think will be most noticeable, and for more on this topic check out these resources:</p> <ul> <li><a href="https://econsultancy.com/reports/conversion-rate-optimization-report/">Conversion Rate Optimization Report 2016</a></li> <li><a href="https://econsultancy.com/training/courses/topics/ecommerce/">Ecommerce training courses</a></li> <li>Best Practice Guide on <a href="https://econsultancy.com/reports/user-experience-and-interaction-design-for-mobile-and-web/">User Experience and Interaction Design for Mobile and Web</a> </li> </ul> <h3>1. Fewer menu options</h3> <p style="font-weight: normal;">2016 saw many websites redesigned with reduced primary navigation options. This will likely become a big trend in 2017.</p> <p style="font-weight: normal;">Header menus that previously presented 5-7 options may reduce this to 3-4.</p> <p style="font-weight: normal;">The reason is one of mitigating choice paralysis, something summed up in a <a href="https://econsultancy.com/blog/68602-brand-commerce-navigating-through-online-customer-indecision/">recent Econsultancy article by Michael Sandstrom</a>. Fewer choices guide the user more easily to what they are looking for.</p> <p style="font-weight: normal;">Ikea is a great example. Compare its recent redesign with the old one, below.</p> <p style="font-weight: normal;"><em>Ikea's 'old' website</em></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/2132/Screen_Shot_2016-12-06_at_11.37.35.png" alt="ikea old website" width="615" height="484"></p> <p style="font-weight: normal;"><em>Ikea's 2016 redesign</em></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/2063/IKEA_Customer_Indecision.png" alt="ikea website" width="615"></p> <h3>2. Bye bye, hamburger</h3> <p>Whilst we're on menus, let's wave goodbye to the hamburger. Yes, it neatly tucks away all your menu <a href="https://www.merriam-webster.com/dictionary/gubbins">gubbins</a>, but users often do not recognise the symbol.</p> <p>More importantly perhaps, hamburger menus disguise the depth and breadth of your website or app. Users are left with no orientation; out of sight, out of mind.</p> <p>Spotify has <a href="https://techcrunch.com/2016/05/03/spotify-ditches-the-controversial-hamburger-menu-in-ios-app-redesign/">got rid of the hamburger menu</a> on its app, a clear sign of things to come.</p> <p><em>Spotify has been visited by the Hamburglar</em></p> <p><img src="https://assets.econsultancy.com/images/0008/2135/spotify.png" alt="hamburger gone" width="350" height="622"></p> <h3>3. Duotones</h3> <p>Do a Google Image search for 'duotone examples' and you'll recognise the technique and plenty of the examples.</p> <p>Below, I've included a screenshot of Capital One Labs, which uses the effect to perk up its homepage.</p> <p>Duotones are used to find a balance between a minimal and a busy or distracting website. Imagery can be included this way, without pulling the eye away from key messaging or navigation, or indeed obscuring them.</p> <p>Expect to see more duotone imagery taking the place of higher resolution hero backgrounds, or used to bring consistency when several images are displayed.</p> <p><img src="https://assets.econsultancy.com/images/0008/1629/Screen_Shot_2016-11-18_at_14.00.20.png" alt="capital one labs" width="615" height="340"></p> <h3>4. 'Tactile' design</h3> <p>Google has further defined its <a href="https://econsultancy.com/blog/65966-what-is-material-design-10-pioneering-examples/">Material Design</a> approach this year (it calls the Material Design guidelines a 'living document'), and 2017 may see many web designers following Google's lead.</p> <p>In short, Material Design has many of the traits of flat design (bold, graphic, with plenty of colour) but uses material as a metaphor; therefore it includes tactile attributes such as surfaces and edges, as well as rationalized space.</p> <p>The aim is to conceive a 'unified experience across platforms and device sizes'. It's all about UX.</p> <p>Head over to the <a href="https://material.google.com/#introduction-principles">Material Design pages</a> to read more of Google's rationale behind the project, or go to <a href="https://material.uplabs.com/">materialup</a> to see lots of examples of websites and apps using Material Design.</p> <p><img src="https://assets.econsultancy.com/images/0008/2142/Screen_Shot_2016-12-06_at_12.13.19.png" alt="material design" width="615" height="264"></p> <h3>5. Bye bye, parallax scrolling</h3> <p style="font-weight: normal;"><a href="https://econsultancy.com/blog/9582-14-fantastic-scrolling-websites-that-tell-a-story/">Parallax scrolling</a> is the epitome of design trends that aim to impress rather than serve.</p> <p style="font-weight: normal;">These experiences make use of background and foregrounds that scroll at different speeds, which appears to add depth to the page.</p> <p style="font-weight: normal;">You can see a relatively subtle use of the effect on <a href="http://www.firewatchgame.com/">Firewatchgame.com</a>, which uses parallax in the hero image at the top of the page.</p> <p style="font-weight: normal;">For a more involved example, see <a href="http://alfredservice.com/">AlfredService.com</a>. Many of these sites use 'scrolljacking', a feature that particularly annoys/confuses some users (where the scroll of your mouse does not correspond accurately with the movement of the page).</p> <p style="font-weight: normal;">The downsides of parallax experiences, aside from confusing the user, include increased load times and poor <a href="https://econsultancy.com/training/courses/topics/search-marketing/">SEO</a> (if most of the site is graphics).</p> <p style="font-weight: normal;"><a href="https://econsultancy.com/blog/67308-15-crucial-web-design-trends-for-2016-beyond/">In 2016, I argued</a> that animation may be a way to stand out amongst the crowd of increasingly standardised websites, but this year's focus on performance has shown parallax scrolling is too intrusive.</p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0008/2146/Screen_Shot_2016-12-06_at_14.26.14.png" alt="firewatchgame" width="615" height="339"></p> <h3>6. Meaningful motion</h3> <p>One of the principles of Material Design is 'motion provides meaning'. Though I think we'll see the back of animation for animation's sake (parallax), there is a case for the improvement of motion in web pages and apps.</p> <p>Google puts it well, saying that motion should be 'meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.'</p> <p>Have a browse through <a href="https://www.android.com/">Android's website</a> and you'll see some examples:</p> <ul> <li>The way that text flexes as it swings in on the main carousel.</li> <li>The way the carousel indicates you have gone full circle.</li> <li>The way images slide in as you select a dynamic menu option (OS devices).</li> </ul> <p>Though it was released back in 2015, Tumblr's app is another good example, winning a Material Design award for animation last year.</p> <p><iframe src="https://www.youtube.com/embed/vYrBrbPVtMs?wmode=transparent" width="560" height="315"></iframe></p> <h3>7. Bye bye, crappy stock imagery</h3> <p>We are now at the point where the availability of high quality imagery, alongside the user-centric mantra of companies undergoing <a href="https://econsultancy.com/training/digital-transformation/">digital transformation</a>, leaves no place for crappy, unrepresentative and unimaginative stock imagery.</p> <p>Company websites should be inviting and should reflect the values of the business. That is not possible with image such as...</p> <h3><img src="https://assets.econsultancy.com/images/0008/2148/girl_apple.jpg" alt="stock image" width="615" height="410"></h3> <h3>8. Fewer apps, more PWAs? </h3> <p>App-inspired web design got quite a bit of attention in 2016, with the development of several high profile <a href="https://econsultancy.com/blog/68601-what-are-progressive-web-apps-pwas/">progressive web apps</a> (PWAs).</p> <p>PWAs take advantage of HTML5 browser technology and advances in JavaScript to cache an 'app shell' on first visit, and allow offline functionality as well as push notifications and a home screen icon.</p> <p>There are many advantages of PWAs over lengthier app development, and we may see more follow in the footsteps of The Washington Post, Airberlin and Flipkart.</p> <p><img src="https://assets.econsultancy.com/images/0008/2090/pwa.png" alt="pwa" width="350"> </p> <h3>9. Google Fonts</h3> <p>The open source library of fonts was created by Google in 2010.</p> <p>In 2016, as Google continued to work on Material Design, it also revamped the <a href="https://fonts.google.com/">Google Fonts service</a>.</p> <p>Previewing fonts is quicker and easier, including the ability to preview fonts on a whole swatch of background colours. It's also easier to configure fonts, and Google highlights Featured Fonts that it feels are well suited to Material Design.</p> <p>Interestingly, Google has also developed a free font called Noto, designed to bring a cohesive visual language to 800 different languages (read the full story <a href="https://www.wired.com/2016/10/meet-noto-googles-free-font-800-languages/">via Wired</a>), so that there will be a continuity when changing language settings or juxtaposing scripts.</p> <p>Expect more designers to investigate Google Fonts in 2017.</p> <p><img src="https://assets.econsultancy.com/images/0008/2156/Screen_Shot_2016-12-06_at_15.09.08.png" alt="google fonts" width="615" height="321"></p> <h3>10. Minimalism</h3> <p>This trend encapsulates many of the others on this list. Minimalism means an emphasis on performance (speed) and uncluttered UX.</p> <p>To some extent, the trend was started by the move to responsive websites, which not only need to be clear on a mobile screen, but have also encouraged scrolling, meaning users don't expect all content to be jammed above the fold.</p> <p>Typograhy, contrast and space are all important.</p> <p><em>So, those are the 10 web design trends to look out for in 2017. Let us know if you disagree.</em></p> tag:econsultancy.com,2008:BlogPost/68521 2016-12-09T10:07:28+00:00 2016-12-09T10:07:28+00:00 How to create a culture of design in your organisation Ben Davis <h3>Three levels of design</h3> <p>The Design Council report <a href="http://www.designcouncil.org.uk/resources/report/leading-business-design">Leading Business by Design</a> defines three levels of design within the organisation.</p> <p><strong>1. Design as a service</strong></p> <p>Design is treated as an organisational function. It is a service to be called upon when technical experts are needed to fulfill pre-defined tasks.</p> <p><strong>2. Service design</strong></p> <p>Design is crucial in the product/service development process and designers are involved from beginning to end.</p> <p>Design will have an equal footing alongside other teams such as marketing. Obviously, this represents a step up from design as a service, and is a more strategic role.</p> <p><strong>3. Strategic design</strong></p> <p>Design shapes business strategy and designers may act as process leaders (for example in product development).</p> <p>There is no one defined method of integrating strategic design, so let's look at how some design-led companies have managed it...</p> <h3>Organisational structure and company culture </h3> <p>Nathan Sinsabaugh in his <a href="https://www.wired.com/insights/2015/03/design-led-companies-work-not-without-designers/">2015 Wired article about design</a> states that 'design ends up looking a lot like corporate culture; different everywhere'.</p> <p>As we've discussed previously, there are some parallels with <a href="https://econsultancy.com/training/digital-transformation/">digital transformation</a>, in that one of the main challenges for design is how to best structure the organisation to take advantage (and to adopt a design culture).</p> <p><strong>Dispersed designers</strong></p> <p>Dispersing designers around the company across various different teams can lead to disjointed projects, as different designers bring slightly different ideas to the table.</p> <p>This inconsistency can be tackled with a monomaniacal focus on design standards, something that Google achieves with <a href="https://design.google.com/">Material Design</a>.</p> <p>In Google's words, Material Design was created 'as a metaphor to rationalize design and implementation, establishing a shared language to help teams unite style, branding, interaction, and motion under a cohesive set of principles'.</p> <p><iframe src="https://www.youtube.com/embed/jE1EU1ACe6s?wmode=transparent" width="560" height="315"></iframe></p> <p><strong>The internal design consultancy </strong></p> <p>The internal design consultancy can be thought of as analogous to the digital centre of excellence (detailed as a mid-point of sorts in digital transformation models).</p> <p>These consultancies will tend to be dedicated to larger projects, with details left to unguided product teams.</p> <p>There are many companies that take this approach and it's most noticeable amongst those in the throes of major new product design, such as Hive, which may create a separate design team.</p> <p>Barclays and Reckitt Benckiser are two companies <a href="http://www.designcouncil.org.uk/resources/report/leading-business-design">identified by the Design Council</a> as having recently established design departments and processes.</p> <p>Barclays' Chief Design Officer tells the Design Council that “marketing officially owns and protects the brand, but we work intimately with them to ensure that our design language, our design thinking, our design process fits intimately with the overall brand at Barclays”.</p> <p>The bank has also set up new office space for the design team with ‘hoppers’ (tables) 'being utilised to bring together people assigned to a project, for example, a designer, a business analyst, an operations or a technology person, and a program manager.'</p> <p>Reckitt Benckiser uses a strategy of ‘innovation marketing’ (combination of increased marketing spending and product innovation, focusing on consumer needs).</p> <p>This innovation marketing involves a design department established in 2008 whose aims are 'improving brand recognition, cost effectiveness in the supply chain and overall strengthening of existing brands'.</p> <p><strong>Defacto user advocacy</strong></p> <p>The most famous design-led business is probably Apple. It gets its fame from the quality of its products, its success, but chiefly through the cultural zeal for design.</p> <p>Every employee is a defacto user advocate (this is simply the company culture) and Jony Ive manages design from the top. This is institutionalised design.</p> <p>But how to just make every employee a user advocate, without the years of embedded culture that Apple has?</p> <p>In <a href="https://www.wired.com/2015/01/airbnbs-new-head-design-believes-design-led-companies-dont-work/">a Wired interview</a>, Airbnb's Head of Design Alex Schleifer and CEO Brian Chesky discuss how design culture is less important than understanding the user viewpoint.</p> <p>Every Airbnb project team has a project manager whose explicit role is to represent the user (and not design or marketing or engineering).</p> <p>Schleifer says: “This structure creates points where different points of view meet, and are either aligned or not.”</p> <p>As Sinsabaugh puts it: 'Designers tend to design for themselves, whether they intend to or not. User research, meanwhile, often has limits. A true user perspective is something more nuanced, specific, intuitive, and independent.'</p> <h3>Designer as ethnographer</h3> <p>Ultimately, a designer should be a <a href="http://idealog.co.nz/venture/2008/10/become-design-led">constant ethnographer</a>, and this demands moving from products to experiences, and from short-term metrics to lifetime customer value.</p> <h3>In summary</h3> <p>Design thinking needs a sponsor, which for digital unicorns is increasingly the business founder themselves.</p> <p>Beyond that, organisations need to find the best way to incorporate design thinking, user perspectives, leadership and consistency.</p> <p>For many companies, like Barclays, this means a strengthened design team that influences an increasing number of projects, if not yet every brand detail and interaction.</p> <p><em><strong>Read the other posts in this series:</strong></em></p> <ul> <li><a href="https://econsultancy.com/blog/68503-what-is-design-thinking/">What is design thinking?</a></li> <li><a href="https://econsultancy.com/blog/68509-why-is-design-thinking-suddenly-so-important/">Why is it so important?</a></li> <li> <a href="https://econsultancy.com/blog/68510-how-can-marketers-apply-design-thinking/">How can marketers apply it</a>?</li> </ul> tag:econsultancy.com,2008:BlogPost/68510 2016-12-07T09:57:29+00:00 2016-12-07T09:57:29+00:00 How can marketers employ design thinking? Ben Davis <p>The Design Council's <a href="http://www.designcouncil.org.uk/resources/report/leading-business-design">Leading Business by Design</a> report offers some valuable strategic advice (which I have abridged and added to here) on how design thinking is managed.</p> <p>Much of the implementation of design thinking is relevant to the challenges of <a href="https://econsultancy.com/training/digital-transformation/">digital transformation</a> (see my previous article - <a href="https://econsultancy.com/blog/68509-why-is-design-thinking-suddenly-so-important/">Why is design thinking suddenly so important?</a>).</p> <p>So, what should marketers bear in mind?</p> <h3>Understand where design can be applied</h3> <p>Much as design can be <em>owned</em> at different levels of the business hierarchy (depending on the design maturity of a business), design can also be <em>applied</em> with differing degrees of perspective.</p> <p>That means design thinking is just as likely to influence branding as it is market-expanding innovation or product differentiation.</p> <p>In the aforementioned Design Council report, understandably a correlation is made between a more strategic business use of design, and a greater business benefit.</p> <p>The context of design need not be limited - it can apply to working practices, as much as a physical product.</p> <h3>Be customer-centred</h3> <p>We've already heard about companies with customer officers or representatives. Design and marketing should work together to solve customer problems, which in turn should generate revenue.</p> <p>A focus on the aesthetics, functionality and usability of products and services should always be through the lens of the customer.</p> <p>Design requires empathy, which demands a real understanding of customer pain points, needs, expectations, language and knowledge.</p> <p>A great design means nothing if the customer doesn't need, want or understand it.</p> <h3>Collaborate internally and externally</h3> <p>Design thinking requires collaboration between traditional teams or departments, as well as collaboration with the customer.</p> <p>Internal dialogue and teamwork is a conduit for creativity, allowing colleagues with different skillsets to work on a problem together, rather than in isolation.</p> <p>The same goes for customers. Though we've already discussed customer-centricity, it's important that customers are involved in the validation of ideas.</p> <p>Creating your own personas and simply 'putting yourself in their shoes' is not good enough, if you want to craft marketing messages that resonate.</p> <h3>Create a structure for design thinking</h3> <p>Providing a more structured and consistent approach to product and service development is what the Fjord methodology is about.</p> <p>There are other considerations, most notably about how to enshrine a cross-functional approach.</p> <p>Bringing together designers, developers and marketers will inspire greater creativity, sparked by better articulation of a project's parameters and goals.</p> <p>IBM defines the process as 'observe, reflect, make', with teams aligned to meaningful user outcomes and exchanging regular feedback.</p> <p>Marketing should be involved in the prototyping and testing phases, to ensure that they have the right information ahead of go-to-market.</p> <p>Ultimately, design should be an equal partner with technology and strategy.</p> <h3>Design should echo branding</h3> <p>Design should reinforce the brand. The two can sometimes be indistinguishable.</p> <p>Using Airbnb again as an example, its 2014 rebrand was so successful because it sought to manifest the spirit of its community, which in turn fuels the design process.</p> <h3>Design thinking must be culturally embedded</h3> <p>Support for design must be forthcoming from senior management and the wider organisation.</p> <p>To embed design at the strategic level, shaping business strategy and influencing product and service development from beginning to end, there should be a sponsor on the board.</p> <p>A design manager should ideally report into this sponsor and oversee documentation and review of design success. Design has to be championed internally and externally.</p> <p>Another aspect of culture to be considered is the physical office space, which should aid the working practices of design thinking and reflect the brand.</p> <p>This isn't a cure-all, of course, but it's a common theme of design-led businesses. Airbnb, for example, has meeting rooms fitted out as replicas of rooms from host homes.</p> <p>Paul Boag's Econsultancy article <a href="https://econsultancy.com/blog/64472-do-you-have-a-digitally-friendly-workplace/">on digital-friendly workplaces</a> is a very relevant summary of the office's impact on problem solving.</p> <h3>Give designers a longer leash</h3> <p>Design should not be seen as limited to brand guidelines and visual design, as it is to many marketers.</p> <p>The role of designer has the scope to influence the business at a strategic level, and there may therefore be a need for businesses to create new roles.</p> <p>Those companies lacking a design director may think about employing one. Others may need to empower their design directors in order to reap full benefit.</p> <h3>In summary</h3> <p>As a science graduate, I can't pretend to have fully got my head around design thinking (hence beginning to write about it). In fact, a commenter on a previous article - What is design thinking? - makes the point that term itself may be a red herring.</p> <p>It's a conceptual bar of soap that is perhaps best understood by looking at companies that are applying it. From Airbnb to the Co-op, there are plenty of people shouting about design-led business and implementing their own clearcut methods.</p> <p>Reading <a href="https://digital.blogs.coop/">Co-op's digital blog</a>, I encountered a link to <a href="https://github.com/tomski/BoilingFrogs/blob/improved-visual-design/GCHQ_Boiling_Frogs.pdf">GCHQ's Boling Frogs report</a>, which is subtitled 'Technology organisations need to change radically to survive increasing technical and business disruption.'</p> <p>Though the document isn't about the broad theme of design, there are lots of recommendations for <em>technical</em> design that feel pertinent for marketers (particularly in digital). The table below is a fantastic example.</p> <p>As businesses become tech-led, they necessarily have to be design-led.</p> <p><img src="https://assets.econsultancy.com/images/0008/1421/Screen_Shot_2016-11-11_at_12.26.05.png" alt="changes to tech led businesses" width="800"></p> tag:econsultancy.com,2008:BlogPost/68544 2016-11-22T11:00:00+00:00 2016-11-22T11:00:00+00:00 Disrupting loyalty: How can hotels become enablers, not just destinations? Anton Schubert <h3>Power to the people</h3> <p>In recent months Futurice has created eight retail trends that focus on a 2020 vision for the retail and consumer markets.</p> <p>One of these trends is particularly important for hospitality and especially hotels in terms of how they engage with their guests to improve loyalty and re-booking.</p> <p>The trend is called <strong>“Power to the People”</strong> and has three aspects:</p> <ul> <li> <strong>1. Crowd-sourced: </strong>As services become increasingly powered by peers, what are the different implications for customers and companies? What does trust and loyalty look like in a crowd-sourced market?</li> <li> <strong>2. Be the enabler: </strong>How can brands flex their power and use their network better to enable engaging customer experiences far outside their core offer?</li> <li> <strong>3. Global localist: </strong>Customers trust traditional brands and are simultaneously excited by boutique / bespoke experiences. The future might bring a combination of the two. Can your company start preparing for this now?</li> </ul> <p>For this blog, I’d like to talk about the second aspect; Be the enabler.</p> <h3>Be the enabler</h3> <p>IKEA recently set up a space in Shoreditch, London called <a href="http://www.ikea.com/gb/en/ikea/campaigns/the-dining-club/">the Dining Club</a>.</p> <p>This is one really cool example of what we mean when we talk about brands enabling people to have an experience that is often outside the company’s core offer.</p> <p>IKEA built on the insight that there has been a 22% drop in social groups, especially families, spending time together eating.</p> <p>They have also understood that it’s becoming harder for people to afford the cost of eating out. But the real magic about this concept is that it enables a human moment, a shared experience.</p> <p><img src="https://assets.econsultancy.com/images/0008/1678/Picture2.png" alt="ikea dinner club" width="550" height="310"></p> <p>An experience that is social and long lasting in the memories of the people involved. A moment much more compelling than a Sunday trip to IKEA to buy crockery and curtain rails.</p> <p>In essence <a href="https://econsultancy.com/blog/67694-10-examples-of-great-ikea-marketing-creative/">IKEA</a> is using its core products and brand to enable a more fulfilling experience that helps create robust brand loyalty.</p> <h3>So how could this apply to the hotel business?</h3> <p>Hotels are in a pretty good starting position, especially ones that are well networked and in great locations, be it city central or countryside.</p> <p>The hotel is a fantastic hub for the location it’s in and could be doing much more to help guests get the most out of their trip. Don’t get me wrong - I’m not talking lobby leaflets to local attractions or even the most helpful and knowledgeable front desk staff.</p> <p>I’m a business traveller, and a gold member of a large hotel chain that is affiliated with many travel and hospitality partners around the world. I get all the usual benefits.</p> <p>An upgrade here and there, free early check in, hotel restaurant vouchers, discounts from certain car rentals, a MasterCard with no annual fee, and last but not least a free bottle of water when I check in.</p> <p><img src="https://assets.econsultancy.com/images/0008/1679/Picture3.png" alt="mastercard fees" width="600" height="368"></p> <p>This is all well and good but honestly, I don’t want any of the above. I stay in so many hotels that the last thing I want is a benefit that makes me spend even more time in the hotel doing boring hotel stuff.</p> <p>I’d rather be given something exclusive that makes me feel special, something that I couldn’t do without the help of my hotel.</p> <p>My advice to hotel brands is to leverage their local networks and partners, allowing them to widen their offer. This includes connecting with locals who bring a different kind of value into the mix.</p> <p>I think a mindset change is needed <strong>from hotel as destination, to hotel as enabler</strong>.</p> <p><a href="https://econsultancy.com/blog/68541-all-the-digital-news-stories-you-missed-this-week-13/">Airbnb’s decision to add “whole trips” to its offer</a> in the form of curated local experiences is a great example of a travel brand leveraging its connections and reach to enable travellers to get more out of their trip.</p> <p>The experiences, which range from samurai sword-fighting to truffle hunting, see Airbnb move into the travel agency space, increasing pressure on hotel chains and travel websites like Trip Advisor and Last Minute.com in the process.</p> <h3>Local experiences</h3> <p>When it comes to hotels as enablers, the best example I have come across is <a href="http://conradhotels3.hilton.com/rs/stay-inspired/">Conrad Hotel’s 1/3/5 program</a>, part of the hotel chain’s Stay Inspired initiative.</p> <p>1/3/5 is a list of experiences based around the hotel group’s different destinations designed for guests who may only have 1, 3, or 5 hours to discover their new location.</p> <p>Curated by Conrad’s Director of Inspiration Peter Jon Lindberg, a former executive editor of Conde Nast Traveller, the 1/3/5 experiences range from edgy neighbourhood tours, reinvented icons and landmarks, to late-night cocktails.</p> <p>While I have yet to enjoy one myself, the 1/3/5 experiences are designed to give visitors a local perspective on culture, art, food, and adventure, so they can make the most of even a short trip. </p> <p><img src="https://assets.econsultancy.com/images/0008/1680/Picture4.png" alt="conrad hotel" width="600" height="333"></p> <h3>Disrupting loyalty</h3> <p>If hotel groups were prepared to disrupt their traditional loyalty programmes and give customers experiences that are more relevant and valuable, then I would expect my business trips to become much more enjoyable and rewarding going forward.</p> <p>Imagine, for example a future where my hotel secures me a table at Stockholm’s coolest new restaurant on its opening night? Maybe my designer hotel in London is hosting a fashion show of new London talent, and I get first chance to buy exclusive items not yet available to the public.</p> <p>Or my Berlin hotel enables an easy way for me to buy local goods from the trendy Hackescher Markt without having to rush around the town in the limited time I have outside business meetings. Maybe they even deliver those goods to my home address the next day so I don’t need to carry them through the airport chaos. </p> <p>How about instead of using my loyalty points on an upgrade, I could use them to secure a ticket to the top music event in the city that night? What if all the gold members in my hotel could chip in to a community reward scheme where we decide which rewards are relevant to us and how much we want to contribute?</p> <p>Maybe hotels could just scrap the traditional loyalty scheme altogether and give me any of the above as a gift every now and then just to say thank you?</p> <p>Hotels are in prime position to experiment with this kind of change. They have millions of guests walking through their doors every day.</p> <p>They may not yet feel they have strong loyalty within their customer base but the opportunity to create it is undoubtedly there and ready to be seized. After all, people who travel whether on business or leisure appreciate memorable experiences and AAA hotel locations are no longer the only differentiator. The hotel is the perfect springboard for the guest experience.</p> <p>It’s time to help your guests to spring a little higher.</p> <p><em><strong>Now read:</strong></em></p> <ul> <li><a href="https://econsultancy.com/blog/67658-how-hotels-can-personalize-the-customer-experience-to-compete-with-airbnb/">How hotels can personalize the customer experience to compete with Airbnb</a></li> </ul>