tag:econsultancy.com,2008:/topics/web-design Latest Design content from Econsultancy 2016-10-12T17:29:40+01:00 tag:econsultancy.com,2008:RoundtableEvent/832 2016-10-12T17:29:40+01:00 2016-10-12T17:29:40+01:00 Email: Making Design and Content Mobile Friendly <p><strong>Exclusively available for Econsultancy Enterprise subscribers,</strong> this roundtable gives you the opportunity to meet with your peers and share knowledge, best practice, opportunities and challenges in particular areas of Email,</p> <p>Attendance is limited to 14 - 16 attendees, with discussion chaired and facilitated by Econsultancy.</p> <p><strong>Agenda</strong></p> <p>Agenda to be published shortly...</p> tag:econsultancy.com,2008:RoundtableEvent/830 2016-10-12T17:29:33+01:00 2016-10-12T17:29:33+01:00 Mobile Web Design and Development <p><strong>Exclusively available for Econsultancy Enterprise subscribers</strong>, this roundtable gives you the opportunity to meet with your peers and share knowledge, best practice, opportunities and challenges in particular areas of Mobile Web Design and Development.</p> <p>Attendance is limited to 14 - 16 attendees, with discussion chaired and facilitated by Econsultancy.</p> <h3>Agenda</h3> <p>Agenda points to be published shortly...</p> tag:econsultancy.com,2008:BlogPost/68375 2016-10-12T14:00:00+01:00 2016-10-12T14:00:00+01:00 Airbnb: How its customer experience is revolutionising the travel industry Paul Rouke <p>Despite the fact my family have booked our last seven holidays with Airbnb, I still think it is one of the internet’s best kept secrets.</p> <p>Here’s how Airbnb is shaping the future of the travel industry: </p> <h3>It's aspirational</h3> <p>Remember the saying, there is no place like home?</p> <p>The rise in popularity of boutique hotels proved that there was a growing segment of travellers who wanted a more varied choice of accommodation; an experience characterised with personalised touches and the chance to be immersed in the local culture.</p> <p>Essentially, Airbnb is a boutique hotel on steroids.</p> <p>With a homepage headline of “live there”, Airbnb offers the chance to stay in (sorry <em>live in</em>) aspirational, unique homes.</p> <p>The whole idea is that staying with Airbnb is more than just a holiday, you get to experience new places just like the locals do, which appeals to people who don't like to see themselves as normal tourists.</p> <p><img src="https://assets.econsultancy.com/images/0008/0215/airbnb_homepage.png" alt="" width="700" height="308"></p><p><img src="https://assets.econsultancy.com/images/0008/0217/airbnb_your_home.png" alt="" width="700" height="311"></p> <p>Offering some really unique properties for rent, in some of the world’s most spectacular locations, you'd expect that when you first land on the Airbnb website your emotions will be stirred.  </p> <p>Whether it be excitement, amazement or belonging, Airbnb captures these emotions with carefully chosen imagery and <a href="https://econsultancy.com/blog/65499-20-gorgeous-examples-of-websites-with-video-backgrounds/">background videos</a>. </p> <p>Yes, there is the search facility layered on top, but first and foremost it has focused on connecting with visitors on a more personable level than any travel agency website I have been on.</p> <p>I was recently in one of my local travel agents to exchange some money.</p> <p>While scanning over the shelves of brochures, I couldn't help but wonder what the cover of an Airbnb holiday brochure would look like.</p> <p><img src="https://assets.econsultancy.com/images/resized/0007/9899/brochures-blog-flyer.jpg" alt="Brochures " width="470" height="352"></p> <h3>It's built on pure trust</h3> <p>The <em>only</em> part of the whole customer experience that Airbnb has full control over is the website.</p> <p>This means that the brand has to place complete trust and faith in the people from around the world who choose to rent their properties on the platform.</p> <p>It also requires the people renting out their houses to place trust in their guests (who they have never met before), not to mention the trust the holidaymaker or business traveller has to place in their host, with the hope that "what they see online, is what they get."</p> <p><img src="https://assets.econsultancy.com/images/0008/0218/airbnb_social_proof.png" alt="" width="700" height="326"></p> <p>As expected, <a href="https://econsultancy.com/blog/65722-18-highly-effective-examples-of-social-proof-in-ecommerce/">social proof</a> plays an integral role in building that trust.</p> <p>For people to spend money on their holiday, weekend getaway or business trip with no physical interaction and no “credible travel agent” behind the booking, requires great levels of transparency and confidence.</p> <p>Don’t forget, you are not getting an ATOL protected holiday through Airbnb. </p> <p><img src="https://assets.econsultancy.com/images/0007/9901/reviews.png" alt="" width="723" height="1076"> </p> <p>As you can see, Airbnb is definitely the best when it comes down to harnessing the power of <strong>genuine</strong> social proof. </p> <h3>It's price sensible </h3> <p>Airbnb connects people to unique travel experiences, at any price point.</p> <p>For all those millions of people with children who have to go on holiday in school holidays, Airbnb is perhaps the biggest secret they are waiting to discover. </p> <p> <img src="https://assets.econsultancy.com/images/0008/0209/airbnb__prices.png" alt="" width="700" height="349"></p> <p>My family and I have booked our last seven family holidays through Airbnb, genuinely saving hundreds of pounds compared to what we would have paid booking through traditional channels.</p> <h3>It's personable</h3> <p>From the copy used on the website, through to contacting Airbnb, you always receive a very personable experience.</p> <p>Very often when you arrive at your property, hosts will leave a small welcome note or present to welcome you on your arrival.</p> <p><img src="https://assets.econsultancy.com/images/resized/0007/9904/letter-blog-flyer.jpg" alt="Note " width="470" height="352"> </p> <p>You may even get a welcome message on the chalkboard of your new home… </p> <p><img src="https://assets.econsultancy.com/images/resized/0007/9905/new-chalk-blog-flyer.jpg" alt="Chalkboard note " width="470" height="352"> </p> <p>The biggest success that Airbnb delivers in this area is that 99% of the time you never actually interact in person with another human. <strong>Now that is a special user experience</strong>. </p> <h3>It's innovative</h3> <p>Airbnb isn't standing still. </p> <p>I love how the company is now harnessing its community of hosts around the world to provide unique and memorable experiences for travellers whilst staying at their property.</p> <p>This really helps Airbnb customers to ‘live like a local’.</p> <p><img src="https://assets.econsultancy.com/images/0008/0210/airbnb_innovation.png" alt="" width="700" height="249"> </p> <h3>It's memorable</h3> <p>Whether a flat for a night, a castle for a week or a villa for a month, Airbnb connects people to unique and inspirational travel experiences.</p> <p>With property type search filters including Tipi, Earth House and Treehouse, you know you are on to something quite unique.</p> <p><img src="https://assets.econsultancy.com/images/0007/9907/properties.png" alt="" width="655" height="252"> </p> <p>For all us business travellers, Airbnb also provides us with unique opportunities at competitive prices.</p> <p>In 2015, myself and two colleagues spent five days in central Vancouver staying in a luxury penthouse apartment worth over £2m.</p> <p>The cost to us? £130 per person, per night.</p> <p><img src="https://assets.econsultancy.com/images/0008/0212/airbnb_apartment.png" alt="" width="700" height="379"> </p> <h3>It's responsive</h3> <p>As a brand, Airbnb can provide lessons in responsiveness to many larger, and more experienced businesses.</p> <p>In my seven family holidays through Airbnb, there was only one occasion where we were let down and when it became clear that we needed Airbnb to resolve our issue with our host, they got on to fixing the issues straight away.</p> <p>Airbnb recognised the opportunity to turn a potential brand detractor into a brand advocate, by simply being responsive and respectful.</p> <p>I, for one, gained increased levels of respect for their brand following this.</p> <p>How many brands are truly responsive and respectful to customers when they have a negative user experience?</p><p><img src="https://assets.econsultancy.com/images/resized/0007/9911/inbox-blog-flyer.png" alt="Messages " width="470" height="836"></p> <h3>It's beautiful</h3> <p>From the brand logo, through to the app the Airbnb design and user experience is quite simply <em>beautiful</em>.</p> <p>I will hold my hands up and say, the Airbnb digital experience played a significant role in a current re-thinking of one of our client’s online experience.</p> <p><img src="https://assets.econsultancy.com/images/resized/0007/9910/beautiful-blog-flyer.png" alt="Beautiful " width="470" height="836"> </p> <h3>It's relevant</h3> <p>Small things throughout your stay show you how Airbnb is all about ensuring that customers truly enjoy their experience.</p> <p>For example, when arriving at your destination Airbnb offers helpful directions to your accomodation.</p> <p><img src="https://assets.econsultancy.com/images/resized/0007/9903/welcome-blog-flyer.png" alt="Welcome " width="470" height="836"> </p> <h3>It's human</h3> <p>In summary, Airbnb is human. Browse around and you see people like you and me who are a part of this unique, growing community. </p> <p>The people who are taking a different path to experience more memorable, unique and personable travel experiences than we have ever had before.</p> <p><img src="https://assets.econsultancy.com/images/0008/0213/airbnb_belong_anywhere.png" alt="" width="700" height="290"><br> <br><img src="https://assets.econsultancy.com/images/0008/0214/airbnb_recently_viewed.png" alt="" width="700" height="353"></p> <h3>Conclusion</h3> <p>To me, Airbnb is one of the most inspirational and progressive brands in the world, regardless of industry.</p> <p>This is mainly due to its forward thinking and absolute focus on the customer experience. </p> <p>The question is, will the Airbnb experience become the future of the travel industry?</p> <p>And what can travel agents do to start offering their current customers some of what Airbnb have made central to their overall customer experience? </p> <p><em>For more on this topic, see:</em></p> <ul> <li><a href="https://econsultancy.com/blog/64849-could-travel-sites-like-airbnb-be-doing-more-with-their-content/"><em>Could travel sites like Airbnb be doing more with their content?</em></a></li> <li><a href="https://econsultancy.com/blog/68225-10-examples-of-great-airbnb-marketing-creative/"><em>10 examples of great Airbnb marketing creative</em></a></li> <li><a href="https://econsultancy.com/training/courses/creating-superior-customer-experiences/"><em>Creating Superior Customer Experiences Training Course</em></a></li> </ul> tag:econsultancy.com,2008:BlogPost/68317 2016-10-03T09:52:35+01:00 2016-10-03T09:52:35+01:00 A day in the life of... CTO at Resident Advisor Ben Davis <p>Remember, if you're looking for a new challenge in digital <a href="https://jobs.econsultancy.com/">our jobs board</a> lists hundreds of open positions, and you can benchmark your own digital knowledge using our <a href="https://econsultancy.com/training/digital-skills-index-lite/">Digital Skills Index</a>.</p> <h3>Please describe your job: What do you do?</h3> <p>I'm CTO for Resident Advisor - a global online electronic music magazine and ticketing platform.</p> <p>I manage and work in the development team who are responsible for web and app development of our entire platform.</p> <p>Generally I ensure that we are using the correct processes, methodology, architecture and infrastructure to deliver high quality software with a focus on value and iterative delivery. </p> <p>I also facilitate roadmap sessions to ensure that we are delivering items of the highest value for our end users and liaise with other departments to ensure that we are developing smart solutions to their problems to help make their jobs easier.</p> <p><img src="https://assets.econsultancy.com/images/0007/9592/david_miranda.jpg" alt="david miranda" width="258" height="258"></p> <h3>Whereabouts do you sit within the organisation? Who do you report to?</h3> <p>I report directly into one of the co-founders but have a close relationship with both of them. I also work closely with the head of product to manage the roadmap. </p> <h3>What kind of skills do you need to be effective in your role? Tell us about a typical working day…</h3> <p>I try very actively to stay as technical as I can.</p> <p>Of course, I can't spend my whole day coding anymore but I do try to make sure I am at least pairing with a developer or planning out architectural improvements around 50% of the time - I see this as vital in being as effective as I can for the tech teams.</p> <p>Other bits of my time are taken up by requests for development time, process management, <a href="https://econsultancy.com/blog/66702-how-devops-is-changing-the-business-of-it-consulting/">DevOps</a>, roadmap management and stakeholder engagement.</p> <h3>What do you love about your job? What sucks?</h3> <p>I love that I can be part of an organisation made up of such talented people that is so open to change. No one is selfish with their ideas and there is a real feeling that we are all in it together.</p> <p>I also have a great team that I can bounce ideas off and who come up with some great solutions.</p> <p>Of course my first love has always been coding and not always being able to do that can be frustrating but being able to mix that with higher level business challenges means that there is never a dull moment and always a lot to learn. </p> <h3>What kind of goals do you have? What are the most useful metrics and KPIs for measuring success?</h3> <p>A fair few of my goals involve delivery management and comms.</p> <p>Quality is something that I heavily strive for and helping the team deliver software that is both bug free and easy to maintain is a constant battle in our world.</p> <p>It's actually fairly difficult and risky to apply KPIs or success metrics to development. However, by always retrospecting and striving for continuous improvement I think our effectiveness becomes obvious.</p> <p>Happiness and engagement of the development team is also a good measure of success. And obviously improvement of our offering to our end users!</p> <p><em>The Resident Advisor website</em></p> <p><img src="https://assets.econsultancy.com/images/0007/9593/Screen_Shot_2016-09-27_at_15.03.54.png" alt="resident advisor" width="615" height="320"></p> <h3>What are your favourite tools to help you to get the job done?</h3> <p>I use both Trello and Jira. We started using Trello when I first started at Resident Advisor as I had been using it to manage my own workflow for a long time.</p> <p>The team eventually and naturally outgrew Trello as we needed more advanced features that Jira offers. Jira isn't perfect but it does have the majority of features that you can ask for from an electronic board and is good value.</p> <p>I now use Trello for our high level roadmap which is working really well for us. </p> <p>Personally, I prefer physical boards for tracking work as there is something real (and thus more satisfying) about moving tasks through your workflow.</p> <p>But physical boards have obvious drawbacks like not being viable for distributed teams. </p> <h3>How did you get started in the digital industry, and where might you go from here?</h3> <p>I graduated with a degree in computer engineering. My course was a sandwich degree and my placement - Avco Systems - sponsored me through my final year and offered me a job on graduation.</p> <p>After that I worked for a larger internal development team at Totaljobs where I learned a lot about <a href="https://econsultancy.com/blog/67346-agile-development-what-do-marketers-need-to-know/">agile delivery</a> and grew to become a dev manager in charge of around 16 teams.</p> <p>Eventually, I wanted to take what I had learnt and do it in a setup where I could have more say and control on a product that I really care about, now here I am at Resident Advisor!</p> <p>It's early days and I'm loving every minute of it so it's hard to see further ahead from here.</p> <h3>Which brands do you think are doing digital well?</h3> <p><a href="https://econsultancy.com/blog/64975-the-guardian-s-agile-processes-showcase-digital-best-practice/">The Guardian are great</a>. Being traditionally print I feel like they've have had to come from behind thus making their achievement even more impressive.</p> <h3>Do you have any advice for people who want to work in the digital industry?</h3> <p>I tend to find that the best people in the industry have a genuine interest in what they do.</p> <p>The best developers eat, live and breathe development and I think the same can be true of all digital disciplines.</p> <p>For example, marketing and sales people are so much more effective when they truly believe in the product. Follow your interests and work hard. </p> tag:econsultancy.com,2008:BlogPost/68266 2016-09-13T10:13:05+01:00 2016-09-13T10:13:05+01:00 Oooh, cars! We review the new Lamborghini website Ben Davis <p>(TL;DR - it's not a bad website at all; I like the layout and there's some stunning photography, but there are some simple bits of content strategy that Lamborghini should heed to ensure its impressive content is showed off to its fullest.)</p> <h3>What could Lamborghini improve?</h3> <h4>Copywriting and formatting needs improvement</h4> <p style="font-weight: normal;">It feels silly to concentrate on the words straightaway when Lamborghini is so famous for the visual.</p> <p style="font-weight: normal;">But this feels like an area where improvement can be made.</p> <p style="font-weight: normal;">Look at the screenshots from the Huracàn product page below. The subheadings are about as uninspiring as it gets - <strong>does 'overview' get the blood pumping</strong>?</p> <p style="font-weight: normal;">The other subheaders aren't much better ('emotion' for example). And look at the copy itself, just block paragraphs that are difficult to read.</p> <p style="font-weight: normal;"><a href="https://www.lamborghini.com/en-en/models/huracan/huracan-spyder"><img src="https://assets.econsultancy.com/images/0007/8882/Screen_Shot_2016-09-07_at_15.25.58.png" alt="lamborghini website" width="615" height="310"></a> </p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0007/8883/Screen_Shot_2016-09-07_at_15.26.21.png" alt="lamborghini website" width="615" height="301"> </p> <p style="font-weight: normal;">Sadly, this is the story throughout quite a lot of the website. Check out the <a href="https://www.lamborghini.com/en-en/ownership/services/accessori-originali">accessory page</a>, which is majorly lacking copy.</p> <p style="font-weight: normal;">There's also a problem with large chunks of text on mobile being even more unreadable.</p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0007/8908/IMG_3139.PNG" alt="lamborghini website on mobile" width="300" height="533"> </p> <p style="font-weight: normal;">There is a some hope, though. Take a look at the concept car product pages and the subheadings are a big improvement.</p> <p style="font-weight: normal;">The formatting of the text could still be better - even within a fairly rigid template, line breaks are a must.</p> <p style="font-weight: normal;"><a href="https://www.lamborghini.com/en-en/models/concept/asterion"><img src="https://assets.econsultancy.com/images/0007/8885/Screen_Shot_2016-09-07_at_15.45.36.png" alt="lamborghini website" width="615" height="320"></a></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0007/8884/Screen_Shot_2016-09-07_at_15.45.29.png" alt="design" width="615" height="324"></p> <h4>Data capture needs improvement</h4> <p style="font-weight: normal;">I spent a bit of time trying to find a way to give my email address to Lamborghini.</p> <p style="font-weight: normal;">'Contact us' is right at the bottom of the page and includes mainly phone numbers, as well as a contact form.</p> <p style="font-weight: normal;">But how do I subscribe to updates, or register my interest quickly from a product page?</p> <h4>Header menu needs improvement</h4> <p style="font-weight: normal;">For quite a simple menu (shown below), the header drops down a long way when you scroll over it.</p> <p style="font-weight: normal;">Spreading the dropdown categories horizontally would allow Lamborghini to reduce this big overlap with page content.</p> <p style="font-weight: normal;">The menu font is grey on grey, which is not ideal at all, making it quite difficult to make out the categories in the dropdowns.</p> <p style="font-weight: normal;">Furthermore, though one can click on 'Models' to go to a category page, this isn't immediately obvious and perhaps a 'see all' option should be introduced to the menu.</p> <p style="font-weight: normal;">Lastly and perhaps most importantly, for such as visual-led brand, I think thumbnail images of the models should be included in the header menu.</p> <p style="font-weight: normal;">It must be said that no major supercar manufacturer website has managed this (as far as my research leads me to believe), but I believe it would aid easy navigation.</p> <p style="font-weight: normal;">Compare Lamborghini's header menu with BMW.</p> <p style="font-weight: normal;">I think a compromise between the two would be ideal for Lamborghini. It should be noted that on mobile, however, the menu text is much clearer.</p> <p style="font-weight: normal;"><em>Lamborghini header menu (please note that my GIF quality makes the menu font ever so slightly fainter)</em></p> <p style="font-weight: normal;"><em><img src="https://assets.econsultancy.com/images/0007/8886/header_lamborghini.gif" alt="lamborghini header menu" width="615"></em></p> <p style="font-weight: normal;"><em>BMW header menu</em></p> <p style="font-weight: normal;"><img src="https://assets.econsultancy.com/images/0007/8887/bmw_header.gif" alt="bmw header menu" width="615"></p> <p>Lastly, take a look at the 'Experience' tab in the header menu.</p> <p>The categories within are pretty opaque - Esperienza and Accademia - but they include fantastic driving experiences.</p> <p>Lamborghini could do with adding some copy in the menu so this is made clear.</p> <p><img src="https://assets.econsultancy.com/images/0007/8888/Screen_Shot_2016-09-07_at_16.42.49.png" alt="lamborghini header menu" width="500" height="287"></p> <h4>Search function needs improvement</h4> <p>Not much commentary needed here, just a screenshot of search results.</p> <p>Some tidying up is required. Other languages are returned in results, page titles are missing ('False?') and the descriptions aren't presented as nicely as they could be.</p> <p>Additionally, a search bar within the homepage would be preferable to the current button which summons a light box.</p> <p><img src="https://assets.econsultancy.com/images/0007/8889/Screen_Shot_2016-09-07_at_16.51.33.png" alt="lamborghini website" width="615" height="384">  </p> <h3>What has Lamborghini done well?</h3> <h4>Scrolling experiences are done well</h4> <p>Automotive websites have quite a bit of content in them and that's why I like it when they go for long scrolling pages.</p> <p>A scrolling homepage gives lots of room to link off to other pages with content blocks, lots of room for imagery and for text.</p> <p>I don't think it's overstating the point to say that the experience of scrolling through car photography is a lot more enjoyable (even sensuous) than, for example, the static and click-heavy pages that Mercedes uses (see below).</p> <p><img src="https://assets.econsultancy.com/images/0007/8890/Screen_Shot_2016-09-07_at_17.31.31.png" alt="mercedes website" width="615" height="349"></p> <h4>Product page imagery and video are done well</h4> <p>The hero imagery at the top of each product page is great.</p> <p><img src="https://assets.econsultancy.com/images/0007/8891/Screen_Shot_2016-09-07_at_17.38.27.png" alt="lamborghini product page" width="615" height="341"></p> <p>Each product page also has an extensive gallery, which often includes neatly embedded videos with the option to subscribe to Lamborghini's YouTube channel.</p> <p><img src="https://assets.econsultancy.com/images/0007/8892/Screen_Shot_2016-09-07_at_17.43.00.png" alt="lamborghini product page" width="615" height="322"></p> <p>For all the faults of this website, it nails this most important factor - showing off the cars.</p> <p>Some of the photos may be slightly photoshopped, but they portray the cars in a stylised fashion that is hard to argue with.</p> <h4>Social is done well</h4> <p>There are plenty of social icons on the homepage, and a tesselation of latest posts from various accounts (below).</p> <p><img src="https://assets.econsultancy.com/images/0007/8905/Screen_Shot_2016-09-08_at_08.58.11.png" alt="social media lamborghini" width="615" height="338"></p> <h4>Homepage featured content and events is done well</h4> <p>The homepage includes little content blocks that link through to news items, as well as upcoming events and experiences.</p> <p>There's also a large gallery on the homepage and plenty of features highlighting various pages on the site.</p> <p>The homepage is the website in microcosm - the imagery is great but the copy could be improved a little to make it more coherent.</p> <p>However, I particularly like the Lamborghini World news items - these blocks link to simple blog posts with hero images, and they add some topical flavour to the site, something that many manufacturers neglect.</p> <p>The ability to publish to quickly to an automotive website helps <a href="https://econsultancy.com/training/courses/digital-content-strategy/">content strategy</a> (working in tandem with social) and keeps everything fresh.</p> <p><img src="https://assets.econsultancy.com/images/0007/8902/Screen_Shot_2016-09-08_at_08.44.13.png" alt="lamborghini website" width="615" height="338"></p> <h3>What is up for debate?</h3> <h4>'Find a dealer' could be more obvious</h4> <p>The 'find a dealer' content is quite a way down the homepage (almost at the bottom) and is also a bit hidden in the header menu.</p> <p>Perhaps this could have its own tab at the top level of the header menu.</p> <h4>Homepage sliders are not everyone's cup of tea</h4> <p>There are three hero images at the top of the homepage that rotate. </p> <p>Though this slider gives the opportunity to pack in more content, some people find them distracting.</p> <p>Personally, I'm not a fan, but others may argue a bit of dynamism is no bad thing.</p> <p>The sliders are carried through to mobile, but there is no way to manually move through them on the smaller screen.</p> <h4>More focus on technical detail?</h4> <p>Should there be more focus on technical detail and performance?</p> <p>There are specs on each model product page and some small photos (see below), but I want to see a beautiful high definition photo of an engine I can get excited about.</p> <p>There is a page about carbon fibre technology, but perhaps this should be better integrated in product pages.</p> <p><img src="https://assets.econsultancy.com/images/0007/8904/Screen_Shot_2016-09-08_at_09.03.41.png" alt="lamborghini website" width="615" height="341"></p> <h4>Car configurator is a bit lost?</h4> <p>You can customise your own Lamborghini through the configurator.</p> <p>You can't do this for all models, but I still think it warrants inclusion somewhere on the homepage.</p> <p>At the moment there's a CTA on each relevant product page, but a customised Lamborghini is surely something that people will share once they have created it, so why not make it more of a bit of marketing than a product page tool.</p> <p>The configurator is a new feature, so perhaps Lamborghini is going for a soft launch here.</p> <p><img src="https://assets.econsultancy.com/images/0007/8906/Screen_Shot_2016-09-08_at_09.11.36.png" alt="lamborghini configurator" width="615" height="323"></p> <h4>The same page template can get a bit repetitive</h4> <p>This is the one downside of scrolling templates - each page can feel samey.</p> <p>I don't think that's a massive problem for Lamborghini here, but it's something that could be improved by the occasional interactive element in product pages.</p> <h3>Conclusion...</h3> <p>There's lots of potential here. Lamborghini has added content, some of which we haven't covered (Museum, History etc.) and the website is very browsable (despite search and menu deficiencies).</p> <p>All in all, the rich media, publishing capability (news) and the new configurator make for a website that should blend well with social media strategy.</p> <p>Some tweaks, particularly on data capture and copy formatting, would make a big difference. </p> <p><em>What do you think, car lovers?</em></p> <p><em>More on automotive:</em></p> <ul> <li><em><a href="https://econsultancy.com/blog/65664-how-can-automotive-brands-use-digital-to-appeal-to-car-buyers/">How can automotive brands use digital to appeal to car buyers?</a> </em></li> <li><a href="https://econsultancy.com/blog/66479-how-lamborghini-uses-social-engagement-loyalty-kpis-to-measure-desire/"><em>How Lamborghini uses social engagement &amp; loyalty KPIs to measure 'desire'</em></a></li> <li><a href="https://econsultancy.com/blog/66853-what-can-brands-learn-from-automotive-website-trends/"><em>What can brands learn from automotive website trends?</em></a></li> <li><a href="https://econsultancy.com/blog/67016-land-rover-an-automotive-revolution-in-luxury-content-marketing/"><em>Land Rover: an automotive revolution in luxury content marketing </em></a></li> </ul> <p><em>Lovers of cars and digital marketing can see speakers from Nissan and Jaguar Land Rover at the Festival of Marketing 2016, October 5-6. </em><em><a href="http://www.festivalofmarketing.com/welcome?utm_source=econsultancy&amp;utm_medium=blog&amp;utm_campaign=econ%20blog">Get your tickets here.</a></em></p> tag:econsultancy.com,2008:BlogPost/68222 2016-08-30T10:34:00+01:00 2016-08-30T10:34:00+01:00 Ecommerce product filters: Best practice tips for a great UX Greg Randall <p>There are best practice guidelines to the use of filters that retailers should consider following. This is the purpose of this article.  </p> <p>It will address issues and present the best methods to construct filter behaviour in the context of enhancing online experiences. </p> <p>Due to the size of this topic which must span the various screen sizes, this article only focuses on desktop screens (and makes some references to tablet screens).</p> <p>For retailers who have large product ranges, filters are an essential part of improving online experiences.  </p> <p>If retailers can present and treat filters in the right manner, it enables consumers to quickly refine a large product range by the product attributes he/she deems important and aligned to his/her intent.  </p> <p>Some would call this act of<strong> empowering consumers with the means to manipulate content by their own hand, a personalised experience.</strong></p> <p>In order for filters to add value to a consumer’s journey, there are a core set of “filtering characteristics” to consider:   </p> <ol> <li> <strong>Filter placement:</strong> Where should filters be located on a page?</li> <li> <strong>Presenting relevant filters by product range:</strong> Different products with different attributes demand different filter options.</li> <li> <strong>Presenting the filtering options:</strong> How should a long list of filter options display as a default? </li> <li> <strong>Visually validating selected filters:</strong> When consumers select a filter, how should this be presented to provide consumers the confidence the site has reacted to this request?</li> </ol> <p>This narrative is based on the assumption that the integrity of a retailer’s product master data is to a high standard.  </p> <p>If not, this becomes the first challenge the business must overcome.  </p> <p>Some recommendations in this article are reliant on this business function.</p> <h3>Filter Placement </h3> <p><a href="https://www.nngroup.com/articles/horizontal-attention-leans-left/" target="_blank">NN Group’s eye-tracking study back in 2010</a> found 69% of consumers spend most of their time focusing on the left hand side of the page.</p> <p>There is no shortage of examples of well-known retailers placing their filters on the left hand side of the page, one of which is ASOS:</p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/resized/0007/8402/asos_filter-blog-flyer.png" alt="asos" width="470" height="516"></p> <p>From the perspective of filter placement on a page, most retailers are doing a great job.  </p> <p>This is the easy part done. </p> <h3>Presenting relevant filters by product range</h3> <p>Filters have the potential to become an enabling ingredient for consumers to shop in their own individualised way based on their unique personal needs and preferences.  </p> <p>For retailers to make the most of this opportunity there is a need to deliver relevant and unique filtering options for each category.  </p> <p>This requires retailers to have a good understanding of how consumers want to buy from them. There is an increased need for <a href="http://www.fastcompany.com/3052337/why-genuine-empathy-is-good-for-business">consumer empathy.</a>  </p> <p>One good example of relevant filtering per category is Sephora which has provided a number of different refinement options for consumers interested in Moisturisers.</p> <p>Within the Sephora Moisturiser category consumers can filter by:</p> <ol> <li>A consumer’s age (something consumers might not be comfortable discussing in a physical retail setting).</li> <li>Brand.</li> <li>Concerns (another topic some consumers might not be comfortable discussing).</li> <li>Ingredient preferences.</li> <li>Size of the product (travel vs value). Some consumers may want this product to remain in their purse/handbag while others may want to purchase something larger to save money.</li> <li>Skin type.</li> <li>Sun protection.</li> <li>Price Range.</li> </ol> <p>Notice how <a href="https://assets.econsultancy.com/images/0007/8404/sephora_moisturiser_filter.png">price range is the last of the filters in presentation</a>. This is done intentionally.  </p> <p>If the consumer finds a product perfectly matching her needs, does price matter?</p> <p>Though there are over 450 moisturiser products to choose from, but with the comprehensive filter options on offer this range could grow in size and consumers would still have a good experience. </p> <h3>The Presentation of Filters </h3> <p>The majority of retailers <a href="https://www.smashingmagazine.com/2015/04/the-current-state-of-e-commerce-filtering/" target="_blank">present filters in four different ways</a>.  </p> <p>They are: </p> <ol> <li>Displaying all filters at once.</li> <li>Applying scrolling capability within each filter type.</li> <li>Presenting filter titles with no filter options to select.</li> <li>Truncate filters (abbreviate the presentation by displaying a sub set of the filters and provide a “See more” or “See all” hyperlink to present all other filter options).</li> </ol> <h3>Displaying All Filters</h3> <p>When displaying all filters the list becomes too busy for the consumer’s eye, making it difficult to identify and absorb all options presented. </p> <p>An example of this in action is Gamestop.com.</p> <p>While the filters are styled blue to indicate they are hyperlinks, the list is long, the font is small and the spacing is tight.  </p> <p>This style of filter presentation also makes for difficult finger targets when this is translated to tablet screens.</p> <p><em>Click to see the full list of filters</em></p> <p><a href="https://assets.econsultancy.com/images/0007/8405/gamestop.png"><img src="https://assets.econsultancy.com/images/0007/8492/gamestop_small.png" alt="" width="179" height="395"></a></p> <h3>Apply scrolling capability for filters </h3> <p>A good example of filters with scrolling capability is found at Sephora.com.</p> <p><em>Click to see the full list of filters</em></p> <p><a href="https://assets.econsultancy.com/images/0007/8404/sephora_moisturiser_filter.png"><img src="https://assets.econsultancy.com/images/0007/8494/sephora_moisturiser.png" alt="" width="179"></a></p> <p>The issue with this approach is the scroll bar itself.  </p> <p><a href="https://www.smashingmagazine.com/2015/04/the-current-state-of-e-commerce-filtering/" target="_blank">Usability research completed</a> on this type of filter presentation found the following issues:</p> <ol> <li>The fixed height of the filter frame will only ever present four to five options for selection.</li> <li>Small finger target on tablet screens.</li> <li>“Scroll Hi-jacking”. This is a term used to describe the consumer’s need to be <a href="https://www.smasbhingmagazine.com/2015/04/the-current-state-of-e-commerce-filtering/" target="_blank">constantly aware of his/her mouse</a> when using the scroll bars. </li> <li>Slow page load speed.  </li> </ol> <h3>Only presenting filter titles </h3> <p>Presenting only filter titles and not showing any options may sound like a good idea for retailers with many filter types, but it comes with issues.  </p> <p>For example, Staples.com does this across its entire site, below is what you see when you select the Laser Printer sub category. </p> <p><img src="https://assets.econsultancy.com/images/0007/8495/staples_filter.png" alt="" width="179"></p> <p>The issues with this approach:</p> <ol> <li>Sometimes the naming of the filter may not be intuitive and the filter options help to explain what it means. </li> <li>The display of filters can prompt consumers to make a selection.</li> <li>Hiding filter types increases the <a href="https://www.nngroup.com/articles/interaction-cost-definition/" target="_blank">physical effort</a> of a consumer in making a selection (more clicking is required).   </li> </ol> <h3>Truncating filters</h3> <p>“Truncating filters” is a fancy term for partially displaying a selection of filtering options for each filter type with a clear “See/Show More” hyperlink prompting that action if necessary.  </p> <p>This filter presentation option has the most benefits, but there are conditions to this approach in order for it to be effective.</p> <ol> <li>Retailers will know what brands are the most popular and should display these first. Once a user selects “See More” the list of filters would then present in alphabetical order.</li> <li>“See More” or “See All” hyperlinks are clear and obvious.</li> <li>In order to manage interaction cost there needs to be clear and obvious visual cues so users know their filter selection has been honoured. It is also important to present intuitive methods to deselect filters.  </li> </ol> <p>Macy’s has the right idea by providing visual cues to the selected filters, and repeats the selected filters at the top of the page.</p> <p><img src="https://assets.econsultancy.com/images/0007/8500/macys_filter_large.png" alt="" width="750" height="996"></p> <p>One of the better examples of visual filter validation in action is Newegg.com.  </p> <p>The selected filters are repeated and presented at the top of the page, they are visually strong, and simple to deselect.  </p> <p><img style="vertical-align: middle;" src="https://assets.econsultancy.com/images/resized/0007/8411/new_egg_filter-blog-flyer.png" alt="" width="470" height="294"> </p> <h3>The end...</h3> <p>That wraps up our quick tour of filters on desktop.  </p> <p>I hope you enjoyed reading this article as much as I enjoyed creating it!</p> tag:econsultancy.com,2008:BlogPost/68177 2016-08-16T11:22:00+01:00 2016-08-16T11:22:00+01:00 Eight drool-worthy restaurant websites Nikki Gilliland <p>A way to showcase creativity and inspire cravings, a <a href="https://econsultancy.com/blog/62044-the-anatomy-of-a-perfect-restaurant-website/" target="_blank">good restaurant website</a> can enhance the dining experience before you’ve even sat down to eat.</p> <p>Here are eight examples to drool over...</p> <h3><a href="http://www.dinnerbyheston.co.uk/" target="_blank">Dinner by Heston</a></h3> <p>Known for his experimental take on food, Blumenthal's Dinner by Heston website evokes the serious business of gastronomy. </p> <p><img src="https://assets.econsultancy.com/images/0007/7916/Dinner_by_Heston.PNG" alt="" width="780" height="521"></p> <p>A full-page background video gives the site a sensory feel, while clever copywriting breaks down the name and concept.</p> <p><img src="https://assets.econsultancy.com/images/0007/7914/Dinner_by_Heston_2.PNG" alt="" width="780" height="527"></p> <p>Like with most celebrity chefs, it's likely that people visit the restaurant because of the famous name.</p> <p>Consequently, the personal voice of Heston is a nice touch, and offers further incentive to visit.</p> <p><img src="https://assets.econsultancy.com/images/0007/7915/Dinner_by_Heston_3.PNG" alt="" width="780" height="536"></p> <h3><a href="https://www.zizzi.co.uk/" target="_blank">Zizzi</a></h3> <p>One of the most creative chain restaurant websites out there, Zizzi is a colourful contrast to the above example.</p> <p><img src="https://assets.econsultancy.com/images/0007/7918/Zizzi.PNG" alt="" width="780" height="376"></p> <p>Zizzi is all about family and fun, and these characteristics are conveyed with playful visuals and interactive elements.</p> <p>Further reflecting the 'social eating' theme, there are also nods to the brand's social media presence.</p> <p><img src="https://assets.econsultancy.com/images/0007/7919/Zizzi_social.PNG" alt="" width="780" height="419"></p> <p>Like most chains, it also includes nutritional information and lots of calls-to-action on its bright, easy-to-navigate menu.</p> <p><img src="https://assets.econsultancy.com/images/0007/7920/Zizzi_menu.PNG" alt="" width="780" height="597"></p> <h3><a href="http://baolondon.com/" target="_blank">Bao</a></h3> <p>Bao's website is beautifully simple - a reflection of the restaurant's humble approach to food.</p> <p><img src="https://assets.econsultancy.com/images/0007/7923/Bao.PNG" alt="" width="742" height="796"></p> <p>Instead of a menu, there is merely an explanation of the main dish.</p> <p>With its less-is-more approach, Bao's website serves to intrigue more than entice.</p> <p><img src="https://assets.econsultancy.com/images/0007/7924/Bao_menu.PNG" alt="" width="780" height="577"></p> <p>Using social media to offer more information on the food and behind-the-scenes goings-on, it shrewdly plays up to the 'must-visit' hype.</p> <blockquote class="twitter-tweet"> <p lang="en" dir="ltr">Cod Black. New Bao at Fitzrovia <a href="https://t.co/PGmcR3CJ1s">pic.twitter.com/PGmcR3CJ1s</a></p> — B A O 包 (@bao_london) <a href="https://twitter.com/bao_london/status/762930293544280064">August 9, 2016</a> </blockquote> <h3><a href="http://www.phocafe.co.uk/" target="_blank">Pho</a></h3> <p>Like Zizzi, Pho uses bright visuals to bring its brand to life.</p> <p><img src="https://assets.econsultancy.com/images/0007/7928/Pho.PNG" alt="" width="780" height="623"></p> <p>Recognising that chains can feel overly-commercial compared to independent restaurants, it promotes authenticity by telling a personal story.</p> <p><img src="https://assets.econsultancy.com/images/0007/7929/Pho_story.PNG" alt="" width="780" height="671"></p> <p>With the contrasting nature of quirky illustrations and photography, the menu is both engaging and fun.</p> <p><img src="https://assets.econsultancy.com/images/0007/7930/Pho_menu.PNG" alt="" width="780" height="631"></p> <h3><a href="http://www.dishoom.com/" target="_blank">Dishoom</a></h3> <p>It's easy to assume that the pared-down nature of Dishoom's landing page is a reflection of the whole website. </p> <p>However, the subtle 'All Welcome' button leads the user to a surprising amount of engaging and valuable content.</p> <p> <img src="https://assets.econsultancy.com/images/0007/7931/Dishoom.PNG" alt="" width="780" height="400"></p> <p>Inspired by the old Irani cafe's of Bombay, Dishoom uses its digital space to bring to life the sights and sounds of the eating experience.</p> <p><img src="https://assets.econsultancy.com/images/0007/7932/Dishoom_2.PNG" alt="" width="780" height="387"></p> <p>By calling what any other brand might call a blog a 'Journal', it cleverly evokes a sense of history and authenticity.</p> <p>Using storytelling to great effect, it means the user is likely to get lost in the website rather than check one page and leave.</p> <p> <img src="https://assets.econsultancy.com/images/0007/7933/Dishoom_3.PNG" alt="" width="780" height="391"></p> <h3>Jamie Oliver's <a href="http://www.fifteen.net/" target="_blank">Fifteen</a> </h3> <p>With its understated background and subtle typography, the food is what really stands out on Fifteen's website.</p> <p><img src="https://assets.econsultancy.com/images/0007/7935/Jamie_Oliver_Fifteen.PNG" alt="" width="780" height="501"></p> <p>Likewise, the decision to include all information on one-page (as well as the option to click on the header) means that it creates a pleasingly smooth scrolling experience.</p> <p><img src="https://assets.econsultancy.com/images/0007/7936/Fifteen_menu.PNG" alt="" width="710" height="881"></p> <p>A simple design, yet it proves that restaurant websites don't always need to be jam-packed full of content.</p> <p><img src="https://assets.econsultancy.com/images/0007/7937/Fifteen_food.PNG" alt="" width="750" height="830"></p> <h3><a href="http://maxbrenner.com/chocolate-dessert-bar/" target="_blank">Max Brenner Chocolate Dessert Bar</a></h3> <p>Max Brenner describes its offering as a "chocolate sensory immersion that encourages you to open your mind about how you connect with chocolate".</p> <p>Unsurprisingly, its website is a similarly indulgent experience.</p> <p><img src="https://assets.econsultancy.com/images/0007/7942/Max_Brenner.PNG" alt="" width="780" height="401"></p> <p>Chock-full of tantalising imagery, it showcases its main ingredient to great effect.</p> <p><img src="https://assets.econsultancy.com/images/0007/7943/Max_Brenner_2.PNG" alt="" width="780" height="403"></p> <p>With an added retail offering, it also promotes its products seamlessly thoughout the site.</p> <p>The only thing that's missing is the option to actually buy online.</p> <p><img src="https://assets.econsultancy.com/images/0007/7945/Max_Brenner_4.PNG" alt="" width="780" height="469"></p> <h3><a href="http://www.burgerandlobster.com/home/" target="_blank">Burger and Lobster</a></h3> <p>The website for Burger and Lobster is impressive in both design and attention to detail.</p> <p><img src="https://assets.econsultancy.com/images/0007/7946/Burger_Lobster.PNG" alt="" width="780" height="404"></p> <p>With all content built onto just one page, it works by moving the user onto different sections depending on where they click.</p> <p><img src="https://assets.econsultancy.com/images/0007/7947/burger_lobster_2.PNG" alt="" width="780" height="502"></p> <p>While there is no need to include a menu (with just two very obvious dishes to choose from), it replaces it with an FAQ section instead.</p> <p>It's rare for restaurants to experiment with a humorous <a href="https://econsultancy.com/blog/67268-how-to-achieve-the-right-tone-of-voice-for-your-brand/">tone of voice</a>, so this makes for a refreshing approach.</p> <p><img src="https://assets.econsultancy.com/images/0007/7948/burger_and_lobster_faq.PNG" alt="" width="581" height="562"></p> <p>For more on topics like this one, check out the following articles:</p> <ul> <li><a href="https://econsultancy.com/blog/67785-why-restaurants-need-a-hyper-local-influencer-marketing-strategy" target="_blank">Why restuarants need a hyper-local influencer marketing strategy</a></li> <li><a href="https://econsultancy.com/blog/66045-ux-design-for-restaurants-leaves-a-bad-taste-in-the-mouth" target="_blank">UX design for restaurants leaves a bad taste in the mouth</a></li> <li><a href="https://econsultancy.com/blog/67411-how-zizzi-uses-gamification-to-boost-voucher-engagement" target="_blank">How Zizzi uses gamification to boost voucher engagement</a></li> <li><a href="https://econsultancy.com/blog/65214-how-london-s-favourite-restaurants-are-performing-on-mobile" target="_blank">How London’s favourite restaurants are performing on mobile</a></li> </ul> <p><em><strong>Food &amp; Drink is just one of the sectors covered at the <a href="http://www.festivalofmarketing.com/welcome?utm_source=econsultancy&amp;utm_medium=blog&amp;utm_campaign=econ%20blog">Festival of Marketing 2016</a>, which takes place in London on October 5-6.</strong></em></p> tag:econsultancy.com,2008:BlogPost/68028 2016-07-06T14:21:35+01:00 2016-07-06T14:21:35+01:00 Five ecommerce lessons from Burberry and Hermes Bart Mroz <p dir="ltr"><a href="https://us.burberry.com/">Burberry</a> is a luxury brand that really gets it right. The brand’s digital experience is perfectly aligned with its image and persona - creating a sleek, chic, modern and cool feel.</p> <p dir="ltr">The couture brand uses bold visuals throughout its site, with a dynamic homepage that integrates interactive elements and visually stunning photography that instantly captures the attention of any consumer.</p> <h3 dir="ltr">Create compelling visual design</h3> <p dir="ltr">It’s important to build an ecommerce site that offers compelling visual design to help differentiate your brand from the competition.</p> <p dir="ltr">Burberry does an excellent job at this by creating innovative product pages that are dramatically different from those of its competitors.</p> <p dir="ltr">The details that go into the design elevate the shopping experience and add to the perceived brand value.</p> <p><img src="https://assets.econsultancy.com/images/0007/6804/product_images_plus_thumbnail.png" alt="" width="700" height="412"></p> <p dir="ltr">Product images are all perfectly shot on a consistent backdrop with every element of the product and the model in clear, crisp focus.</p> <p dir="ltr">This makes it possible to see even minute details without zooming in. Consistent and high-quality visuals such as these display your products in the best possible light.</p> <p dir="ltr">One unique visual feature that Burberry’s site utilizes is the use of large image tiles, which makes for a visually appealing browsing experience.</p> <p dir="ltr">Additionally, supplementary product details are sectioned off so consumers can quickly find the exact information they desire.</p> <p><img src="https://assets.econsultancy.com/images/0007/6805/recommended.png" alt="" width="700" height="414"></p> <p dir="ltr">And while many ecommerce sites provide <a href="https://econsultancy.com/blog/65866-how-do-product-recommendations-influence-buyer-behavior/">product recommendations</a> directly below the featured product, this practice can distract shoppers from following through on the purchase.</p> <p dir="ltr">By reducing the footprint of the product recommendation display and aligning it off-center, Burberry presents shoppers with additional options without detracting from the main product. </p> <h3 dir="ltr">Infuse branded content with commerce</h3> <p dir="ltr">An ecommerce site is much more than a destination to purchase products. It provides a platform for brands to engage with visitors and deliver content that tells an interactive story about the brand.</p> <p dir="ltr">Burberry’s website achieves this by seamlessly merging content and commerce to create a fluid and consistent brand image throughout the site.</p> <p dir="ltr">These experiences give users an emotional connection to the brand – similar to that of visiting a physical retail store.</p> <p><img src="https://assets.econsultancy.com/images/0007/6806/burberry_acoustic.png" alt="" width="700" height="416"></p> <p dir="ltr">The <a href="https://us.burberry.com/acoustic/#/acoustic">Acoustic</a> section, for example, features up-and-coming musicians performing in natural environments while dressed in Burberry clothing, yet there is no sign of a hard sell.</p> <p dir="ltr">It feels more like an exclusive look into these individuals’ lives which helps create emotional connections to visitors through music.  </p> <p><img src="https://assets.econsultancy.com/images/0007/6807/burberry_spring_summer.png" alt="" width="700" height="417"></p> <p dir="ltr">The <a href="https://us.burberry.com/our-history/#/heritage/heritage-1800-1">Our History</a> section provides a visual recap of how the iconic Trench Coat has evolved through the years, featuring world-famous models and prominent advertisements through different points in time.</p> <p dir="ltr">Each of these iconic images imbues a deep connection into the history of the brand and the people who helped shape it.</p> <h3 dir="ltr">Simplify the site’s structure</h3> <p dir="ltr">Brands often feature an extensive product line-up so effectively categorizing each product can be challenging, making it difficult for consumers to find exactly what they are looking for.</p> <p dir="ltr">Therefore, it’s crucial to simplify the site’s structure to make it easy for visitors to navigate your products.</p> <p><img src="https://assets.econsultancy.com/images/0007/6809/burberry_site_structure.png" alt="" width="700" height="412"></p> <p dir="ltr">Burberry did an excellent job of this by designing a site that makes exploring both intuitive and simple. The dynamic directory on the left-hand side of the page makes it simple to navigate and search products by category and/or collection.</p> <p dir="ltr">Each and every part of the website can be accessed through this directory and major categories can be expanded into subcategories.</p> <p dir="ltr"><strong><a href="http://www.hermes.com">Hermes</a></strong>, while also a world-class luxury brand with exceptionally crafted merchandise, offers a digital commerce experience that’s severely lacking.</p> <p dir="ltr">When visitors first arrive at the homepage, they’re immediately presented with three options: the brand site, the ecommerce store and store listings.</p> <p dir="ltr">There is a major divide between content and commerce, forcing shoppers to pick one path instead of allowing them to experience the brand in its entirety, and this is just the beginning of the shopper’s journey.</p> <p><img src="https://assets.econsultancy.com/images/0007/6810/hermes_homepage_2.png" alt="" width="700" height="537"></p> <h3 dir="ltr">Balance creativity with functionality</h3> <p dir="ltr">Some brands go so far into differentiating their sites from the competition that they end up confusing their visitors.</p> <p dir="ltr">The Hermes online shop is a prime example of this since the brand presents an unconventional design that makes visitors question whether it functions as an ecommerce site. </p> <p dir="ltr">The homepage looks more like a boutique art gallery than a luxury brand store, with its hand-drawn images that lack descriptions.</p> <p dir="ltr"><img src="https://assets.econsultancy.com/images/0007/6802/hermes_homepage.png" alt="" width="750" height="474"></p> <p dir="ltr"> There is no information to be found about the Hermes brand or any of its product, both of which can add context and content to the brand.</p> <p dir="ltr">Without these elements, the brand loses out on the opportunity to deliver an engaging brand experience.</p> <h3 dir="ltr">Offer Robust Product Pages</h3> <p dir="ltr">On many of Hermes’ product pages, <a href="https://econsultancy.com/blog/67052-a-copywriter-s-template-for-excellent-product-page-descriptions/">product descriptions</a> consist of a few sparse words such as “Printed beach towel” or “Hermes silk tie”.</p> <p dir="ltr">However, the lack of content and information doesn’t stop there.</p> <p dir="ltr">Many product pages offer just one or two images and products are presented on sketches rather than on models; this makes for a great artistic statement but it doesn’t translate well for commerce.</p> <p dir="ltr">.<img src="https://assets.econsultancy.com/images/0007/6811/hermes_towel.png" alt="" width="700" height="356"></p> <p dir="ltr">The Hermes site seems to have been created by artists, for artists.</p> <p dir="ltr">While this approach may resonate with some of the brand’s loyal fans, brands can’t afford to take ecommerce design to such an extreme creative direction in today’s increasingly competitive digital commerce landscape.</p> <p dir="ltr">If a brand’s ecommerce offering doesn’t drive sales or provide content that elevates the brand image, then it fails to deliver on consumer expectations and risks losing market share to its competitors.</p> <p dir="ltr"><em>For more on this topic, see:</em></p> <ul> <li><a href="https://econsultancy.com/blog/64767-where-are-luxury-brands-going-wrong-online/"><em>Where are luxury brands going wrong online?</em></a></li> <li><a href="https://econsultancy.com/blog/67604-what-s-the-point-of-social-media-for-luxury-brands/"><em>What’s the point of social media for luxury brands?</em></a></li> <li><a href="https://econsultancy.com/blog/67731-think-affiliate-marketing-doesn-t-work-for-luxury-brands-think-again/"><em>Think affiliate marketing doesn’t work for luxury brands? Think again</em></a></li> </ul> tag:econsultancy.com,2008:BlogPost/67947 2016-06-14T11:04:00+01:00 2016-06-14T11:04:00+01:00 It’s vital that web design takes human psychology into account – not just the latest technology Simon Norris <p>When it comes to creating the best possible outcomes for web users time and time again, keeping abreast of the latest technological developments is simply not enough.</p> <p>Understanding the latest technical advances is all well and good, but not knowing how to apply them effectively is not going to achieve tangible and long lasting results. </p> <p>The glory of owning a brand new Ferrari is sure to be all but lost when the realisation that nobody really knows how to drive it properly fully sets in.</p> <h3>Understanding the effect of web design on the brain</h3> <p>Only by gaining real insight into how the human brain deals with different elements, colours, contrast, symmetry and balance can we therefore truly bring ourselves closer to the desires of our key audiences. </p> <p>Just as the neurological basis for why we find some things more attractive than others must be present before real beauty can be created within the eye of the beholder, understanding the full effect web design can have on the brain can only be achieved once a basic comprehension of how the human brain works has first been ascertained.</p> <p><img src="https://assets.econsultancy.com/images/0007/6051/brain.jpg" alt="" width="411" height="264"></p> <p>Ultimately, any additional working knowledge of exactly how the old grey matter perceives different experiences is undoubtedly going to bring us a step closer to creating the best possible outcomes for the user.</p> <h3>Using Neurodesign principles in web development</h3> <p>The majority of our decisions and subsequent actions are a resulting element of the subconscious and, by nature, human beings tend to look towards others as a means of understanding how they themselves should behave. </p> <p>Such theory forms the basis of the overall working knowledge we have as experiential designers, which tells us consumers ultimately care about what other people think during the decision-making process, regardless of whether or not the individual is alone when those decisions are being made.</p> <p>The consideration of this and other proven psychological factors is required in order to improve the web design process, and ultimately define what makes a good or bad user experience based on the practical processes of the brain, has led to the term 'neurodesign' becoming commonplace within the web design industry. </p> <p>A philosophy subsequently summarised by a variety of practitioners, the basic principles of neurodesign tell us that getting users to truly engage with information comes down not only to how that content is presented visually, but moreover the feelings that are evoked in the very act of its consumption.</p> <h3>Web designing for the mind</h3> <p>The basic concept of a ‘free gift’ becomes altogether null and void when you consider that simply giving something away is proven to envoke feelings of indebtedness - or reciprocity - within the psyche of the receiver. </p> <p>This gift does not have to be tangible, either, in order to trigger the emotional response required. </p> <p>The gift at hand might therefore be freely available imagery or other kinds of information which, when presented within the context of scarcity (in that it may be made available to the consumer for a limited time only) can create a feeling of emotional debt sufficient enough for the user to feel compelled to return to a particular source time and again. </p> <p>When combined with the right levels of technological know-how, such knowledge can mean the difference between creating a user experience that you think hits the spot, therefore, and achieving a true piece of web design created with the mind in mind. </p> <p>By drawing on this expertise with a sufficient understanding of perceptual and cognitive psychology in tow, current UX design guidelines can often become intuitive.</p> tag:econsultancy.com,2008:BlogPost/67853 2016-05-16T14:20:00+01:00 2016-05-16T14:20:00+01:00 Lead generation forms: Five uncommon strategies to increase conversion rates Marcus Taylor <p>And despite the importance forms have, we rarely give them the attention they deserve. </p> <p>Below are five strategies you can use to take your forms to the next level. </p> <h3>1. Simplify your forms by reducing clicks-to-complete</h3> <p>When Microsoft released Windows Vista, fewer people shut down their PCs. Why?</p> <p>It turns out that Microsoft updated its shutdown command from a button to a dropdown box. This trivial change meant that users now had to click three times to shut their computer down instead of once.</p> <p>This small amount of additional effort led to a significant decrease in people using the feature. </p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.49.png" alt="" width="606" height="233"></p> <p>While there are no right or wrong question field types to use, it’s good practice to use field types that minimise the number of clicks-to-completion.</p> <p>Clickable image/icon buttons, like the ones in the Microsoft example in the top left image, are one of the most efficient form elements to use.</p> <p>Not only do they only require one click to answer, they also provide the user with visual prompts.</p> <p>The fewer clicks required to complete your form, the less brain cycles and cognitive load (i.e. ‘thinking’) is required for your users to complete it.</p> <p>In other words, the less your users have to think to complete your form, the better.</p> <p>As a rule of thumb I’ve found reducing the number of ‘clicks-to-completion’ to be a good technique for improving the simplicity and completion time of forms.</p> <h3>2. Focus on motivation &amp; outcomes</h3> <p>People use forms to achieve an outcome. The outcome your users are trying to achieve has a large impact on your conversion rate.</p> <p>After all, if you gave everyone a free Ferrari for using your form - you would likely have a near-100% conversion rate.</p> <p>While this is an exaggerated example, it illustrates how the performance of your form is influenced not only by the form itself - but by the promise of what lies on the other side of it. </p> <p>By clearly communicating the benefits of using your form you can increase the user’s desire to complete it.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.43.png" alt="" width="605" height="290"></p> <p>This is a common tactic used by dating websites. <a href="http://www.welovedates.com/">WeLoveDates</a> shows a photo of a happy couple placed next to the lead capture form.</p> <p>As the users of this website are likely to be looking for a relationship this image represents the outcome that they’re hoping for, and as a result, increases their motivation to join.</p> <h3>3. First impressions count</h3> <p>The first impression that your form creates helps visitors decide whether or not the outcome is worth their time and effort in filling out your form.</p> <p>So, first impressions matter. A lot.</p> <p>When we changed the lead capture form on the <a href="http://brokernotes.co">BrokerNotes</a> homepage from a dropdown question box to a full-page clickable image select box, we saw a 212% increase in people using the lead capture form. </p> <p>In addition to simplifying the questions, we tested adding large amounts of <a href="https://econsultancy.com/blog/65722-18-highly-effective-examples-of-social-proof-in-ecommerce/">social proof</a> and text to manage the visitors’ expectations (e.g. indicating they’re on step one of two).</p> <p>All of this led to an improved first impression that converted over 46% of visitors.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.38.png" alt="" width="604" height="337"></p> <p>One of the best tips for improving the first impression that your form creates is to split it into multiple steps (if you’re currently using a single-step form).</p> <p>When designed well, multi-step forms appear less overwhelming, and have been repeatedly shown to <a href="http://conversionfanatics.com/multi-step-or-single-step-forms/">convert better</a> than single-step forms.</p> <h3>4. Use cognitive biases to your advantage</h3> <p>Cognitive biases are proven ways in which the brain makes illogical decisions.</p> <p>They can be thought of as ‘mental shortcuts’, such as jumping to the conclusion that a restaurant with a queue outside must be good.</p> <p>For example, it’s proven that people overvalue things that they play a part in building (known as the ‘IKEA effect’).</p> <p>There are <a href="https://en.wikipedia.org/wiki/Cognitive_bias">hundreds of these cognitive biases</a>, which you can use to your advantage to improve your form’s performance.</p> <p>One application of this that can improve form completion is using a bias called the <a href="http://changingminds.org/explanations/theories/endowed_progress.htm">endowed progress effect</a>. This bias proved that people are more likely to complete something if there is an illusion that progress has already been made.</p> <p>Here’s an example of the endowed progress effect in use. In this form, the progress bar starts one third complete, subtly indicating that by seeing the first step you’ve already made progress.  </p> <p>Because of this illusion of progress, users are more likely to go on to the second and third steps.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.32.png" alt="" width="603" height="408"></p> <p>There are hundreds of cognitive biases at your dispense. Use them wisely!</p> <h3>5. Don’t be afraid to make forms visual</h3> <p>The old adage says that a picture paints 1,000 words. Scientifically, this isn’t far from the truth.</p> <p>Our brains process images significantly faster than text. In fact, recent research from MIT found that the brain can identify images seen for <a href="http://news.mit.edu/2014/in-the-blink-of-an-eye-0116">as little as 13 milliseconds</a>!</p> <p>Images have an inherent advantage over text. Yet, most forms don’t use them.</p> <p>One of my favourite examples of a visual form is <a href="https://www.toptal.com/">TopTal.com</a>. </p> <p>TopTal could say “we keep your Skype details private”, but instead it places a subtle padlock icon in the ‘Skype username’ field implying that this will be kept private and secure. </p> <p>TopTal could use text in the dropdown question box, like most other forms.</p> <p>But instead it uses recognisable colourful icons that make it easier to process the range of options.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.27.png" alt="" width="607" height="327"></p> <p>In the form on <a href="https://www.ventureharbour.com/web-hosting-guide/">this web hosting guide</a>, you can see how without even having to read the questions, it’s clear what is being asked just from scanning the images. </p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.22.png" alt="" width="497" height="415"></p> <p>Images also make a form appear more engaging and less form-like.</p> <p>From my research studying high-converting forms, I’ve found that these kinds of forms, which appear more like ‘tools’ or ‘quizzes’, typically convert best.</p> <h3>Where to start?</h3> <p>Form optimisation can be overwhelming. With so many opportunities and elements to test, it can be difficult knowing where to start.</p> <p>If you’re not sure where to begin, I’d suggest using the <a href="https://leadformly.com/form-optimisation-pyramid/">Form Optimisation Pyramid</a> as a framework. </p> <p>Start at the bottom by brainstorming everything that can be done to increase the motivation your users have to use your form.</p> <p>For example, you might want to test using strong imagery or different copy to communicate why people should use your form.</p> <p><img src="https://www.ventureharbour.com/wp-content/uploads/2016/05/Screen-Shot-2016-05-16-at-11.17.12.png" alt="" width="601" height="407"></p> <p>From here you can move on to brainstorming ways to improve the user’s ability to use the form.</p> <p>Is your form accessible to people who are colour blind? Is it easy to use on a mobile device in bright light? What about for users who like to navigate through forms using the tab key? </p> <p>Once your form passes this phase, you can then focus on ideas to improve the user’s peace of mind, ease of using your form, and how engaging your form is to complete.</p> <p>Most form optimisation advice focuses on usability and ease of use.</p> <p>Using the framework above will ensure that you first take a few steps back to consider the underlying motivation driving your form conversions and whether or not your visitors have the ability to convert.</p>