Conversion Optimization


Published on

What conversion methods are working now, As with most tactics in digital marketing, your sure-fire methods from last year may be a total flop today. Benu will walk through what's working now, along with supporting case studies and data.

Published in: Marketing, Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Conversion Optimization

  1. 1. Milestone Confidential Conversion Optimization and Site Usability
  2. 2. 2 @milestonemktg Milestone Confidential Milestone at a glance Drive online revenue and profitability for our clients Silicon Valley ~ Chicago ~ India 180 employees ~1500 Clients Digital marketing software and services for hospitality
  3. 3. 3Milestone Confidential @milestonemktg Conversion Optimization by Improving Usability Information Architecture Color & Images Speed & Performance Legibility & Eyetracking
  4. 4. 4Milestone Confidential @milestonemktg Key Component of Conversion Optimization Conversion Optimization by Improving Usability Information Architecture Page Layout Categorization Organization Labeling Prioritization Navigation Primary Secondary Third Level Footer Utilities Site Search Bread Crumbs Eyetracking/Legibility Legible Scannable Eyetracking Heat Maps Colors & Images Geography Gender Psychology Legibility Speed and Performance Speed Avoid flash Avoid too many images Avoid image text Avoid too many scripts Performance Devices – I, Preview, Mobile, Handheld, Print Browser CMS Social & Natural Search
  5. 5. 5Milestone Confidential @milestonemktg Usability  Usability tests measure:  Whether or not participants complete a desired task or a series of tasks.  How quickly can a visitor book a hotel?  How quickly can a visitor book a package?  How participants navigate and use a website?  Can visitor find the information they need: things to do, location and directions, who to contact, etc
  6. 6. 6Milestone Confidential @milestonemktg Case study Good Design Bad Design
  7. 7. 7Milestone Confidential @milestonemktg What is the point of usability? Target your audience Improve Conversions Deliver USP
  8. 8. 8Milestone Confidential @milestonemktg Jacob Nielsen Usability Study
  9. 9. 9Milestone Confidential @milestonemktg Usability Testing Audience Navigation Content Distractions Design Implementation
  10. 10. 10Milestone Confidential @milestonemktg Information Architecture - Navigation  Types of Navigations  Primary navigation  Home, Location, Accommodation, Services & Features, Things to Do, Meeting or Dining, Contact Us  Secondary navigation  Specials & Packages, Manager’s Special  Tertiary level navigation  Photo Gallery, Emap, Email Offers, Guest Reviews Primary Tertiary SecondarySecondary
  11. 11. 11Milestone Confidential @milestonemktg Expectations Company logo is expected to be on the top, left hand side.
  12. 12. 12Milestone Confidential @milestonemktg Information Architecture - Page Layout  Categorization – classification, arranged in a hierarchical structure.  Organization - arranged by Task, topic, audience  Labeling – unique, easy to understand and scannable.  Prioritization – Number of links you will put in navigation. 2 2 1 3
  13. 13. 13Milestone Confidential @milestonemktg Pass the 6-foot test  Usability tip:  Headline,  Hero shot (image/video)  CTA should be legible CTA Headline Hero shot
  14. 14. 14Milestone Confidential @milestonemktg Pass the 5-second test  Who is the company?  Do they appear credible?  What are they offering?  What’s the call to action? Credibility and Company USP Call to Action?
  15. 15. 15Milestone Confidential @milestonemktg CTA – What and Why  Always present a CTA with both “what” and “why”. A good CTA completes this sentence:  What/Why CTA lines can be interchangeable Why? What?
  16. 16. 16Milestone Confidential @milestonemktg Information Architecture  When information is not properly architected  Banner blindness  Mismatched priority - too many types of interface elements  Unclear terminology  Leads to task failure 1 2 3
  17. 17. 17Milestone Confidential @milestonemktg Distractions
  18. 18. 18Milestone Confidential @milestonemktg Links on the right look like ads -> ignored by visitors
  19. 19. Milestone Confidential Eyetracking /Legibility
  20. 20. 20Milestone Confidential @milestonemktg Legibility  Legibility refers to the clarity of visually-presented text, affected for instance by:  Size of the text  Contrast between similar letters  Quality of printing or display (whether the text is damaged or blurred)  Line spacing  Word spacing  Shape and style of individual letters
  21. 21. 21Milestone Confidential @milestonemktg Scannable Text  highlight keywords;  use meaningful subheadings;  use bulleted lists;  include one idea per paragraph;  use “inverted pyramid” style, starting with the conclusion;  half the word count or less of conventional writing;
  22. 22. 22Milestone Confidential @milestonemktg Break up paragraphs into scannable chunks
  23. 23. 23Milestone Confidential @milestonemktg How people spend time? – Eyetracking Eyetracking – How Do People Spend Time?
  24. 24. 24Milestone Confidential @milestonemktg Ultimate Heat Map – People Looking for Content
  25. 25. 25Milestone Confidential @milestonemktg Superfluous Images: Nielsen, J. and Pernice, K. (2010). Eyetracking Web Usability. Berkeley, CA: New Riders. Page 198. Users are ignoring the large graphic images and focusing on site navigation and text.
  26. 26. Milestone Confidential Colors & Images
  27. 27. 27Milestone Confidential @milestonemktg Colors  Geography  India, Yellow = Success  Gender  Men – Blue, Green, Black, Red  Women – Blue, Purple, Green, Red  Psychology  Blue - Dignified, trustworthy, professional  Black - Powerful, sophisticated, strong, sexy  Orange - Energy, cheerfulness, activity, excitement  Legibility  Black/White offers highest contrast  Target Audience  Primary colors are often used for midscale and tertiary or complex colors are used for upscale 1 3 6 5
  28. 28. 28Milestone Confidential @milestonemktg Colors Colors associated with trust: Colors associated with high quality: Colors associated with cheap/inexpensive: Colors associated with fun:
  29. 29. 29Milestone Confidential @milestonemktg Psychology of Colors Color name Meanings Black Powerful, sophisticated, strong, expensive Blues Dignified, trustworthy, professional, secure, Browns Natural, durability, reliability, warmth, comfort Greens Nature, growth, fruitfulness, freshness, renewal Grays Dignified, intelligent, high tech, neutral Oranges Energy, cheerfulness, activity, excitement Purples Spirituality, mysticism, magic, faith, dignity Reds Energy, warmth, strength, impulse, powerful White Pure, spiritual, clean, sterile, truthful, peaceful Yellows Cheerfulness, hope, vitality, luminosity
  30. 30. 30Milestone Confidential @milestonemktg Colors  Best Practices  Think about target audience and message you like to communicate before deciding colors  Try to limit use of two to three colors on the site. Too many colors can create clutter or confusion  Consider your target audience - Geography, Gender, Psychology and Culture  Use color consistently. For example, if you use a shade of blue to communicate clickable text, do not use that same color (or formatting) to communicate unclickable text.  Use colors judiciously. For example, the colors orange or yellow can be used to display sale prices or specials on a travel site.
  31. 31. 31Milestone Confidential @milestonemktg Complementary color for CTA  My rule: “clockwork conversion color”. Do not use color within 15 minutes (+/-7) on color wheel “clock” to ensure it stands out.  Use true color for CTA. Tints (+white) and shades (+black) for all other Complimentary color
  32. 32. 32Milestone Confidential @milestonemktg Images  Images Best Practice:  Choose images that are highly relevant to the focus of each page  Original images preferred
  33. 33. Milestone Confidential Speed and Performance
  34. 34. 34Milestone Confidential @milestonemktg Speed & Performance Minimize HTTP requests ( Reduce number of requests going to the server to improve page performance) Minify JS & CSS (Source code on page should be kept minimum to reduce download time) Optimized images (Reducing size of images reduces load time and increase page load speed) GZIP components (Gzipping files reducing the size of the files sent from your server, reducing sizes of pages by up to 70%) Just one second delay in page-load can cause 7% loss in customer conversions!
  35. 35. 35Milestone Confidential @milestonemktg Page Speed  Fast and optimized pages lead to  Visitor engagement  Retention  Conversions  Tools to measure site’s speed  Page Speed  Yslow  WebPagetest  Google Webmaster
  36. 36. 36Milestone Confidential @milestonemktg Milestone Client Site Minify CSS Optimized images Minify JavaScript
  37. 37. 37Milestone Confidential @milestonemktg High Performance Site – 14 Rules  Tracking Web Performance  Where is time spent?  The Performance Golden Rules /hpws/rule-min-http.php  Rule 1: Make Few HTTP Request  Rule 2: Use a Content Delivery Network  Rule 3: Add an Expire Header  Rule 4: Gzip Compression  Rule 5: Put Stylesheets at the Top  Rule 6: Put Scripts at the Bottom  Rule 7: Avoid CSS Expressions  Rule 8: Make Javascripts and CSS External  Rule 9: Reduce DNS Lookup  Rule 10: Minify Javascript  Rule 11: Avoid Redirects  Rule 12: Remove Duplicate Scripts  Rule 13: Configure Etags  Rule 14: Make Ajax Cacheable
  38. 38. 38Milestone Confidential @milestonemktg Crawlability HTML CSS < > xml HTML validation performed on W3C to make sure page complies with HTML standards and helps cross-browser, cross- platform and future compatibility CSS validation to ensure no errors found in style sheets and all browsers aim towards compliance with the existing standards Link checker to ensure no broken links on pages and all links are properly working Canonical tags to avoid duplicate content issues and penalties Sitemap XML for website & images submitted to Google Webmaster
  39. 39. 39Milestone Confidential @milestonemktg Milestone Client Site HTML validation CSS validation Sitemap submission Link checker
  40. 40. 40Milestone Confidential @milestonemktg Relevant Fresh Engaging Search Optimized Content Optimized meta tags are structured tags that go in page head section so the browser can understand it Heading tags – H1, H2, H3 are present in body content Photos, images and map optimized and indexed for image and map search meta <h1> Schemas for semantic web is micro data and rich snippets that helps search engine index most critical data fast and helps improve click-through rates
  41. 41. 41Milestone Confidential @milestonemktg Responsive Websites - Desktop, Mobile, Tablet Versions DESKTOP SITE TABLET SITE MOBILE SITE  New Gestures  Jquery Swiping (photo gallery)  Pixel Width of average finger
  42. 42. Milestone Confidential Case Studies
  43. 43. 43Milestone Confidential @milestonemktg Event Form
  44. 44. 44Milestone Confidential @milestonemktg Sort and Simple Forms  Cut any questions that are not needed.  Don't make fields mandatory unless they truly are.  Support autofill to the max by avoiding unusual field labels (just use Name, Address, etc.).  Set the keyboard focus to the first field when the form is displayed. This saves a click.  Allow flexible input of phone numbers, credit card numbers, and the like.
  45. 45. 45Milestone Confidential @milestonemktg Navigation
  46. 46. 46Milestone Confidential @milestonemktg Clear Navigation
  47. 47. 47 @milestonemktg Milestone Confidential Millwood Inn 2.4 %
  48. 48. 48 @milestonemktg Milestone Confidential
  49. 49. 49Milestone Confidential @milestonemktg Implementation
  50. 50. 50Milestone Confidential @milestonemktg Key take aways  Understand what your customer want  Optimize your site - Images, Colors, Download time  Focus on your Site Architecture and Page layout - Simple, Easy  Set up conversion funnels and goals  A/B testing will humble even the greatest optimizers  Remember, if it is good for user, it is good for search engines
  51. 51. 51Milestone Confidential @milestonemktg Thank You Questions?
  52. 52. 52 @milestonemktg Milestone Confidential Know Great People?  Director of Client Services (Chicago)  Recruiter (Chicago)  Sr. Manager, Paid Search (Chicago)  Account Managers (Chicago and Santa Clara)  Social Media AM (Chicago)  Social Media Account Manager (Chicago) Top Reasons to Work for Milestone  Great place to learn with phenomenal growth opportunity  Work with a fun, amazing, talented team  Benefits: Medical, dental, vision, 401K, vacation, sick and holiday pay  Exciting and innovative work environment  Breakfast and Happy hour every Friday  Monthly events and quarterly outings
  53. 53. 53 @milestonemktg Milestone Confidential Back ups
  54. 54. 54Milestone Confidential @milestonemktg Information Architecture  Best practices:  Site navigation should reflect the site’s information architecture  Navigation labels should be distinguishable and look clickable  Show locational breadcrumbs for current page  Use descriptive links in body text  Distinguish visited and unvisited links  Implement clear and consistent visual affordance (clickable elements should look clickable and non-clickable elements should not look clickable)  Rule of thumb: Things that look alike should act alike
  55. 55. 55Milestone Confidential @milestonemktg Images  Images Best Practice:  Choose simple images with a single focus. Avoid busy pictures or busy backgrounds
  56. 56. 56Milestone Confidential @milestonemktg Culture has an effect Red Yellow Green Blue White China Happiness Birth Wealth Power Ming Dynasty Heavens Clouds Heavens Clouds Death Purity France Aristocracy Temporary Criminality Freedom Neutrality Peace India Life Creativity Success Prosperity Fertility Krishna Spirituality Death Purity Japan Anger Danger Grace Nobility Future Youth Energy Villainy Death USA Danger Stop Cowardice Caution Safety Go Masculinity Purity Galitz, W.O. (1998) The Essential Guide to User-Interface Screen Design. New York: Wiley.
  57. 57. 57Milestone Confidential @milestonemktg Images  Images Best Practice:  Use compelling images of real people doing real things
  58. 58. 58Milestone Confidential @milestonemktg Images  Best Practice:  Choose images that are highly relevant to the focus of each page and use them purposefully to enhance the message you are trying to communicate.  Choose simple images with a single focus. Avoid busy pictures or busy backgrounds (especially important with small thumbnails) so the focus and purpose is explicit and easy to recognize  Use compelling images of real people doing real things  Original images preferred  Less is more with images (Use the white space)
  59. 59. 59Milestone Confidential @milestonemktg Optimization Parameters Value Proposition Relevance Clarity Anxiety Distraction Urgency
  60. 60. 60Milestone Confidential @milestonemktg Analysis example Clarity: Reservations box does not stand out Clarity: Telephone number is not very visible Distraction: Rotating banner Anxiety: few reviews Relevance: Free high speed wifi – is. Clarity: Hotel amenities are not clearly defined
  61. 61. 61Milestone Confidential @milestonemktg Target your audience
  62. 62. 62Milestone Confidential @milestonemktg After re-design Target the audience What is important to them?
  63. 63. 63Milestone Confidential @milestonemktg Most Valuable Links on Home Page
  64. 64. 64Milestone Confidential @milestonemktg All Pages
  65. 65. 65Milestone Confidential @milestonemktg Filtered All Pages
  66. 66. 66Milestone Confidential @milestonemktg Special Packages
  67. 67. 67Milestone Confidential @milestonemktg Segment: Visits with Conversions
  68. 68. 68Milestone Confidential @milestonemktg Advanced Bed and Breakfast Whimsical Winter: $0.00 / $0.57 Spring Super Saver: $0.00 / $0.49 Bed & Breakfast: $4.49 / $0.57 Total Turtle Package: $0.00 / $0.23 Dora & Diego Adventure Package: $0.00 / $0.33
  69. 69. 69Milestone Confidential @milestonemktg Conversions
  70. 70. 70Milestone Confidential @milestonemktg Five Simple Rules of Web Design  Easy To Read Content  Easy to Navigate  Easy To Find  Consistency of Design & Layout  Download / Perception
  71. 71. 71Milestone Confidential @milestonemktg Process  Look at the website.  Home Page  Specials and Packages  Main product pages (weddings, meetings, retreats, etc.)  Evaluate content in Analytics  Content -> Site Content -> All Pages  Navigation  Distractions  Look at user activity in Analytics  User Flow  Conversions  Site Search
  72. 72. 72Milestone Confidential @milestonemktg Conversion Flow First Interaction Second Interaction Third Interaction Home Starting pages Rooms Specials Things to Do Ameniti es Locatio n BOOK Benefits  We can find places in the site where we are losing traffic  We can find the best path to conversion  We can see what type of content is effective  We can gauge this data across all tested sites to look for trends  Update content, page layout, meta, navigation anchors  Product suggestions
  73. 73. 73Milestone Confidential @milestonemktg