Anatomy of visual first experience best practices

570 views

Published on

The text-only websites of the early 2000’s have—slowly but surely—been replaced by graphically and
visually-driven web interfaces. Faster broadband speeds, cellular networks, and high resolution screens have increased demand for attractive visuals to drive content, to the point that roughly one third of pixel real estate on the web is image content.

Published in: Travel
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
570
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Anatomy of visual first experience best practices

  1. 1. leonardo.com
  2. 2. Table of Contents 02 04 07 11 14 18 22 25 27 INTRODUCTION: The future of digital is visual storytelling WHY VISUAL STORYTELLING MATTERS: The psychology of visual storytelling PUTTING ON A SHOW: How the web has responded to the visual shift KEEPING IT FRESH: How to source content that keeps your site up-to-date PUTTING THE PACKAGE TOGETHER: Turning good visuals into great stories GO FORTH AND PUBLISH: Adhering to best practices when publishing online GET THE WORD OUT: How, when and where to tell the world your story TODAY’S THE DAY TO GO VISUAL The web is moving in a visual direction ABOUT LEONARDO ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 2 leonardo.com
  3. 3. Thanks for downloading! This eBook takes a look at how and why visually-driven websites are becoming the norm today and discusses the best practices your hotel can leverage to build and publish your visual story on your website, providing a compelling and engaging experience for your visitors. Our contributing author, Greg Oates, has included many great suggestions and real examples gained through his work helping hotel professionals reach guests through content marketing and visual storytelling strategies. We hope this eBook will help you better understand how to successfully present your hotel in its best light online. John McAuliffe President Leonardo About Greg Oates Greg Oates is a veteran travel editor and hotel media content developer. Greg works closely with hotel marketers to help them reach guests through content marketing strategies, visual storytelling and media relations. share this e-book ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 3 leonardo.com
  4. 4. welcome to the world wide web, circa 2013 The future of digital is visual storytelling The future is now The text-only websites of the early 2000’s have—slowly but surely—been replaced by graphically- and visually-driven web interfaces. Faster broadband speeds, cellular networks, and high- resolution screens have increased demand for attractive visuals to drive content, to the point that roughly one third of pixel real estate on the web is image content.a Pictures. Videos. Photo filters. Infographics. Instagram. Pinterest. Vine. YouTube. Tumblr. Slideshows. Animated GIFs. Introduction The future of digital is visual storytellingANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 4 leonardo.com
  5. 5. The trend is certainly obvious on the most popular social media networks. Websites like Facebook, Instagram and Pinterest are driven by visuals. Twitter, the domain of 140-character text bursts, recently added Vine, a video service showcasing 6-second visual bursts. And of course, you can’t mention video without mentioning YouTube and its one billion monthly visitors. Visually-driven websites aren’t strictly for social sharing, though. The trend is stretching across the web and touching traditional web design as well, from retailers, manufacturers, service providers and more. The travel industry is no exception; more and more hotels, airlines, online travel agencies, tour companies and others are enhancing their websites with exciting, engaging visuals that tell the story of what it’s like to use their service or visit them in person. The best websites don’t just throw some pictures and video on the home page. They use those pictures and videos to tell stories— stories that allow the audience to experience whatever it is the website is selling. “90 percent of all information that gets transmitted to our brains is visual.”b Introduction The future of digital is visual storytellingANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 5 leonardo.com
  6. 6. chapter 01 why visual storytelling matters the psychology of visual storytelling ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 6 leonardo.com
  7. 7. Chapter 1 Why visual storytelling matters: The psychology of visual storytelling It’s not just that our computer and phone screens are better and our download speeds faster. Studies show that people prefer—even on a subconscious level—to interact with visuals over plain text. And marketers are learning to take advantage. “Humans process visuals 60,000 times faster than text.”c AirBnB.com ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 7 leonardo.com
  8. 8. According to William C. Bradford, author of Reaching the Visual Learner: Teaching Property Through Art, 65 percent of the population are visual learners.d And according to Carol Jeffers, professor at California State University, our brains are wired to respond to, interact with, imitate and mirror behavior that we see. She argues that our brains’ visual systems allow us to “experience our own actions and those of others at an abstract level of representation.”e In other words, the act of simply seeing something can allow us to experience it in our own minds. Is it any wonder, then, that marketers looking to tell engaging stories on their websites are moving away from blocks of text towards big, beautiful images and compelling video? When it comes to your property, visual storytelling with engaging imagery is the perfect way to share your hotel’s atmosphere and your guests’ experiences. By sharing a story, you’re showcasing what staying at your hotel is like, and giving your website visitors the opportunity to imagine themselves staying with you! “Video now appears in 70% of the top 100 search results.”f Chapter 1 Why visual storytelling matters: The psychology of visual storytellingANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 8 leonardo.com
  9. 9. chapter 02 putting on a show how the web has responded to the visual shift Loreal.com ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 9 leonardo.com
  10. 10. Virgin-Atlantic.com FourSeasons.com Nike.com Chapter 2 Putting on a show: How the web has responded to the visual shift From consumer goods to the travel industry, big and bold visuals rule the day. ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 10 leonardo.com
  11. 11. Taking a closer look at the samples on the previous pages, we can see that Nike, unsurprisingly, uses a lot of real estate on a large photo of a pair of running shoes. Taking a closer look, we can see the photo is actually interactive—we can adjust the color of the shoes and even the pattern of the fabric. They quickly become not just a pair of shoes, but your pair of shoes. L’Oreal uses a carousel structure common to today’s web design, but it’s large and the fonts and photo choices call back to fashion magazine advertising, creating a visual connection to a more traditional experience. Apple’s homepage design, which we saw earlier, is almost minimalistic, with a toolbar at the top, a product in the middle with a link to a video and large visual buttons along the bottom of the page. And Virgin Airlines is careful to include all the information and interactivity travelers expect and need—such as booking and check-in options—but surrounds it in an attractive, encompassing background image. Strong visuals are critical in the travel and hospitality industry. As a hotel marketer, what you’re selling is the experience of staying at your property. Your photos and videos can convey that in a much stronger way than a text description or list of amenities. Virtual tours, 360-degree panoramas, and photos that show guests at your hotel can demonstrate to website visitors just what they can expect when they book a stay at your property. “Using video on landing pages can increase conversion by 80%.”g Loreal.com Chapter 2 Putting on a show: How the web has responded to the visual shiftANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 11 leonardo.com
  12. 12. “The end goal is direct bookings. So there should be an immediate visceral impact when potential clients arrive at your website, and clear direction toward more photos and videos to extend that emotional connection.Travel is an emotional experience.The best hotel websites are too. Just a few great examples are Singita Resorts, Standard Hotels,ALT Hotels and Four Seasons Hotels.All of them tell a visual story about their properties and destinations to provide a high-impact experience that draws viewers into the site, never lets them go, and increases direct sales.” Singita.com ALThotels.ca StandardHotels.com Chapter 2 Putting on a show: How the web has responded to the visual shiftANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 12 leonardo.com
  13. 13. chapter 03 keeping it fresh how and where to get the content that keeps your site up-to-date TheFreehand.com ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 13 leonardo.com
  14. 14. From pro photo shoots to social media, find the images that showcase your hotel experience. At this point it should be clear: To take your hotel’s website to the next level, you need to reinforce it with strong visuals. The next logical step is acquiring those visuals! You probably already have a collection of professional media: Photos of the property, including rooms, business center, pool and so on. You may also have virtual tours and videos. That’s a great start. You can round out your existing media by sourcing photos and videos from the surrounding area. Your local tourism board is a great place to start, but don’t hesitate to reach out to restaurants and attractions directly. This way, you show your visitors that your hotel experience isn’t just on the grounds of your property—it extends to the local area as well. Next, consider “non-professional” media. This can include photos that you and your staff can take yourself of the property and area, as well as photos sourced from guests, including any they’ve tagged of your property on social media. (These can be linked to freely, but always get permission if you intend to use them in other ways). While these sorts of photos may not have the “shine and polish” of a pro photographer, they offer an authenticity that appeals to travelers. With new filters and better cameras available today, amateur photos are better than ever before. They show real people enjoying your hotel in a real way. A good mix of professional and amateur photos and videos can really bring your property’s story to life! What to look for in a web publishing solution: Find a solution that easily allows you to store a variety of media in a centralized location. Chapter 3 Keeping it fresh: How to source content that keeps your site up-to-dateANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 14 leonardo.com
  15. 15. 01 02 03 04 05 06 tips for sourcing content Look beyond your door: Connect with the local tourism board and nearby attractions, restaurants and other vendors and suppliers for photos that showcase the experience of staying in your area. Be authentic: Staged photos have their place, and using them isn’t a bad thing. Just make sure it’s not all you use. Guests also want to see a story! One way of showing it is by including photos of real people enjoying your property. All you have to do is ask online or in-house. Many hotel websites have a dedicated email address where guests can submit their images. Most hotels have a budding photographer on staff seeking exposure and feedback. Find out who they are and work out a barter. Or hold an employee contest for new photos, with prizes for the best entries. Instagram, Facebook and Pinterest contests are very popular for a number of reasons. They help promote the hotel and engage potential guests, both local and out of town. They can provide exceptional imagery that hotels can use on their websites, and they encourage online sharing. Create a photography lesson package with a local professional photographer throughout the year. Then let guests know that the best photos of the hotel and destination will be used on the website. Most importantly, when you do have a collection of new photos, showcase them prominently on the website and promote them extensively on social media.   ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 15 leonardo.com
  16. 16. chapter 04 putting the package together turning good visuals into great stories Broadmoor.com ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 16 leonardo.com
  17. 17. HoxtonHotels.com PreferredHotelGroup.com LittlePalmIsland.com Chapter 4 Putting the package together: Turning good visuals into great storiesANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 17 leonardo.com
  18. 18. Mixed media that doesn’t tell a story is a pretty boring thing. Once you’ve arranged an effective method of sourcing content and keeping it fresh, how do you actually curate it in a way that makes sense? Visually representing your hotel’s story requires more than just adding a massive gallery of property photos to your site. The way you present your photos and multimedia should accurately represent what a guest will experience when they stay with you. Transforming your content into great stories can be a challenge, but the best way to start is to keep it simple. Consider the season, local attractions, or special events. If it’s summertime, you can show off your pool, outdoor recreational activities, the local amusement park, beach or zoo—basically any local summertime hotspot. If you do a lot of weddings, consider a natural flow of photos and videos: happy newlywed couples, your ballroom—empty, decorated, and then filled with guests, a romantic nearby garden at sunset, and so on. Showcasing distinct stories can give your website visitors the opportunity to see themselves in your stories, giving them a true feeling of what their vacation at your hotel will be like. “One of the easiest ways to get started is by creating a dedicated page with special upcoming events in your destination. Update it once a week with interesting content and photos sourced from the event creators.” Chapter 4 Putting the package together: Turning good visuals into great storiesANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 18 leonardo.com
  19. 19. 01 02 DesignHotels.com HotelMissoni.com What to look for in a web publishing solution: Managing all of your content can be tricky. Consider a solution that lets you organize your media into groups, or tag and categorize it, so that it can be easily sorted and published together. Chapter 4 Putting the package together: Turning good visuals into great stories tips for curating content Be relevant: Keep your photos videos grouped and presented in logical manner. Always remember it’s the guests’ experience that you want to showcase. Maximize your search engine optimization: Tagging your multiple, linked pieces of content with common search terms and keywords can help boost your organic search rankings, making your hotel easier to find. ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 19 leonardo.com
  20. 20. chapter 05 go forth and publish adhering to best practices when publishing on the web ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 20 leonardo.com
  21. 21. Images draw attention; visual storytelling can trigger an emotional reaction and results in conversion. Once your content is mapped out in a way that tells your hotel’s story, the next step is actually publishing it online. Multimedia galleries are a common and logical step. Dividing them into sub-sections that each tells part of your story is an easy and straightforward way to publish your content in an engaging and interesting manner. Think beyond your homepage and find opportunities within other sections of your website to publish these stories. If you have a page about your restaurant, publish a gallery there that features your top menu items, guests enjoying their meals and a video of the head chef or bartender crafting their signature dish or cocktail. Considering the platform is also part of the publishing step. Beyond your own standard website, you also need to consider your tablet- and smartphone-optimized sites, and the different needs of those platforms. At this stage you can also consider publishing your story on social media and online travel sites. Chapter 5 Go forth and publish: Adhering to best practices when publishing online HolidayInn.com FourSeasons.com ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 21 leonardo.com
  22. 22. Chapter 5 Go forth and publish: Adhering to best practices when publishing online “Restaurant, spa, golf, tour desk and other amenity landing pages are good sections to place specific, related photos and videos. Create a video with your chef, spa director or golf pro.Anyone interested in those amenities will stay much longer on those pages if that type of visual storytelling exists. And be creative! Hyatt Andaz Liverpool created a video with its chef while he was walking through a garden, fresh market and cattle farm, showing where he sources his food.” Hyatt Andaz Liverpool on YouTube “Images can trigger emotions and memories, which makes them engaging.”h Barnsley Gardens Resort on Facebook ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 22 leonardo.com
  23. 23. 01 02 What to look for in a web publishing solution: This stage is where a web publishing solution can really shine. If your system has helped curate your content, it should also include the ability to publish it in categorized groups and galleries directly to a variety of platforms. Triptease.com StandardHotels.com Chapter 5 Go forth and publish: Adhering to best practices when publishing online tips for publishing your Stay current: Refreshing your content is key, especially if your property or the local attractions go through changes. You want your guests to see what your hotel is really like, not what it used to look like. Start telling your story “above the fold”—the space of your web page that’s visible on initial view without any scrolling. That is your website’s most valuable real estate. Start telling your hotel’s story right away, and give your visitors a reason to keep scrolling! content ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 23 leonardo.com
  24. 24. chapter 06 get the word out how, when and where to tell the world your story ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 24 leonardo.com
  25. 25. Make use of multiple channels to tell your story in a compelling, engaging manner. Good stories aren’t just told once—they’re re-told, over and over, often in different mediums. Your hotel’s story, and your digital marketing plan, should follow the same idea. After all, if you’re not telling your story, you’re not going to benefit from all the resources you put into sourcing, curating and publishing your content! Sharing, or amplifying your story, can encompass several different means. You can tweet about your latest gallery or multimedia presentation, share links on Facebook, add photos to Instagram or create a board on Pinterest. You can also share your stories on travel websites, review sites and OTAs, include links in your e-mail signatures and even add them to sales proposals. Ultimately, your goal should be to tell your story to as many potential visitors as possible, using all of the channels available to you. Modern travellers do their research on a variety of platforms (desktop, mobile) and channels (website, social, travel sites). By ensuring a consistent, visually rich and engaging presence across these platforms and channels, you can be confident you’re always putting your hotel’s best face forward, regardless of how a prospect finds you! “St. Regis Punta Mita sends out its own and crowd-sourced Instagram photos multiple times weekly. Marriott Hotels launched its new “Travel Brilliantly” rebranding campaign on YouTube. Hotel groups like Fairmont, Ritz-Carlton and Kimpton were early adopters of Twitter, with legions of loyal fans to show for it. And everyone is on Facebook, but many hotels and hotel groups don’t update their pages on a regular basis.” St. Regis Punta Mita on Instagram Chapter 6 Get the word out: How, when and where to tell the world your story Marriott Hotels “Travel Brilliantly” ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 25 leonardo.com
  26. 26. “There are over 220 billion photos on Facebook.”i What to look for in a web publishing solution: Look for a solution that lets you publish directly to all channels including social media, either through galleries or scheduled regular postings, to get the word out consistently. 01 02 tips for amplifying content Be consistent: While the specific details of the stories you tell may differ —and you’ll want to play to the strengths of each channel and platform— it’s important to keep your tone and branding elements consistent so that no matter where a visitor finds your story, they know it’s you telling it. Keep it fresh: We’ve discussed keeping your content current in previous sections, but it’s an important aspect of amplifying your website as well. You don’t want to just tweet out the same photo gallery over and over. People will be more apt to click and share your links if your content is refreshed and current! ALT Hotels on Pinterest Chapter 6 Get the word out: How, when and where to tell the world your storyANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 26 leonardo.com
  27. 27. chapter 07 today’s the day to go visual the web is moving in a visual direction ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 27 leonardo.com
  28. 28. The best brands worldwide are leading the way, and chances are, your competitors will follow suit—if they haven’t already. You can’t afford to be left behind. It’s time to get serious about visual storytelling on your hotel website and beyond. Begin sourcing your content, considering the stories you want to tell with that content, and start thinking about how to publish and amplify those stories: Expanding your visual storytelling efforts with rich, engaging media will make your hotel stand out from the competition and give web visitors a “you-are-there” feeling when they find your property online. SOURCE Leverage all of your media - photos, videos, virtual tours Use professional and amateur sources Find “real” photos - photos that show actual visitors enjoying your property CURATE Sort your media into stories Focus on what visitors to your property will experience PUBLISH Publish your curated content as individual distinct stories Refresh your content often Maximize the space on your website AMPLiFY Find multiple ways to tell your story online Make the most of social media and travel sites Keep your branding and tone consistent ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 28 leonardo.com
  29. 29. About Leonardo Leonardo is a technology and online media company for the global hospitality industry. We provide e-marketers at hotel brands, management companies and hotel properties with technology, sales conversion tools and a global travel media network that enables them to better visually merchandise their hotels to millions of in-market travel shoppers monthly. Our core products, the VScape® Digital Asset Management System and VBrochure™ Online Merchandising System, leverage the VNetwork™ - the largest media syndication network in the industry. It includes all major search engines, Global Distribution Systems, online travel agencies, travel research and supplier websites, search portals, review, travel editorial, local directories and major social media and video sharing sites. Taking advantage of VBrochure’s mobile and social media platforms, hotels can ensure that their rich visual presentations reach consumers on their mobile devices and through their social graphs. For more information about Leonardo, visit www.leonardo.com. share this e-book ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 29 leonardo.com
  30. 30. SOURCES a Wall Street Journal: Publishers’ Next Ad Challenge: Photos (http://online.wsj.com/article/SB10000872396390443720204578004501832637108.html) b Customermagnetism.com: What is an infographic? (http://www.customermagnetism.com/infographics/what-is-an-infographic/) c 3M: Polishing your Presentation (http://web.archive.org/web/20001102203936/http://3m.com/meetingnetwork/files/ meetingguide_pres.pdf) d Reaching the Visual Learner: Teaching Property Through Art (http://papers.ssrn.com/sol3/papers.cfm?abstract_id=587201) e International Journal of Education & the Arts: On empathy: The mirror neuron system and art education. (http://www.ijea.org/v10n15/) f Kissmetrics: Can Product Videos Increase Conversion Rates (http://blog.kissmetrics.com/product-videos-conversion/) g eyeviewdigital: Making video accountable (http://www.eyeviewdigital.com/documents/EyeView-White-Paper-Making-Video-Accountable.pdf) h Usabilla: 10 Things to know about images in web design (http:// blog.usabilla.com/10-things-to-know-about-images-in-web-design/) ci Visual.ly: A Snapshot of Digital Photography in the U.S. (http://visual.ly/snapshot-digital-photography-us) Leo_eBook_WebMarketing_13.0131 ANATOMY OF A VISUAL-FIRST WEBSITE EXPERIENCE / 30 leonardo.com

×