tag:econsultancy.com,2008:/topics/web-design Latest Design content from Econsultancy 2018-02-13T12:35:00+00:00 tag:econsultancy.com,2008:Report/4716 2018-02-13T12:35:00+00:00 2018-02-13T12:35:00+00:00 Digital Intelligence Briefing: 2018 Digital Trends <p>The <strong>2018 Digital Trends</strong> report, published by Econsultancy in association with <strong><a title="Adobe" href="https://www.adobe.com/uk/experience-cloud.html">Adobe</a></strong>, looks at the most significant trends that will impact companies in the short to medium term.</p> <p>The report is based on a global survey of nearly 13,000 marketing, creative and technology professionals in the digital industry across EMEA, North America and Asia Pacific.</p> <p>As part of this year’s study, we have also identified a number of <strong>top-performing companies</strong> in order to<strong> assess how they are focusing their activities and investments differently compared to their peers</strong>.</p> <p>High-performing companies are those organisations that exceeded their top 2017 business goal by a significant margin, and who have also significantly outperformed their competitors.</p> <p><strong>Key insights</strong> from the research include:</p> <ul> <li>Companies continue to focus on the customer experience (CX), as well as the content required to facilitate this. Organisations committed to CX are shown to outperform their peers.</li> <li>We are entering a ‘design and creativity renaissance’, with top-performing companies recognising the importance of these capabilities to complement data and technology excellence.</li> <li>Investment in technology and related skills is paying dividends, with integrated platforms fast-becoming a prerequisite for success.</li> <li>AI is set to play a growing role in helping marketers to deliver more compelling real-time experiences.</li> </ul> tag:econsultancy.com,2008:BlogPost/69706 2018-01-18T10:18:00+00:00 2018-01-18T10:18:00+00:00 Charity websites must tackle content design & information architecture Ben Davis <p>This content can have wildly different aims – to convert, to inspire, to inform, to guide – and often has to be authoritative.</p> <p>Cramming all this content into a website is difficult. What should charities prioritise? How should users navigate?</p> <p><a href="https://www.linkedin.com/in/feralibix/">Alex Wright</a>, CEO of Friday, a web/service design agency that has worked with several charities, does a better job of summing up just how big this challenge can be.</p> <p>"The largest charities are sprawling," Wright says, "they’re retail networks, and complex fundraising organisations, and political lobbying organisations and volunteer communities, and collections of services which can be hugely diverse (the British Red Cross will lend you a wheelchair, help with your asylum claim, trace your lost relatives overseas, help you in a flood, and teach you first aid…). They’ll do content design about each of these things individually, but structuring and prioritising content between them is a big challenge."</p> <p>I must admit, having a look around various charity websites myself, I was left a little overwhelmed by what I found. Just looking at homepages, many do a good job of choice reduction / prioritisation, whilst also allowing for discovery, but others feel jumbled or at least lacking a plan.</p> <p>Here's St John's Ambulance below the fold - not particularly inviting:</p> <p><img src="https://assets.econsultancy.com/images/0009/1713/st_johns.png" alt="st johns ambulance homepage" width="615" height="323"></p> <p>Elsewhere, The Salvation Army is perhaps guilty of overdoing its homepage content blocks:</p> <p><img src="https://assets.econsultancy.com/images/0009/1698/sally_army.png" alt="sally army" width="400" height="942"></p> <p>This is partly personal taste in web design of course – I haven't user tested the two sites above (aside from doing a bit of pogo sticking around), but I wanted to discuss the issue of content design with experts such as Friday's Alex Wright, to understand the current state of web design in the third sector. </p> <h3>Content prioritisation</h3> <p>The stuff of web project management is all about meeting user needs and prioritising content to do just that. So I asked Wright whether prioritisation is an issue for charities – his response was pretty forthright and equally revealing.</p> <p>"In short, yes," prioritisation is an issue, says Wright. He continues, "Just over a year ago Friday held a roundtable for senior digital leaders within the not-for-profit sector. The session was attended by 10 different organisations spanning children’s charities, those involved in emergency relief as well as care for the elderly, sick and disadvantaged.</p> <p>"Our conversations revealed that they all had reasonably mature digital fundraising operations - with the staff and agency support to deliver it. The most mature were able to make prioritisation decisions within fundraising, about the value of certain audiences and actions (a one-off cash donor versus a fundraising fun-runner, etc.) and prioritise digital content and spend accordingly.</p> <p>"But most of the charities were now beginning to digitise core services, the things they did to help people. As well as being much more challenging (genuine digital transformation, rather than just channel-shift), digital services for beneficiaries give rise to prioritisation conflicts. What’s more important - a donor prospect who’ll offer you £20/month, or a beneficiary who the charity exists to help? And what does that mean for budgets, resources, content, navigation, etc.</p> <p>"There’s a structural problem that compounds this. These audiences are often served by different directorates. Arbitrating between them is almost impossible. They can all point to clear user needs for their audiences.</p> <p>"There’s a cultural problem too. Charities are full of people driven by the cause - and tend to regard all contributions to the cause as good. They’re not good at telling each other that one contribution to the cause is less important than another. This feels like refusing help.</p> <p>"The result is digital clutter. And most charity insight departments will tell you that their most engaged audiences span multiple audience types – they consume the charity’s services and fundraise for it, and volunteer in the shop, and campaign on its behalf etc.. This makes the prioritisation even harder.</p> <p>A few themes picked up by Wright there, then:</p> <ul> <li>Possibility of 'too many cooks'.</li> <li>Fundraising strategy has channel-shifted, but digital transformation of services a different matter.</li> <li>Difficulty in attributing value to some interactions (e.g. helping beneficiaries).</li> <li>Multiple overlapping personas.</li> </ul> <p>These are complex issues for both comms strategy and <a href="https://econsultancy.com/blog/64474-ecommerce-information-architecture-the-devil-in-the-detail">information architecture</a> to get to grips with. In some ways it reminds me of the service design work Government Digital Services has been doing over the past few years – making information easy to find and understand, and services simple to use, with charities having the additional difficulty of having to make everything compelling / inspiring / meaningful (in a way that tax returns or driving licences are not). More on that later.</p> <h3>Cost is the elephant in the room</h3> <p>Before I start to sound overly critical, it should obviously be said that charities have big constraints when it comes to web development.</p> <p><img src="https://assets.econsultancy.com/images/0009/1757/ele.jpeg" alt="elephant" width="275" height="183"></p> <p><a href="https://www.linkedin.com/in/roblangleyswain">Rob Langley-Swain</a>, Strategic Director at design consultancy Supercool, expands on this, as well as hinting again at cultural issues within organisations:</p> <p>"I don’t think it is fair to say that charity website projects are compromised by a lack of prioritisation, a lot of the time there are a number of factors which have to be considered. Most commonly budget and time constraints are the biggest factors influencing or constraining a project’s creativity. I would also say, in our experience, that rather than a lack of prioritisation causing an issue, it is a battle to make sure that every voice of an organisation has a fair share of the limelight on a site. </p> <p>"This could lead to a website becoming vast, messy and difficult to navigate through as, once our sites are live, almost all content is editable by in-house teams who can add, move and amend content as they see fit; but we account for this when designing a website."</p> <p>Langley-Swain's final point about in-house design is a very interesting one. As much as they benefit marketers, new and improved CMS platforms such as WordPress and Joomla can cause problems, too. They allow content management without IT involvement, but may lead to a tempation to create content quickly (in a template) without properly thinking about its format.</p> <p>Pete Czech of digital agency New Possibilities Group <a href="https://www.npgroup.net/blog/modular-web-design-the-age-of-templates-is-over/">writes</a> “because templates are so inflexible, your content stops being content. It starts becoming as assemblage of items that create a page."</p> <h3>Every page is a homepage</h3> <p>One of the trends that charities must keep up with is that of multiple entrance points to a website. The explosion of social content and the continued importance of search means that people may land deep within your website looking for a particular bit of information. These users must be oriented, so they know where they are in the website and where they can go from here.</p> <p>This is a fundamental job of information architecture. Supercool's Langley-Swain says "We tend to work with the idea that every page on a site is a homepage of sorts - it needs to fulfil the job of a homepage in terms of navigation, signposting and cross posting of interesting and relevant content that will help visitors find useful information, keep them on the site longer and provide a deeper engagement with the organisation"</p> <p>As Supercool's creative director <a href="https://www.linkedin.com/in/katie-parry-977922/">Katie Parry</a> puts it, this is "providing helpful stuff to all manner of people, as you can rarely be sure exactly why someone’s come to the website."</p> <p>You can see this done very simply and effectively by Cancer Research UK on the brain tumour research page below. There's: </p> <ol> <li>the appropriate category highlighted in the header menu</li> <li>a breadcrumb trail showing where on the site you are</li> <li>a call to action to donate</li> <li>a content block for patient stories</li> <li>a news section for any article tagged 'brain tumour'</li> <li>links to information about brain tumours</li> <li>a link to CRUK's strategy</li> </ol> <p><img src="https://assets.econsultancy.com/images/0009/1721/cr_research.jpg" alt="cr uk page" width="400"></p> <p>This is good information architecture. There are no bells and whistles, everything fits on to a modest sized page, and there are plenty of onward journey options.</p> <h3>Who is designing good content?</h3> <p>My personal favourite is Shelter, for its GDS inspired approach.</p> <p>There's plenty of <a href="https://www.gov.uk/guidance/content-design/writing-for-gov-uk">plain language addressing user needs</a>. Nothing unnecessary is included. Scrolling is kept to a minimum on the homepage. There are breadcrumbs and a stripped back menu. There's no content-blockitis – just properly accessible text and links.</p> <p>Here are some examples...</p> <p>1) A homepage with a simple message, one call to action (donate now) and a pared down header menu:</p> <p><img src="https://assets.econsultancy.com/images/0009/1732/shelter_home2.jpg" alt="shelter home" width="615" height="331"></p> <p>2. If images get in the way of good informaton architecture, get rid of them. Here, a search box, category links and popular pages give the user numerous ways to find what they're looking for.</p> <p><img src="https://assets.econsultancy.com/images/0009/1731/shelter_gds1.jpg" alt="shelter" width="615" height="341"></p> <p>3) Note the simplicity of this 'get a place to stay' page. It provides only the information needed, in plain language. Important links are highlighted in a grey box with red left border, and breadcrumbs help orient the user.</p> <p><img src="https://assets.econsultancy.com/images/0009/1730/shelter_gds.jpg" alt="shelter website addressing need" width="615" height="362"></p> <p>4) Yet again, the 'help' page performs a function with minimum fuss.</p> <p><img src="https://assets.econsultancy.com/images/0009/1729/shelter_get_help.jpg" alt="shelter get help" width="615" height="338"></p> <p>One could argue it doesn't inspire as much as it could, but there are areas of the site (addressing fundraisers not beneficiaries, for example) where it steps out of its truly functional garb and tells a story. That might be with the simple use of more photography and the odd content block. Or, as shown below, it could be something more ambitious including data visualisation, full-width photography, widgets ('find face-to-face advice'), document downloads and links out to blog posts detailing some beneficiary stories.</p> <p><img src="https://assets.econsultancy.com/images/0009/1733/shelter_our_impact.jpg" alt="shelter our impact" width="615" height="2698"></p> <p>Of course, there are plenty more great charity websites out there, and they don't have to be quite as regimented as Shelter's to achieve good information architecture. But this is just one approach I particularly admire.</p> <p>Supercool's Katie Parry strikes a note of warning when she tells me that though my personal preference might be for "fewer messages per page and an overall simplicity," some of her anecdotal research talking to clients suggests that a lot of people prefer being shown a lot of stuff all in one go, "rather than feeling like they’re being forced down a specific path by an organisation/web designer."</p> <p>This brings us on to our fairly obvious conclusion.</p> <h3>In conclusion - time to develop a passion for user research</h3> <p>I've skirted around a few issues here – design, architecture, organisational culture, project management, IT.</p> <p>I don't want to paint a picture of the charity sector as particularly lagging in this area, but I do feel that nailing content design and information architecture will really help charity websites to stand out and increase engagement, whatever it is they are measuring.</p> <p>And though I've given my own opinions here, I haven't tested anything. Testing is crucial for charities because, as Friday's Alex Wright puts it, "the most engaged audiences span multiple audience types, [so] there’s a need to digitally support greater engagement through a broad mix of different types of content and journey."</p> <p>More plainly, Wright says "engagement with charities can be multi-faceted" and therefore "the bridges between types of journey really matter".</p> <p>User research and testing is the only way to understand if this multi-faceted approach is being achieved. So, if you're in charge of a website tender for a charity, make sure you go out there and employ an agency with good <a href="https://www.econsultancy.com/training/courses/usability-user-experience">usability</a> chops that talks about content design and information architecture, and doesn't try to blind you with fancy mockups at the pitch stage.</p> <p><em><strong>Do you work for a charity? We'd love to get your thoughts below.</strong></em></p> <p><em>More on charities:</em></p> <ul> <li><em><a href="https://econsultancy.com/blog/68781-five-ways-charities-can-encourage-more-online-donations">Five ways charities can encourage more online donations</a></em></li> </ul> tag:econsultancy.com,2008:BlogPost/69701 2018-01-08T09:11:00+00:00 2018-01-08T09:11:00+00:00 A day in the life of... a design strategy lead at Fjord Ben Davis <h4> <em>Econsultancy:</em> Please describe your job: What do you do?</h4> <p><em><strong>John Jones:</strong></em> I am a global design strategy lead at Fjord, so I work with our clients and teams across the world. As a design consultancy, we are always striving to develop new ways of thinking and working with our clients, which can then be translated into elevated service design for their customers or employees.</p> <h4> <em>E: </em>Whereabouts do you sit within the organisation? Who do you report to?</h4> <p><em><strong>JJ:</strong></em> I report to Olof Schybergson, Fjord’s co-founder and CEO. It’s a flexible role, so I am able to focus on projects and new strategic initiatives to help Fjord continue to evolve. </p> <h4> <em>E: </em>What kind of skills do you need to be effective in your role?</h4> <p><em><strong>JJ: </strong></em>For me, it’s being comfortable with ambiguity – not knowing exactly what we’ll find, but diving in to problem solving right is the right mind-set to make progress quickly.</p> <p>We often talk about “connecting the dots” but often don’t know where all of the dots are. This is where more immersive research with users and employees is an invaluable starting point – living the experience while we are designing for it. Finding more dots to work with helps us find typical and atypical answers to a problem. By being open to employing a diverse set of methods and people, you are most likely to get a diverse and interesting range of solutions.</p> <p>I have found writing to be a key skill in my role. The art of telling a good story is essential when we’re trying to communicate new ideas to clients - being able to break down complex thinking into easily digestible stories is invaluable. Writing a simple story is also key to working out the ideas – we find if we name services and features correctly, they move forward more quickly.</p> <p><img src="https://assets.econsultancy.com/images/0009/1544/John_Jones_Headshot__1_.jpg" alt="john jones" width="400"></p> <p><em>John Jones, Fjord</em></p> <h4> <em>E: </em>Tell us about a typical working day… </h4> <p><em><strong>JJ: </strong></em>The one point of consistency across any working day is a cup of coffee – it doesn’t even have to be good coffee.</p> <p>After that, there is no “typical” day. While I spend most of my time in New York, I also often travel to other global studios to work with local teams on specific projects. I divide my time roughly in half between client work and internal projects, such as Design Studies – an initiative which helps Fjord constantly evolve, improve our thinking and stay in front of where design is headed.</p> <p>Design Studies is one of the most impactful activities I started at Fjord. The aim is to find out more about how people behave so we can design the best services for them– we’re trying to get to the heart of complex issues in a way which will easily cut through to live projects we’re working on for clients and positively impact consumers.</p> <p>If we can better understand patterns of behaviour, we can then intelligently design a relationship between people and the world or services around them. We based one Design Study on how to communicate to people without screens. As our ability to use screens changes in different circumstances, non-visual design becomes much more important - like riding a bike or wayfinding in darkness.</p> <p>After experimenting with a variety of materials and techniques to establish how we interact without screens, we focused on haptics (touches and vibrations) to communicate and ended up inventing a product worn in a lanyard, which can extend the users awareness. A tap while cycling can help pinpoint where potential traffic problems may arise, for example. It’s translating these Design Study insights into practical design solutions that result in truly differentiated services.</p> <h4> <em>E: </em>What do you love about your job? What sucks?</h4> <p><em><strong>JJ: </strong></em>We are exploring new ways to look at human interaction every day – studying behaviour, connections, intent and decision-making. This is a constant curiosity for me personally and I am fortunate that it is at the center of my work as well. </p> <p>I think we all have a love / hate relationship with the New York City Subway. It is a packed, often frustrating experience, but you see every kind of person on the subway in New York. It helps us keep in touch with who we are really designing for - and there are so many problems to solve. I find that’s a good mind set to walk into the office with, no matter what the commute has been like. </p> <h4> <em>E: </em>What kind of goals do you have? What are the most useful metrics and KPIs for measuring success? </h4> <p><em><strong>JJ: </strong></em>One of my primary goals is to challenge my own ways of thinking when I’m working. If a day goes by where someone or something hasn’t helped me to see the world in a different way, then that’s a slow day. </p> <h4> <em>E: </em>What are your favourite tools to help you to get the job done?</h4> <p><em><strong>JJ: </strong></em>I still find pen and paper the most useful tools to use – that combined with some of the collaborative applications like Google Docs and Dropbox means I can work with anyone, anywhere.</p> <h4> <em>E: </em>How did you get into design strategy, and where might you go from here?</h4> <p><em><strong>JJ: </strong></em>I spent ten years working at an interactive agency, and the decade before that running my own business. One thread that has run throughout everything I’ve done is writing. When I started out, I was writing user journeys and doing game design and development. Today, my writing is focused on clearly communicating new methods and emerging digital services.</p> <p>The critical thinking that comes from writing is very useful as we move into areas like artificial intelligence. In many cases AI is developed in isolation by coders with little understand of behaviour and context. To make real progress, we have to truly understand the problem we are solving and then apply AI.</p> <p>In the Fjord Makeshop, we have a process we describe as “technology last” where we do as much human problem solving up front before we select a technology platform. In this way, by the time we get the platform, we can be sure we have really understood the needs.</p> <h4> <em>E: </em>Which brands do you think are using design well?</h4> <p><em><strong>JJ: </strong></em>I do love classic cars – as a designer, it’s good to ground yourself in the physical and every year I try to go to the New York Auto show with my kids. The Volvo P1800 is a particular favourite; it comes from an era of beautiful design which has withstood the rise of new car technologies.</p> <h4> <em>E: </em>Do you have any advice for people who want to work in a design consultancy?</h4> <p><em><strong>JJ: </strong></em>We need people from more diverse backgrounds in design. People who have studied philosophy, writing, theatre, music and other areas who are trying to understand behaviour and intent will be invaluable, especially as areas like voice and AI become more prevalent. </p> <p>We have to be learning new things all the time, question how things work, taking them apart and putting them back together. If we understand more about people, make things as quickly as possible, work in iterations and find new ways to collaborate, there are so many more problems we can solve.  </p> <p><em><strong>More on design:</strong></em></p> <ul> <li><a href="https://econsultancy.com/blog/69224-how-to-get-started-with-design-thinking">How to get started with design thinking</a></li> <li><a href="https://www.econsultancy.com/blog/69683-10-no-nonsense-web-design-trends-for-2018">10 no-nonsense web design trends for 2018</a></li> <li><a href="https://econsultancy.com/blog/68840-culture-and-digital-transformation-how-to-build-a-living-business/">Culture and digital transformation: How to build a living business</a></li> </ul> tag:econsultancy.com,2008:BlogPost/69683 2017-12-18T09:00:00+00:00 2017-12-18T09:00:00+00:00 10 no-nonsense web design trends for 2018 Ben Davis <p>So, what's coming in 2018? Here are a few predictions...</p> <p>(And don't forget that subcribers can download our <a href="https://econsultancy.com/reports/user-experience-and-interaction-design-for-mobile-and-web">User Experience &amp; Interaction Design for Mobile &amp; Web Best Practice Guide</a>)</p> <h3>1. The death of flat design</h3> <p>In our <a href="https://econsultancy.com/blog/69646-ux-trends-in-2018-what-do-the-experts-predict/">UX trends for 2018</a>, Will Grant of Prodlytic says he hopes "to see the tide turn again against flat design and a return to (subtle) visual affordances in UI across the board."</p> <p>As early as 2014, Co.Design was asking "<a href="https://www.fastcodesign.com/3028944/is-flat-design-already-passe">Is flat design already passé</a>?" And this year designers are all talking about drop shadows and gradients again, the affordances that Grant talks of.</p> <p>Indeed, a study by Nielsen Norman Group in 2017 showed that users <a href="https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/">took 22% longer</a> to navigate through an ultra-flat design.</p> <p><img src="https://assets.econsultancy.com/images/0009/1238/flat.jpg" alt="flat design" width="450"></p> <h3>2. Video</h3> <p>I'm not exactly putting my neck on the line in predicting video will be big. It already is. From media sites that are <a href="https://www.marketingweek.com/2017/09/28/brands-should-be-wary-of-publishers-pivot-video/">pivoting to video</a>, to more <a href="https://econsultancy.com/blog/69682-social-media-trends-in-2018-what-do-the-experts-predict/">ephemeral video on social networks</a>, and video in website design – it's everywhere.</p> <p>Video, however, remains a bit of a controversial web design element to some UX professionals. Especially in ecommerce, it can be seen as a distraction, lumped in the same category as auto carousels (just read the comments on <a href="https://www.econsultancy.com/blog/67030-10-successful-homepages-that-show-the-trend-for-video-backgrounds">a previous article about video backgrounds</a>).</p> <p>However, as always, the usefulness of video depends on what the website and designer are trying to achieve. I still believe hero/background video has a place on desktop – for example, click through the GIF below to visit the new Barbican website (launched in late 2017) and I defy you to say the video background doesn't convey the scale and splendour of the Barbican's architecture.</p> <p><a href="https://www.barbican.org.uk/"><img src="https://assets.econsultancy.com/images/0009/1227/barbican.gif" alt="barbican" width="398" height="299"></a></p> <p>Away from backgrounds, John Moore Williams <a href="https://webflow.com/blog/19-web-design-trends-for-2018">writing on the webflow blog</a> highlights the utility of the &lt;video&gt; HTML element. Williams says:</p> <blockquote> <p>It can slip seamlessly into the design...</p> <p>It remains extremely high quality...</p> <p>It can be looped to...repeat for those who need it</p> </blockquote> <p>Check out the webflow homepage and you can see an example of this, captured in the GIF below. As I scroll below the fold, there's a video element showing me what the software looks like in action. As Moore says, the beauty of video is it's ability to "convey complex information" – surely a great tool for B2B websites, for example.</p> <p><img src="https://assets.econsultancy.com/images/0009/1232/webflow.gif" alt="webflow homepage" width="398" height="299"></p> <h3>3. Subtle scrolling effects</h3> <p>Parallax scrolling has been and gone, with many designers recognising that slow load times and a negative impact on usability represent too high a price to pay for the effect.</p> <p>But that doesn't mean there can't be joy in scrolling. One of my favourite examples is the use of an attached background image that doesn't scroll with the page.</p> <p>Sticking with the Barbican website, you can see an example below. Okay, it's perhaps not the best example, given the white text isn't the easiest to read, but the effect certainly has an impact.</p> <p><img src="https://assets.econsultancy.com/images/0009/1228/scroll_barbican.gif" alt="barbican scroll" width="398" height="299"></p> <p>There's another great couple of examples on the <a href="https://www.madebymany.com/">Made by Many homepage</a>.</p> <p>This is also a trend we may see more of in digital advertising, with the scrolling format already pretty well established and using similar principles to catch the attention of the viewer.</p> <p>Below are a couple of examples, one on mobile (via the IAB) and one on desktop (via <a href="http://showcase.sizmek.com/formats">Sizmek's library of ad formats</a>).</p> <p><iframe src="https://www.youtube.com/embed/A-jTMJMh4sU?wmode=transparent" width="560" height="315"></iframe></p> <p><img src="https://assets.econsultancy.com/images/0009/1234/sizmek_scroll_reveal.gif" alt="scrolling ad format on desktop"> </p> <p>This format is seen as a postiive experience for the user, in that they get to control the reveal (and disappearance) of the ad, and therefore it doesn't impose as much as a sticky ad might.</p> <p>There are <a href="http://showcase.sizmek.com/formats/demo/parallax-reveal">parallax scroll ad formats</a>, too, which aren't dissimilar, though they do take longer to load and are arguably a little more disorienting.</p> <h3>4. Death of the ghost button</h3> <p>Arguably this isn't a big deal, but I feel compelled to address it, given the ghost button is one of the web design trends we have trumpeted in previous years.</p> <p>Christopher Ratcliff rightly <a href="https://econsultancy.com/blog/65898-17-crucial-web-design-trends-for-2015">pointed to</a> the boom in ghost buttons at the end of 2014, referring to them as "not quite a call-to-action. Perfect for designers not wishing to clutter their sites with albeit necessary navigation."</p> <p>Unfortunately, this proved to be too accurate a description i.e. these buttons simply don't call the user to action.</p> <p>A <a href="https://blog.prototypr.io/introduction-what-are-ghost-buttons-a87af5c8cee8">fantastic blog post</a> by Bartholomew Fish details the provenance of ghost buttons (coming out of flat design) and shows some highly missable examples.</p> <p>The problem is that ghost buttons don't offer sufficient contrast when placed over busy imagery or text. Similarly, if button text colour is too similar to background image colour, there can be a contrast issue.</p> <p>The result can be a 20% decrease in clicks, according to some studies detailed in Fish's blog post.</p> <p><img src="https://assets.econsultancy.com/images/0009/1235/borshoff.jpg" alt="ghost button" width="615"></p> <h3>5. Sticky nav</h3> <p>Sticky or fixed navigation, such as header menus that follow you (or stick in place) as you scroll down a page, is not particularly new. But as retailers redevelop their ecommerce sites, it's a design feature we are seeing more and more of.</p> <p>Here are three examples:</p> <p><strong>National Trust's sticky secondary nav on its Holidays website</strong></p> <p><img src="https://assets.econsultancy.com/images/0008/9070/NATTRUST.gif" alt="national trust holidays" width="526" height="289"></p> <p><strong>RentalCars.com's listings pages on mobile (with sticky filter)</strong></p> <p><img src="https://assets.econsultancy.com/images/0009/0453/rentalcars_filter.jpg" alt="rentalcars sticky filter" width="300"></p> <p><strong>Argos's product page on desktop (with sticky 'add to trolley')</strong></p> <p><img src="https://assets.econsultancy.com/images/0009/0276/argos_sscroll.gif" alt="argos add to trolley" width="542" height="308"></p> <p>In fact, the aforementioned John Moore Williams of webflow even highlights a possible trend for floating header menus – this is the same principle but the menu appears to float, allowing the homepage visuals to continue behind them. See <a href="http://reseau.coop/">the homepage of Le Réseau COOP</a> for a good example.</p> <h3>6. Typography</h3> <p>A trend for a few years now – typography as visual. Serif fonts are making more of an appearance, too.</p> <p>We've seen agency websites using impactful typography throughout 2017.</p> <p><a href="https://coopbrand.co/"><img src="https://assets.econsultancy.com/images/0009/1243/Screen_Shot_2017-12-17_at_15.42.34.png" alt="coop homepage" width="615"></a></p> <h3>7. Brutalism meets luxury ecommerce</h3> <p>Brutalism is a style of architecture that flourished in the 1960s and is so-called after Le Corbusier's description of one of his materials, béton <strong>brut</strong> (raw concrete). Seeing as we've mentioned the Barbican twice already, it's worth pointing to again as perhaps the most famous example of a brutalist development in the UK.</p> <p>Anyway, it seems the term has been co-opted into web design at some point in 2016. It's worth checking out a wonderful <a href="https://www.uxbrutalism.com/">template for UX brutalism</a> created by the UX Design Collective.</p> <p>Brutalism is a style most often seen on <a href="https://sagmeisterwalsh.com/">adventurous agency websites</a> and artist websites – generally fairly limited affairs in terms of number of pages and degree of functionality.</p> <p>However, 2017 saw brutalism get a lot of attention thanks to the Balenciaga ecommerce website redesign. You can check out a thorough <a href="https://econsultancy.com/blog/69273-luxury-ecommerce-review-is-balenciaga-s-normcore-website-more-than-a-gimmick">Econsultancy review of the site</a> from back in July. For all their doubts, <a href="https://econsultancy.com/blog/69273-luxury-ecommerce-review-is-balenciaga-s-normcore-website-more-than-a-gimmick/#comments">most of our commenters admired Balenciaga's bravery</a>.</p> <p>Will we see more luxury brands turn to their cement mixers?</p> <p><img src="https://assets.econsultancy.com/images/0008/7818/IMG_3935.png" alt="balenciaga homepage" width="300"></p> <h3>8. Curves</h3> <p>Twitter <a href="https://www.designweek.co.uk/issues/12-18-june-2017/twitter-redesigns-website-app-instagram-style-elements/">replaced square profile photos</a> with round ones in 2017, as well chamfering off square edges throughout its design.</p> <p><img src="https://assets.econsultancy.com/images/resized/0009/1239/screen_shot_2017-12-17_at_15.12.50-blog-flyer.png" alt="twitter redesign" width="470" height="119"></p> <p>Google, too, got its plane and its sandpaper out and <a href="http://www.androidpolice.com/2017/11/03/googles-rounded-mobile-search-redesign-now-rolling-everyone/">had a go at those dangerously sharp edges</a> on its search box and cards.</p> <p><img src="https://assets.econsultancy.com/images/0009/1240/cards_google.jpg" alt="google cards" width="350" height="622"></p> <h3>9. Mobile animation</h3> <p><a href="https://airbnb.design/lottie/">Airbnb Lottie</a> is a library that allows "apps to use animations as easily as they use static images." John Moore Williams highlights it as one of the many tools emerging to help designers create more complex interactions.</p> <p><img src="https://assets.econsultancy.com/images/0009/1244/mobile_animation.gif" alt="airbnb lottie based animation" width="152" height="272"></p> <h3>10. Web VR?</h3> <p>I needed something for the 10th trend in this list. Will web VR enter the average consumer's life? I doubt it (and <a href="https://www.marketingweek.com/2017/12/13/mark-ritson-big-seven-2018/">Mark Ritson scoffs at the idea</a>). But Google is still <a href="https://experiments.withgoogle.com/webvr">curating experiments</a>.</p> <p>In reality (sorry about that), AR seems most exciting as we enter 2018.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">Getting ready for Star Wars tonight with my Google AR stickers! <a href="https://twitter.com/hashtag/starwars?src=hash&amp;ref_src=twsrc%5Etfw">#starwars</a>  <a href="https://twitter.com/hashtag/arcore?src=hash&amp;ref_src=twsrc%5Etfw">#arcore</a> <a href="https://twitter.com/hashtag/arkit?src=hash&amp;ref_src=twsrc%5Etfw">#arkit</a> <a href="https://t.co/G2vrncpuBm">pic.twitter.com/G2vrncpuBm</a></p> — Bruce Vang VR/AR (@brucevang) <a href="https://twitter.com/brucevang/status/941397891406540802?ref_src=twsrc%5Etfw">14 December 2017</a> </blockquote> tag:econsultancy.com,2008:BlogPost/69607 2017-12-07T09:30:00+00:00 2017-12-07T09:30:00+00:00 What were the biggest UX trends of 2017? Ben Davis <p>And as ever, if your appetite isn't suppressed by this moreish article, here are some excellent Econsultancy resources that subscribers can download:</p> <ul> <li><a href="https://econsultancy.com/reports/user-experience-and-interaction-design-for-mobile-and-web">User Experience and Interaction Design for Mobile and Web – Best Practice Guide</a></li> <li><a href="https://econsultancy.com/reports/implementing-a-customer-experience-cx-strategy-best-practice-guide">Implementing a Customer Experience (CX) Strategy – Best Practice Guide</a></li> <li><a href="https://econsultancy.com/reports/implementing-a-customer-experience-cx-strategy-best-practice-guide">Top 100 Digital Agencies Report 2017</a></li> </ul> <h3>Mobile no longer worth mentioning</h3> <h4> <a href="https://www.linkedin.com/in/iamwill/">Will Grant</a>, co-founder, Prodlytic:</h4> <p style="font-weight: 400;">It feels like the year that 'mobile first', 'mobile friendly' and 'responsive design' stopped being worth mentioning. It's a given. Everything is now assumed to be responsive and mobile first - it's considered a breaking bug if your web app doesn't work on mobile.</p> <h3>UX-led disruption in banking</h3> <h4> <a href="https://www.linkedin.com/in/mattoxley/">Matt Oxley</a>, founder, dotlabel:</h4> <p>One of the most inspiring UX/CX developments of 2017 has been the disruption of a dinosaur laden UK financial industry besieged by unwieldy legacy systems.</p> <p>Facilitated by new regulations concerning ‘open banking’, small agile fintech start-ups such as <a href="https://econsultancy.com/blog/68756-prudent-ux-for-banking-monzo-designs-positive-friction">Monzo</a> and Atom have seized the opportunity to offer banking customers solutions suited to them.</p> <p>Monzo’s success is routed both in a deep understanding of customer wants, needs, frustrations and expectations, and the flexibility offered when building a new system from the ground up.</p> <p>The new regulations, due in early 2018, allow licensed companies to securely share data with established banks, essentially handing the customer a huge choice of front-facing routes to securely access and transact their financial data. Although the banks are likely to still administer customer accounts, the ramifications of new user-focused entities, perhaps as substantial as Google or Facebook, stealing away long-built customer relationships from the banks is significant.</p> <h3>VUIs and CUIs</h3> <p><strong><a href="https://clearleft.com/team/andy-budd">Andy Budd</a>, CEO, Clearleft</strong></p> <p>The popularity of virtual assistants like Alexa and Google Home, has led to a significant rise in demand for Voice User Interface (VUI) and Conversations Interfaces (CUI) skills. So we’re helping a lot of brands explore the “Headless UI” space at the moment. I think next year a lot of company will move away from pure experimentation and capability building, and start using these tools to deliver tangible improvements to customer service and productivity.</p> <h3>'Pick up where you left off'</h3> <h4>Simon Nalley, UX designer at Bozboz:  </h4> <p>This year has been pretty fast moving in the UX space. Key trends we have seen at Bozboz include cross-channel/device experience which allows the user to 'pick up where they left off' from different devices, e.g. Netflix, Spotify etc. allowing the user to continue watching or listening to their choice of entertainment.</p> <p>Digital binging continues to be all-encompassing.</p> <h3>Design ops</h3> <p><strong>Andy Budd:</strong></p> <p>Another area of interest for us has been the emergence of design operations as a way to describe something we’ve been helping clients with for a while now. As the name suggests, design ops looks at ways to make design teams more efficient and effective, in order to get better work to market faster.</p> <p>This can involve everything from skills development, process improvements and governance, through to the creation of specific tool sets that allow design teams to integrate their work into the code-base much faster. The concept started at tech companies like AirBnB, but has quickly spread. So for companies with large design teams, design ops is likely to make a more prominent impact in 2018.</p> <h3>Flat design still going strong</h3> <p><strong>Will Grant:</strong></p> <p>As a general trend, the march of 'flat design' continues relentless, with visual affordances being removed all over the place. </p> <h3>Minimalism and movement</h3> <h4>Simon Nalley: </h4> <p style="font-weight: 400;">We've also noticed a move towards minimalism – removing clutter and unnecessary copy from the user interface to speed up the user journey. Bold and simple solutions deliver content and functionality as and when needed.</p> <p style="font-weight: 400;">Movement is also being universally embraced, be it via video or functional interactions. It generates engagement and makes the customer experience far more engaging.</p> <h3>Digital service design</h3> <p><strong>Andy Budd:</strong></p> <p>The growth of digital service design has been another area of interest for us. As traditional services become more and more digital, and as digital services break out of their product silos, we’re seeing an increasing need to join all these disparate elements together through some kind of service layer.</p> <p>As a result, we’re seeing increasing demand from digital directors, CX directors and more recently ops directors, for people who understand both traditional <a href="https://econsultancy.com/blog/67420-what-is-service-design-who-uses-it">service design</a> practices, but through a digital and technology lens.</p> <h3>Usable stuff...at last</h3> <h4> <a href="https://www.linkedin.com/in/steffanaquarone/">Steffan Aquarone</a>, head of best practice reports, Econsultancy</h4> <p>I've seen a lot of big brands <a href="https://econsultancy.com/blog/69118-14-reasons-businesses-are-failing-at-user-centred-design">catching up</a> with what it means to build something usable. It's a real breakthrough moment for me as a consumer, when I've put up with clunky tech from a company I've dealt with for years, finally to find they've built something that's a pleasure to use.</p> <p><em><strong>That's it for our 2017 UX roundup. Look out for 2018 predictions from our experts.</strong></em></p> tag:econsultancy.com,2008:TrainingDate/3265 2017-10-26T12:05:57+01:00 2017-10-26T12:05:57+01:00 Creative Thinking for Digital Marketers <p>“Creativity is intelligence having fun” – Albert Einstein.<br> <br> </p> <p>Our highly interactive 1-day course introduces practical tools to help you think more creatively about your digital marketing challenges.  Your day will be filled with hands-on exercises and examples from many areas, but with a special focus on digital.  </p> tag:econsultancy.com,2008:BlogPost/69419 2017-09-18T15:10:00+01:00 2017-09-18T15:10:00+01:00 How Warby Parker’s newsjacking campaign eclipsed the competition Nikki Gilliland <p>Jumping on real-time events <a href="https://www.econsultancy.com/blog/68433-newsjacking-the-us-election-six-brands-playing-the-trump-card" target="_blank">such as elections</a> or celebrity deaths can also divide consumers. Cinnabon’s tweet in tribute to Carrie Fisher was both <a href="https://econsultancy.com/blog/69081-six-ways-brand-marketers-can-bring-the-funny-without-being-cringeworthy" target="_blank">comical and clever to some</a>, for instance, yet tacky and insensitive to others.</p> <p>One story to dominate the news recently was the solar eclipse, or more specifically, the first total solar eclipse to cross North America since 1918. Unsurprisingly, with nothing to lose, a wide range of brands from Casper to Lipton used the event to capitalise on social conversation. However, the one campaign that stood out as the best of the bunch was from US eyewear brand Warby Parker.</p> <p>So what did it involve? Here’s a run-down of the campaign, along with a few things we can learn from it.</p> <h3>Brand alignment</h3> <p>Newsjacking is much harder to pull off when the event or occurence is entirely unrelated to a brand or its product, but occasionally, something comes along which feels like a gift.</p> <p>For Warby Parker, this was the case with the solar eclipse. </p> <p>With people desperate to catch a glimpse of the eclipse as it happened, the brand created a campaign based on the importance of protecting your eyes whilst doing so. And what better brand to promote this message than one which sells glasses?</p> <p>Surprisingly, not many others in this retail category took the opportunity. Coastal created a few informative posts on social media on what to do during the eclipse, while Zenni Optical only replied to customer tweets. Other big brands like Ray Ban tried to avoid the subject entirely, only sternly warning people that they would not be protected by wearing sunglasses. Safety was obviously a big concern.</p> <p><iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcoastal.com%2Fposts%2F10155485974345903&amp;width=500" width="500" height="529"></iframe></p> <p>In contrast, Warby Parker created a dedicated landing page on its own site called ‘The Great American Solar Eclipse’, alongside activity on social and in its physical stores. </p> <h3>Slick design </h3> <p>Using real-life events for marketing can often be rushed, with brands quickly rolling out tweets in response to something that’s already happened. However, Warby Parker clearly planned its campaign well in advance – a fact reflected by the slick design of its landing page. </p> <p>With stunning graphics and informative content, the page offers users a pleasing UX, and also continues its cool and slightly quirky tone of voice that the brand has become so well known for.</p> <p><img src="https://assets.econsultancy.com/images/0008/8931/Warby_Parker2.JPG" alt="" width="650" height="523"></p> <p>You can read more on Warby Parker’s UX and design features <a href="https://econsultancy.com/blog/68874-27-bold-ux-design-features-from-disruptive-retail-brands" target="_blank">in this article</a> by Ben Davis.</p> <h3>In-store activity</h3> <p>Other brands that jumped on the eclipse did so mainly for the opportunity to insert their name into the conversation, perhaps posting a funny tweet or offering a bit of information about the event.</p> <p>Warby Parker aimed to provide consumers with something of real value, as well as simultaneously increasing footfall to its own stores. </p> <p>It handed out free eclipse glasses (compliant with ISO safety standards) to visitors of its US shops. If people couldn’t make it in person, however, it also offered online users the chance to download a pinhole projector, which is a special eclipse filter.</p> <p><img src="https://assets.econsultancy.com/images/0008/8925/Solar_Eclipse.JPG" alt="" width="550" height="715"></p> <p>The potential for consumers to directly get involved didn’t stop there - Warby Parker also held a special ‘eclipse-viewing party’ in its Nashville store, where the location happened to fall in the path of totality.</p> <p>The event was made complete with music from local artists and food from nearby restaurants. </p> <p><img src="https://assets.econsultancy.com/images/0008/8926/Nashville.JPG" alt="" width="490" height="805"></p> <h3>Social engagement</h3> <p>Warby Parker is well-known for its clever social strategy, where it fosters loyalty by conversing with users and posting behind-the-scenes goings on. </p> <p>The solar eclipse was no exception, with the brand taking the opportunity to post eclipse-related content across all of its social channels.</p> <p>Capitalising on the visually stunning nature of the event, it worked with professional storm chasers to photograph the eclipse itself – posting the resulting images on its Instagram channel.</p> <p><img src="https://assets.econsultancy.com/images/0008/8927/warbyparkerinsta.JPG" alt="" width="780" height="494"></p> <p>On Facebook, it launched a competition whereby the winner would be flown out to the Nashville eclipse party.</p> <p><img src="https://assets.econsultancy.com/images/0008/8928/Warby_comp.JPG" alt="" width="650" height="443"></p> <p>Lastly, on Twitter, it continued its focus on customer engagement – ramping up excitement in the run up to the event as well as acknowledging it after it happened with a constant stream of replies.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr"><a href="https://twitter.com/WarbyParker">@WarbyParker</a> nailed it for <a href="https://twitter.com/hashtag/SolarEclipse2017?src=hash">#SolarEclipse2017</a> advertising. This is perfect and brand relevant! <a href="https://t.co/J0WfZskzzW">pic.twitter.com/J0WfZskzzW</a></p> — Christi Olson (@ChristiJOlson) <a href="https://twitter.com/ChristiJOlson/status/900105830217003008">August 22, 2017</a> </blockquote> <h3>Humour and pop culture</h3> <p>Newsjacking can often veer into silly territory, mainly because brands recognise that engagement will be short-lived. It’s more about creating a splash in-the-moment rather than serious long-term loyalty.</p> <p>In line with this, Warby Parker took the opportunity to create a rather daft parody music video – set to the famous Bonnie Tyler hit, ‘Total Eclipse of the Heart’. </p> <p>The brand's content strategy usually centres on user-generated content, focusing more on feedback and advocacy from consumers. However, it is not averse to using humour to engage and entertain too, with ‘Solar Eclipse of the Heart’ continuing this unashamedly fun and carefree approach.</p> <p>It clearly resonated with the audience, too. The video has gone on to be the brand’s most-viewed video on Facebook, with 455,000 views on the platform. However, it was not created purely in the name of fun. Warby Parker cleverly used it to promote and raise awareness of its Nashville store event and related eyewear offer.</p> <p><iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwarbyparker%2Fvideos%2F10155498749643838%2F&amp;show_text=0&amp;width=476" width="476" height="476"></iframe></p> <h3>What can we learn?</h3> <p>So, what can we learn from Warby Parker's campaign? Here are a few key takeaways:</p> <p><strong>1. Make it relevant</strong>. Unless the idea is super clever, jumping on a real-time event when it has no relation to a brand can seem insincere. Warby Parker recognised that it could offer something of greater value to consumers thanks to the link between the event and its product, instead of merely using it as a shallow marketing ploy.</p> <p><strong>2. Use a multi-channel approach</strong>. Warby Parker is a great example of agile marketing because it created an entire campaign on the back of a cultural event – not just a one-off tweet or Instagram post. This increases the likelihood of engagement, with users being able to get involved with the campaign via a number of different channels.</p> <p><strong>3. Create an experience.</strong> By hosting eclipse parties and offering free glasses, Warby Parker ensured that consumer involvement would transfer from online to offline. In turn, this increased the brand’s connection with its audience, giving them something more memorable than a standard brand campaign might.</p> <p><em>Related reading:</em></p> <ul> <li><em><a href="https://econsultancy.com/blog/65184-what-is-agile-marketing-and-why-do-you-need-it" target="_blank">What is agile marketing and why do you need it?</a></em></li> <li><em><a href="https://www.econsultancy.com/blog/68433-newsjacking-the-us-election-six-brands-playing-the-trump-card" target="_blank">Newsjacking the US election: Six brands playing the Trump card</a></em></li> </ul> tag:econsultancy.com,2008:BlogPost/69414 2017-09-12T10:15:00+01:00 2017-09-12T10:15:00+01:00 Four big digital trends impacting travel & tourism marketing Nikki Gilliland <p>But, how exactly are they doing it? Here’s a look at of some of the most interesting trends in online tourism marketing, and why certain destinations are leading the way.</p> <h3>Immersive video</h3> <p>In 2015, both Facebook and YouTube introduced 360-degree video, leading many tourism destinations to experiment with the medium. </p> <p>The benefits are obvious. If done well, 360-degree video enables viewers to immerse themselves in a destination as well as specific activities or events, generating much higher engagement than standard video. </p> <p><a href="https://skift.com/2017/01/17/5-charts-showing-the-untapped-potential-of-360-degree-video-in-travel-planning/" target="_blank">Research from Skift</a> backs this up, but also shows that getting people to actively watch 360-videos is still somewhat of a barrier. It found that while only 13% of users say they’ve interacted with a 360-degree video, 51% of those that have say they find them much more engaging.</p> <p>So which tourism brands have been getting involved? Here are a few of the best examples.</p> <h4>Philadelphia Virtual Tour</h4> <p>Visit Philadelphia allows viewers to jump into the sights and sounds of ‘Philly’ with a series of immersive videos of the city’s most recognisable spots.   </p> <p>Viewers can skate along the Benjamin Franklin Bridge, look around Elfreth’s Alley and experience what it’s like to be in the middle of Washington Square. With a full-screen format plus the option to use a VR headset, it offers a great way to get a glimpse of what’s it like to actually be there.</p> <p><a href="http://www.visitphilly.com/virtual-tour/" target="_blank"><img src="https://assets.econsultancy.com/images/0008/8877/Welcome_to_Philly.JPG" alt="" width="780" height="398"></a></p> <h4>VisitLEX Horses</h4> <p>Lexington in Kentucky is known as ‘horse country’. The city’s tourism board, VisitLex, chose to hone in on this niche appeal this with its 360-degree video, Horses.</p> <p>The video immerses users inside the world of horses, allowing them to see a 360-degree view of race day, the animals being groomed, and the fields in which they roam. By focusing on this rather than the general location, VisitLex is able to target a much more specific audience. </p> <p><iframe src="https://www.youtube.com/embed/4bx-RXegHus?wmode=transparent" width="854" height="480"></iframe></p> <h4>British Columbia: Whistler Within</h4> <p>British Columbia uses action to drive its 360-degree video, Winter Within, showing viewers exactly what it’s like to ski in the area. In fact, by allowing viewers to navigate wherever they choose, it offers more of a view than the skiers themselves can enjoy.</p> <p>While 360-degree tour video might serve a more functional purpose, adventure videos can be effective for really ramping up excitement in the run-up to a trip.</p> <p><iframe src="https://www.youtube.com/embed/VVRAB4eoPbk?wmode=transparent" width="854" height="480"></iframe></p> <h3>Slick UX and design</h3> <p>Last year, I wrote about five tourism websites <a href="https://econsultancy.com/blog/67952-five-tourism-websites-guaranteed-to-give-you-wanderlust" target="_blank">guaranteed to give you wanderlust</a>, and one thing they all have in common is a particularly slick and engaging UX.  </p> <p>While most other types of travel-related websites rely on bookings, focusing on avoiding abandoned user journeys and so on, tourist board sites have the luxury to concentrate on beautifully designed and informative content. </p> <p>Tennessee Vacation grabs the user’s attention with highly visual and arresting imagery, designed to highlight different aspects of the state. It also helps different types of travellers navigate the site depending on what they’re interested in.</p> <p>While indoor and outdoor activities might appeal to families, Nashville’s nightlife is bound to appeal to younger travellers. </p> <p><a href="https://www.tnvacation.com/" target="_blank"><img src="https://assets.econsultancy.com/images/0008/8878/tennessee.JPG" alt="" width="780" height="343"></a></p> <p>Another example of great design is Visit Finland – specifically its animated map.</p> <p>Users are taken around the map as they scroll, with each section detailing information about key attractions within four regions. The map itself is deliberately cartoon-like, however I think this adds to its charm, with the main enjoyment stemming from the easy user experience and bright design.</p> <p><a href="http://www.visitfinland.com/destinations/" target="_blank"><img src="https://assets.econsultancy.com/images/0008/8879/VisitFinland.JPG" alt="" width="780" height="455"></a></p> <p>In the UK, Visit Cornwall also makes use of striking design, integrating site-wide video into its homepage.</p> <p>Showcasing the county’s beautiful coastal views, it effectively captures the user’s attention and shows off its unique appeal.</p> <p><a href="https://www.visitcornwall.com/" target="_blank"><img src="https://assets.econsultancy.com/images/0008/8880/visitcornwall.JPG" alt="" width="780" height="458"></a></p> <h3>Food tourism</h3> <p>Another element that tourism boards are increasingly focusing on is food. Gastronomy is a huge motivation for travellers around the world – the AAA found that an estimated 22m Americans will take a culinary-focused holiday in the next 12 months, while 75% feel that food is an integral part of their trip.</p> <p>It’s not just about recommending <a href="https://econsultancy.com/blog/67785-why-restaurants-need-a-hyper-local-influencer-marketing-strategy/" target="_blank">local restaurants</a> either. Content relating to tasting experiences, food markets, and regional produce can all be effective for engaging foodies – all the while helping to boost local businesses.</p> <p>Catalunya is one tourism board to have a dedicated food section on its website, where it features videos about the region’s famous cuisine and wine. As well as increasing engagement from people interested in food, this type of content also helps to promote the authenticity and unique identity of a place.</p> <p><iframe src="https://www.youtube.com/embed/kXXsUlQgul8?wmode=transparent" width="854" height="480"></iframe></p> <p>NYCGo also has an extensive focus on food, using a magazine style format to delve into the restaurants, food trends, and quirks that make its dining scene so famous.</p> <p>It also promotes food events happening in New York City, helping users to plan specific trips and events as well as gain inspiration.</p> <p><img src="https://assets.econsultancy.com/images/0008/8881/NYCGO.JPG" alt="" width="750" height="677"></p> <h3>Instagram</h3> <p>It’s unsurprising that most tourism sites have a very strong presence on Instagram – it’s a trend that’s seen across the entire <a href="https://econsultancy.com/blog/68815-becoming-an-influencer-notes-from-a-fledgling-travel-blogger/" target="_blank">travel industry</a>. However, it is a great way for tourism boards in particular to establish themselves as a standout brand, using the platform to increase visibility and awareness.</p> <p>Whereas Twitter or Facebook might create a more passive user experience, an increasing number of people are using Instagram to search for inspiration.</p> <p>Tourism boards are able to capitalise on this, delivering stunning and inspiring imagery based on destination-interest.</p> <h4>PureMichigan</h4> <p>PureMichigan has an impressive 516,000 followers on Instagram. Compared to VisitCalifornia’s 295,000 and NYCGO’s 212,000 – the US state is clearly doing something right.</p> <p>Most of its success appears to be down to a focus on user generated content, with the channel continuously posting and crediting imagery to others. </p> <p><img src="https://assets.econsultancy.com/images/0008/8883/puremichigan.JPG" alt="" width="780" height="499"></p> <h4>Greenland</h4> <p>Greenland makes the most of its photogenic landscape, using Instagram to showcase everything from its epic icebergs to magnificent wildlife.</p> <p>It doesn’t only just focus on the imagery, however, with its captions providing users with informative insight into life on the island.</p> <p><img src="https://assets.econsultancy.com/images/0008/8882/Greenland.JPG" alt="" width="750" height="650"></p> <h4>VisitLondon</h4> <p>Finally, VisitLondon shows that you don’t always have to use Instagram to target international travellers.</p> <p>Posting imagery that celebrates all aspects of life in the capital, it is able to become a source of interest for locals as well as potential visitors.</p> <p><img src="https://assets.econsultancy.com/images/0008/8884/VisitLondon.JPG" alt="" width="780" height="574"></p> <p><strong><em>Related reading:</em></strong></p> <ul> <li><em><a href="https://www.econsultancy.com/blog/69052-how-visitscotland-is-transforming-the-traditional-tourist-body">How VisitScotland is transforming the traditional tourist body</a></em></li> <li><em><a href="https://econsultancy.com/blog/67996-what-travel-tourism-marketers-can-learn-from-discover-la/">What travel &amp; tourism marketers can learn from Discover LA</a></em></li> <li><em><a href="https://econsultancy.com/blog/69109-why-visit-sweden-and-other-tourism-boards-are-teaming-up-with-airbnb/">Why Visit Sweden and other tourism boards are teaming up with Airbnb</a></em></li> </ul> tag:econsultancy.com,2008:BlogPost/69412 2017-09-11T11:25:00+01:00 2017-09-11T11:25:00+01:00 Six charities with excellent online donation user journeys Nikki Gilliland <p>It’s hard enough for charities to convince consumers to want to donate in the first place, never mind guiding them through the process – so which charities do it best? Here’s just six examples and the reasons why they’re so effective.</p> <h3>Charity: Water</h3> <p>Charity: Water’s website is one of my favourites in terms of design, using eye-catching imagery and informative content to nudge donations. It also makes giving very easy, letting users know that there are a variety of ways to get involved.</p> <p>Its donate button is easy to spot, including a nifty drop-down menu that instantly tells users there’s more than one option. </p> <p><img src="https://assets.econsultancy.com/images/0008/8840/charity_water.JPG" alt="" width="780" height="494"></p> <p>The main reason I like it is that it offers choice – and not just in terms of how often or how much to donate. It uses a fun and enthusiastic <a href="https://econsultancy.com/blog/67941-10-nudge-tastic-examples-of-persuasive-copywriting-from-charities/" target="_blank">tone of voice to encourage</a> people to fundraise in a variety of ways. </p> <p>In fact, it lets users decide, allowing them to set up a bespoke campaign page detailing exactly how. Charity:Water also makes it as easy as possible for people who don’t have the time or inclination to fundraise, giving them a ready-made campaign page that lets people ask for donations in place of birthday gifts.</p> <p><img src="https://assets.econsultancy.com/images/0008/8841/charity_water_2.JPG" alt="" width="700" height="551"></p> <h3>American Heart Association</h3> <p>According to a survey, <a href="https://www.blackbaud.com/files/support/helpfiles/bestpractices/donationforms/donationform.htm" target="_blank">65% of organisations</a> require online donors to click three or more times to make a donation. This undoubtedly results in an increase of people abandoning their journey. </p> <p>The American Heart Association’s donation page is a great example of how to counteract this. It uses a one-page form to simplify the donation process. What’s more, it automatically fills in elements of the page, pre-setting suggested amounts to reduce form filling.</p> <p><img src="https://assets.econsultancy.com/images/0008/8842/AHA.JPG" alt="" width="760" height="661"></p> <p>Research also shows that suggesting gift amounts leads to bigger donations. This is perhaps because people might use the suggested amount as a minimum, whereas they might select a lower amount if left to their own devices.</p> <p>Finally, American Heart Association has an integrated Amazon Pay feature to let users pay in a single click if they are logged in their account, making donating as quick and easy as <a href="https://www.econsultancy.com/blog/66534-three-lessons-all-retailers-can-learn-from-amazon" target="_blank">buying something on Amazon</a>.</p> <h3>Cancer Research UK</h3> <p>According to PSA’s annual report, text donations fell by 7m last year. However, it’s been suggested that this was due to a reduction in marketing spend, with PSA also predicting that it will rise again in 2017.</p> <p><a href="https://econsultancy.com/blog/69132-how-cancer-research-is-using-smart-technology-to-drive-fundraising" target="_blank">Cancer Research UK</a> heavily promotes text donations, allowing users to give £3 by texting a code. While the website itself does not overtly promote the feature (you need to click through to ‘other ways to donate’ to find it) – it is very clearly explained here.</p> <p><img src="https://assets.econsultancy.com/images/0008/8843/cancer_research_uk.JPG" alt="" width="760" height="487"></p> <p>Text donation is certainly one of the most user-friendly options, with charities able to capitalise on user’s spontaneity and in-the-moment urge to give. </p> <p>Cancer Research UK’s easy UX is also continued onto its mobile site. It has recently integrated Apple Pay, meaning users can give money in just two steps. </p> <p><img src="https://assets.econsultancy.com/images/0008/8844/IMG_1677.PNG" alt="" width="400" height="711"></p> <h3>Macmillan </h3> <p>Another cancer charity with a great mobile user journey is Macmillan. On its website, the donation process is a little bit lengthy – the three-step process feels like harder work than others I’ve mentioned.</p> <p>However, its mobile site is a different story. After clicking ‘donate’ on the homepage, you are taken you to a page with three ways to give money – either by credit card, PayPal or text. </p> <p><img src="https://assets.econsultancy.com/images/0008/8846/IMG_1678.PNG" alt="" width="400" height="711"></p> <p>The text feature is particularly cool. By tapping the screen, users are immediately taken to a draft text message where the number is already pre-filled. Again, while text donations are one of the easiest ways to donate, this ensures that all friction is removed, as the user does not even have to enter in the phone number.</p> <p><img src="https://assets.econsultancy.com/images/0008/8847/IMG_1679.PNG" alt="" width="400" height="711"></p> <h3>Red Nose Day</h3> <p>Red Nose Day is an annual event where people up and down the country hold events and activities to raise money for charity. But how exactly does the charity collect all the cash?</p> <p>Its website allows fundraisers to pay in their money online. The process is pretty quick and easy, taking users through a straightforward payment process – similar to that of any slick ecommerce site.</p> <p>Meanwhile, the charity also allows people to donate all year round, prompting them to do so throughout its site. Here, I particularly like how suggested donations correspond to what they can achieve. This encourages consumers to take action, also acting as proof that the money is put to good use.</p> <p><img src="https://assets.econsultancy.com/images/0008/8848/Red_nose_day.JPG" alt="" width="780" height="478"></p> <p>On to donating, and Red Nose Day offers one of the best experiences. A one-page, responsive form – it enables users to quickly complete the process without any real hassle. It also clearly and concisely explains its Gift Aid option – one element which perhaps might confuse people.</p> <p>While most websites promote Gift Aid as a tiny tick-box, this approach is great way to promote transparency and ensure understanding.</p> <p><img src="https://assets.econsultancy.com/images/0008/8849/GiftAid.JPG" alt="" width="780" height="550"></p> <h3>Alzheimer’s Society</h3> <p>Finally, the Alzheimer’s Society taps into emotive elements to help drive consumers through the donating process, by asking whether or not people would like to donate in memory of someone.</p> <p>This adds an element of personalisation to the often one-sided experience of giving to charity, with Alzheimer’s Society making the process more meaningful.</p> <p><img src="https://assets.econsultancy.com/images/0008/8851/Alzheimers_2.JPG" alt="" width="600" height="594"></p> <p>It also separates the user journey into single or monthly donations, which is effective for avoiding any confusion or anxiety about recurring payments. The various payment provider logos also help to instil trust and reassurance in consumers.</p> <p><img src="https://assets.econsultancy.com/images/0008/8850/Alzheimers.JPG" alt="" width="780" height="377"></p> <h3>Key points:</h3> <p>So, what can we learn from the aforementioned examples? Here are a few takeaways.</p> <p><strong>1. Provide options</strong>. Giving consumers multiple ways to raise money helps to spur on action and involvement. A ready-made form like Charity:Water’s ‘birthday pledge’ makes it as easy as possible.</p> <p><strong>2. Reduce steps</strong>. It’s important to make the donating process as simple as possible, ensuring it takes just a few clicks. Similarly, pre-filling forms is a great way to streamline the process.</p> <p><strong>3. Think mobile</strong>. A mobile optimised site should be standard, but extra features like ‘tap to text’, Apple Pay, and a native form can massively enhance the user experience.</p> <p><strong>4. Add personalisation</strong>. Giving consumers the option to donate in memory of someone helps to prompt donations, but more than this, it also helps to create a meaningful connection between the charity and consumers. </p> <p><strong><em>Related reading:</em></strong></p> <ul> <li><em><a href="https://econsultancy.com/blog/69391-how-five-charities-convey-purpose-through-tone-of-voice">How five charities convey purpose through tone of voice</a></em></li> <li><em><a href="https://econsultancy.com/blog/68014-how-charities-can-win-at-the-zero-moment-of-truth/">How charities can win at the Zero Moment of Truth</a></em></li> <li><em><a href="https://econsultancy.com/blog/67451-the-smartest-experiential-charity-marketing-campaign-you-ll-see-this-year/">The smartest experiential &amp; charity marketing campaign you'll see this year</a></em></li> </ul> tag:econsultancy.com,2008:BlogPost/69332 2017-09-01T08:44:30+01:00 2017-09-01T08:44:30+01:00 How Premier League club websites are changing: A Swansea and Stoke case study Ben Davis <p>I've been speaking to Hayden Evans, creative director at Reading Room, the agency that has recently redesigned and relaunched the websites of Stoke City, Swansea City and Middlesbrough. Let's find out what is changing for the better and how these redesigns were made possible.</p> <p><em>For more on digital in the Premier League, check out these other posts:</em></p> <ul> <li><a href="https://econsultancy.com/blog/68828-after-years-of-apathy-football-clubs-are-embracing-digital-transformation"><em>After years of apathy, football clubs are embracing digital transformation</em></a></li> <li><a href="https://econsultancy.com/blog/68696-digital-transformation-in-the-premier-league-southampton-fc-s-fan-first-strategy/"><em>Digital transformation in the Premier League: Southampton FC's fan-first strategy</em></a></li> </ul> <h3>Legacy technology was a pain in the metatarsal</h3> <p>Anyone familiar with football club websites will know that historically many have been tied in to a Football League Interactive contract, which meant they had their websites provided for them by the league, each of which was based on the same back-end system.</p> <p>Evans tells me that "The problem with [the Football League Interactive system] was that each club had very restrictive designs and publishing capability. The clubs all went into the same publishing queue, so you can imagine what that meant at 4.45pm on a Saturday. Some clubs wouldn’t get their content published for 20-25 minutes whilst it waited in the queue."</p> <p>That system meant that a Premier League club could be beholden to the content strategy of another club altogether - not ideal when you're trying to build a global football brand.</p> <h3>Clubs need to be able to create a visual brand</h3> <p>Each club that Reading Room worked with was very clear, according to Evans, about "being able to customise the design" of their website. They "don’t necessarily mind being on the same platform if it works well," he continued, "but what they don't want is a website on which their only design choice is to change the colours."</p> <p>The visual brand of big football clubs is increasingly important, with Evans pointing to when clubs change their crest as an example - such changes invariably provoke plenty of debate and feedback on social media.</p> <p>It's no different when it comes to the club's website design, as well as the content and the user experience. Fans are not slow in coming forward with their thoughts.</p> <p>So, with the goal (no pun intended) of providing Stoke, Swansea and Middlesbrough with much improved publishing capability and a customiseable design, Reading Room created Playmaker.</p> <p><img src="https://assets.econsultancy.com/images/0008/8430/swans2.jpg" alt="swansea city fc" width="615" height="340"> </p> <p><em>Swansea City FC website</em></p> <h3>Playmaker - a Drupal8 platform specifically for sports teams</h3> <p>Reading Room's Playmaker platform is based on a Drupal8 open-source backend.</p> <p>The agency worked with the three clubs to determine their workflows and build back-end systems that suit their needs (for live match centres, for example), but the platform does have some consistent functionality. There is integration with stream AMG, the stream partner that brings through live and on-demand content, for example. There is also integration with Opta, pulling in player and league stats.</p> <p>Evans gave the impression that Playmaker has been built to deliver the best of both worlds - customisable open-source infrastructure and best-practice functionality that will work for any club.</p> <p><em><img src="https://assets.econsultancy.com/images/0008/8427/stoke.jpg" alt="stoke website" width="615" height="342"></em></p> <p><em>Stoke City FC website</em></p> <h3>Designing both fan and club UX</h3> <p>Part of scoping out each website build was working with both club and fans to determine what great UX meant to each.</p> <p>For the clubs, as touched on earlier, Evans said this could mean "sitting down with content teams to understand their experiences watching a live match and updating the website." This might mean being able to "quickly update a system when someone scores, add in some commentary, maybe pull in and embed a Tweet or Instagram post. And be able to do that quickly."</p> <p><img src="https://assets.econsultancy.com/images/0008/8432/Screen_Shot_2017-08-21_at_17.14.27.png" alt="swansea live commentary" width="615" height="329"> </p> <p><em>The Swansea City FC website's live match commentary</em></p> <p>Similarly, the agency worked with each club to improve how the systems works when the club needs to announce a season ticket campaign or unveil a new signing, for example.</p> <p>Alongside this club-side UX, various fan groups were consulted - what social media do younger fans appreciate (can we incorporate player posts?), what stats do the fans want from the website, and so on.</p> <p>The presentation of stats is one area where, by working across multiple football club websites, Reading Room was able to zero in on an optimised UX that can be shared across clubs, meeting with fan approval and also providing the consistency that great data visualisations rely on. That means fans can sort through league tables and rich stats (who has the most assists from midfield, for example) using a throughly tested design.</p> <p>The agency, Evan says, was "upfront with the clubs, saying we’re going to keep this stats layout and style for all three of you because this is working and we’ve tested it, across devices. It's the same with upcoming fixtures, which will show form from last season's corresponding fixtures."</p> <p><img src="https://assets.econsultancy.com/images/0008/8431/stats.png" alt="player stats" width="615" height="352"> </p> <p><em>Player stats on the Middlesbrough website (Ben Gibson, if you're curious)</em></p> <h3>Designing for mobile <em>and</em> desktop</h3> <p>"We’re not prioritising mobile," said Evans, "the sites work on mobile and on desktop." </p> <p>"We didn’t want to go down that worn out path of ‘mobile first’ - we’re very aware of sites in both the football sector and others too where they have almost gone mobile only, it’s overly basic at the desktop level i.e. the same mobile view just expanded for the desktop."</p> <p>It's easy to understand what Evans is getting at here - the website with a simplistic homepage or a feed homepage, with a hidden navigation. This mobile-first design can sometimes feel limited on desktop. Fans want to check scores on their mobiles, but also dig into match reports and stats on desktop, or watch video here in the evening.</p> <p>You can see the advantages of this multi-device approach by looking at Swansea's site, which includes a mega-menu.</p> <p><img src="https://assets.econsultancy.com/images/0008/8428/SWAN_MEGA_MENU.gif" alt="Swansea mega menu" width="615"></p> <p><em>Swansea City mega-menu</em></p> <p>Evans tells me it’s only Swansea that have gone for the mega-menu, with each club trialling their own navigation methods - an example of the flexibility of the backend system.</p> <p>The platform also works in partnership with the various app providers that the three clubs use. Clubs can "enter the content once," says Evans, "and that same content gets pushed out to both the website and the app.</p> <h3>Early metrics point to a much improved experience</h3> <p>The early results are positive for the three websites, with lots of positive sentiment on social media and increased visits and browsing.</p> <p>Stoke City's website saw views up 118% year-on-year in the month after launch, with visit duration up 108% and page view per visit up 58%.</p> <h3>The roadmap to single sign-on</h3> <p>So what's next for football clubs who have succeeeded in creating visually appealling, functional and usable websites for publisher and fan?</p> <p>Well, for the three named clubs, single sign-on is the next goal, allowing fans to sign in once and be able to buy tickets, view content and add items to their basket in the shop. Currently, website, match tickets and the club shop necessitate separate accounts, and that doesn't represent a great customer experience.</p> <p>Reading Room has been working with all three clubs to ensure that single sign-on is implemented.</p> <h3>Accessiblity</h3> <p>A last word on accessibility, an oft-overlooked part of UX when writing articles like this, but a vital aspect for football clubs.</p> <p>Reading Room has been working with a blind fan of Middlesbrough FC to ensure that new features on the site work well with a screen reader. When a new website launches, it can be a disconcerting experience for visually impaired users and so Reading Room's development roadmap includes work to make sure they take this into account.</p> <p>We'll hopefully do a more detailed study on this accessbility work on the Econsultancy blog. Watch this space.</p> <p><img src="https://assets.econsultancy.com/images/0008/8425/boro.jpg" alt="boro website" width="615" height="342"></p> <p><em>Middlesbrough FC website</em></p> <h3>In summary</h3> <p>Football clubs are finally undertaking work that is long overdue, providing the information fans want in an easy-to-use format. For a while now, fans have bemoaned the state of their club websites, but it looks like most are catching and delivering experiences that are not far behind what big media players can deliver.</p> <p>The leagues are evolving, too, with the Premier League rebranding and dropping its title sponsor, and the EFL putting its digital platform (Interactive) out to tender last year and also creating a consumer-facing video streaming product for the 2017-18 season.</p> <p>The first stage of digital transformation looks to be gently underway - the next is about offering the kind of seemless experience that can generate greater revenue through fan loyalty, ecommerce and media. Top players are getting in on the act, too, with their own digital ventures.</p> <p>It's clear there's much to look forward to, with platforms like Playmaker a great start.</p> <p><strong><em>Interested in learning more about usability and user training? <a href="https://econsultancy.com/training/courses/usability-user-experience/">Book now for Econsultancy's upcoming training course</a>.</em></strong></p>