MIMA Summit: Design for Your Subscribers


Published on

Presentation by Justine Jordan at 2010 MIMA Summit

Published in: Design
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • A subscriber’s inbox is a noisy place, filled with the clutter of messages, folders and other distractions. Definition of Spam not only extends to relevance, but also to subscriber expectations surrounding frequency. Think carefully about the subscriber’s relationship with the from name you choose, whether it’s your company name, a business unit, or a sales representative.“A message from the John…” Story – From name was too long in gmail!
  • Old Navy sent out an email with the subject line “20% off all adult purchases”SO – what’s the best subject line? TEST. Do a simple A/B split testing static vs. changing, promo vs. info, etc.
  • Old Navy sent out an email with the subject line “20% off all adult purchases”SO – what’s the best subject line? TEST. Do a simple A/B split testing static vs. changing, promo vs. info, etc.
  • You don’t have to fit every call to action, copy block, and button here! In this space, create an experience subscribers want to continue.
  • ET tracks opens this way.
  • “…A well-designed email means nothing if the landing pages don’t work well.” – Chad White
  • And if they want to view more…is it for the right reasons?
  • Keep imagery consistent with your brand.
  • Keep in mind that the design to the right ISN’T necessarily a bad design – it’s poorly optimized. However, optimization is the first step of email design that the subscriber experiences.
  • *Data collected from over 250 million email recipients using our Fingerprint analysis tool.
  • 1. Introduce presenters + attendees2. Overview of what we’ll cover.Overview of HTML vs. CSSCode for email not the same as code for webHTML is a markup language that is universally CSS is a style sheet whose form is separated from its contentPut yourself in the customer’s shoes when talking to them – the beautiful, efficient world of building websites with CSS doesn’t apply here.W3C puts together rough standards. These standards don’t exist for email.Proper syntax still counts – opening and closing tags
  • Now I love MarketingProfs as much as the next person, so I don’t want to throw them under the bus, but…
  • Maybe they tested it and this page works well for them (I don’t know), but my initial impression is subscriber experience FAIL!
  • Our first PPC test – we were seeing whether a horizontal form or a vertical form was better.
  • In the end we saw a 34% on the vertical form.
  • So we took that test and decided to test a few other elements on the page. The button color, # of characters for text and the imagery.
  • Results: Blue button, shorter copy and the gentleman.
  • As a result, we have implemented across all our PPC pages, a vertical form, blue button, certain imagery and shorter copy.
  • MIMA Summit: Design for Your Subscribers

    1. 1. DESIGN FOR YOUR SUBSCRIBERSUse #MIMAET for questions, comments & conversation!<br />
    2. 2. MEET: JUSTINE JORDAN<br />@meladorri<br />@ETDesign<br />#MIMAET<br />Responsible for managing ExactTarget’sDesign Solutions team<br />Dedicated to producing performance-driven emails that deliver real business results<br />Experience in design, brand strategy, user experience<br />
    3. 3. LET’S TALK ABOUT…<br />Subscriber Experience<br />Performance-Driven Design<br />Code Matters<br />The Mobile Inbox<br />Landing Pages<br />Test, test, TEST!<br />Q&A/Group Exercise<br />Resources<br />
    4. 4. WHY DOES DESIGN MATTER?<br />Design is the visualization of a business plan. More than a pretty picture, great design requires an actionable plan and measureable goals. <br />Design should acknowledge the subscriber experience.Put yourself in your subscriber’s shoes and understand how they will interact with your communications.<br />Design and technology are seamlessly integrated.Emails should be designed and coded to display properly in the various ways a subscriber will view it. A comprehensive testing strategy is essential to ensure success.<br />
    5. 5. SUBSCRIBER EXPERIENCE<br />Consider the entire subscriber experience – from first impression to final click.<br />Each individual phase influences the decision to open and engage with your email.<br />Your email design is experienced in stages – not as a static page.<br />FROM NAME<br />SUBJECT LINE<br />PREVIEW PANE<br />ABOVE THE FOLD<br />COMPLETE EMAIL<br />CLICK THROUGH<br />
    6. 6. It all begins with theFrom Name – <br />73% of subscribers click “Report Spam” or “Report Junk” based on this field.<br />*Email Sender and Provider Coalition<br />FROM NAME<br />IS YOUR FROM <br />NAME EASILY <br />RECOGNIZABLE?<br />
    7. 7. SUBJECT LINE<br />69% of subscribers click “Report Spam” or “Report Junk” based on this line.*<br />IS YOUR SUBJECT<br /> LINE RELEVANT <br />AND INTERESTING?<br />*Email Sender and Provider Coalition<br />
    8. 8. SUBJECT LINE<br />69% of subscribers click “Report Spam” or “Report Junk” based on this line.*<br />IS YOUR SUBJECT<br /> LINE RELEVANT <br />AND INTERESTING?<br />
    9. 9. Images are disabled by default more than 50% of the time.Isyourkey message visible, relevant and enticing in this space?<br />PREVIEW PANE: IMAGES OFF<br />WHAT IS YOUR <br />EMAIL SAYING<br /> WITH IMAGES OFF?<br />
    10. 10. PREVIEW PANE: IMAGES ON<br />What’s your open rate? Only subscribers that turn images on trigger an open.Are you giving them a reason to keep reading? <br />AVERAGE PREVIEW<br />PANE DIMENSIONS:<br />300px by 300px<br />
    11. 11. PREVIEW PANE & IMAGE BLOCKING<br />Hotmail - Images Off<br />Hotmail – Images On<br />
    12. 12. PREVIEW PANE & IMAGE BLOCKING<br />Hotmail - Images Off<br />Hotmail – Images On<br />
    13. 13. ABOVE THE FOLD<br />Does your content above the fold provide motivation to respond? Are you persuading subscribers to scroll?<br />DON’T CRAM<br />EVERYTHING<br />ABOVE THE FOLD…<br />INTRODUCE CONTENT<br />ABOVE THE FOLD<br />
    14. 14. COMPLETE EMAIL<br />Seconds – not minutes – to view an entire email<br />Only 11%* of those who open will scroll below the fold!<br />EVEN IN THIS VIEW<br />THE ENTIRE EMAIL IS NOT ONSCREEN AT ONCE<br />*The Nielsen Norman Group<br />
    15. 15. Subscriber experience doesn’t end with the inbox<br />CLICK THROUGH<br />Don’t ignore the transition to your website, landing page, or other marketing collateral. <br />Ensure the products in your email are available on your site - better yet, map the individual products from the email to a product page.<br />“…A well-designed email means nothing if the landing pages don’t work well.” – Chad White<br />
    16. 16. CONSIDER THE SUBSCRIBER EXPERIENCE<br />Is this the message you want to convey?<br />
    17. 17. Brand Synergy • Content Hierarchy•Visual Hierarchy Engagement Techniques • Rendering Results •Tested Quality<br />PERFORMANCE DRIVEN DESIGN<br />
    18. 18. Website<br />Email<br />Visual recognition of the brand across all media channels creates a seamless brand experience, creating trust to engage and transact.<br />BRAND SYNERGY<br />
    19. 19. Wireframe<br />Preview Pane<br />Above the Fold<br />Create a content hierarchy, arranging each content element (text and/or image) and associated call to action with appropriate weight.<br />CONTENT HIERARCHY<br />
    20. 20. Headlines utilizing size and color hierarchy<br />Secondary calls-to-action<br />Primary call-to-action<br />Maximize response by creating a visual hierarchy, using design techniques to guide the subscriber's eye through your email based on the content hierarchy.<br />VISUAL HIERARCHY<br />“Quick Bites” or summaries<br />
    21. 21. Preheader Teaser Text <br />Forward to a Colleague<br />In This Issue<br />Read More Link<br />Subscriber Q&A<br />Lifestyle Imagery<br />Use of Background Color<br />Link to External Video<br />Recovery Module<br />Use design techniques to engage the subscriber through a mix of emotive and rational imagery and content. Smart use of images, borders, buttons, links, charts, colored backgrounds, etc.should be applied and tested.<br />ENGAGEMENT TECHNIQUES<br />
    22. 22. Optimized Design<br />Non-optimized Design<br />Main call-to-action in prime placement <br />HTML text in <br />web safe fonts <br />If an email is created primarily with images,<br />it will not display effectively when images are blocked.<br />Designed with image-blocking and preview pane viewing in mind.<br />Ensure your design efforts are viewed as intended once they hit the inbox. Emails that are created with the subscriber experience in mind will have a greater chance of success.<br />RENDERING RESULTS<br />
    23. 23. Only comprehensive testing will validate successful rendering of design and ensure functional performance prior to sending to the subscriber inbox.<br />TESTED QUALITY<br />
    24. 24. CODE MATTERS!<br />HTML for email is different than HTML for the web<br />Modern web design utilizes CSS (cascading style sheets) for layout. However, due to inconsistent CSS support, HTML tables must be used for email layout. CODE LIKE IT’S 1999!<br />No standards exist for displaying HTML in email.<br />Proper syntax still counts – use a validator to check for general errors.<br />Beware of:<br />Forms, surveys, search bars<br />Javascript<br />Video/flash<br />Animated .gifs<br />Background images<br />
    25. 25. THE MOBILE INBOX<br />Email accounts for 42% of mobile internet time<br />30% of users are reading and replying to email on their smartphones<br />More than 90% of users access the same account on their mobile device + their desktop PC<br />
    26. 26. THE MOBILE INBOX<br />There are no standards in place for displaying emails on smartphones<br />(sound familiar?)<br />
    27. 27. THE MOBILE INBOX<br />MOBILE AWARE<br />Maximizing desktop experience and ensuring a functional mobile experience<br />MOBILE OPTIMIZED<br />Maximizing mobile email experience without sacrificing desktop experience<br />ENABLED DEVICES<br />iPhone, iPad, Android, Pre<br />Probably render just fine<br />LIMITED DEVICES<br />I’m looking at you, Blackberry<br />May need special consideration for a positive experience<br />
    28. 28. THE MOBILE INBOX<br />
    29. 29. THE MOBILE INBOX<br />
    30. 30. THE MOBILE INBOX<br />
    31. 31. THE MOBILE INBOX<br />
    32. 32. THE MOBILE INBOX<br />
    33. 33. THE MOBILE INBOX<br />Discover YOUR audience<br />Litmus Email Analytics is a great start<br />
    34. 34. THE MOBILE INBOX<br />Maximize subject lines and preheaders<br />Don’t worry about specific devices<br />Mobile optimized campaigns require special planning!<br />Include short, direct, clear copy & calls-to-action<br />Think skinny + single column (320px)<br />Larger text (18-22px) and “easy to press” buttons (about 0.4 inches)<br />Don’t downgrade the desktop experience. Design for the majority of your users.<br />
    35. 35. LANDING PAGE TIPS<br />Leverage web analytics to design for your audience<br />Monitor Resolution, Browser, User behavior<br />
    36. 36. LANDING PAGE TIPS<br />Continuity – graphics, offers, headlines, imagery, data<br />Set expectations, and follow through accordingly<br />Keep forms simple<br />Honest, clear, concise copy – use bullets!<br />Avoid extra elements (navigation, sidebars, images…)<br />Don’t be afraid to re-state value<br />Use seals!<br />Same rules of email apply to landing pages<br />
    37. 37. IS THIS A POSITIVE SUBSCRIBER EXPERIENCE?<br />Email with “Download Now” call to action<br />Above the fold view<br />
    38. 38. IS THIS A POSITIVE SUBSCRIBER EXPERIENCE?<br />Cluttered landing page<br />Lots of irrelevant content<br />Where’s the download?<br /><ul><li>$99?!
    39. 39. Did the landing page meet the expectations that the email set up?
    40. 40. Did you build my trust as a subscriber? </li></li></ul><li>Subject Lines<br />Sender Lines<br />Personalization<br />List Segmentation<br />Greeting Text—Content<br />Greeting Text—Style<br />Body Text—Content<br />Body Text—Style <br />Closing Text—Content <br />Closing Text—Style <br />11. Images<br />12. Offer / Promotions<br />13. Response Buttons<br />14. Day / Time Sent<br />15. Color <br />16. Coupons<br />17. Pricing <br />18. Free Trial <br />19 HTML vs. Text-Only<br />20. Unsubscribe<br />21. Taglines<br />22. Creative<br />23. Press mentions <br />24. Store Locations<br />25. Phone Numbers<br />26. Animations <br />27. Charts<br />28. Strikeouts <br />29. Signatures<br />30. Testimonials<br />31. Celebrities<br />32. Polls / Surveys<br />33. Call to Action<br />34. Sound<br />35. Numbering<br />36. Themes<br />37. Discounts<br />38. Refer a Friend<br />39. Click to Talk<br />40. Email Sign-up<br /> 100s of Potential “Success Factors”<br />TEST, TEST, TEST!<br />Insights gained from testing may be applied to ALL Marketing Channels <br />(TV, Radio, Print, Tradeshows, Web, Email & Search)<br />
    42. 42. PIER 1 IMPORTS<br />
    43. 43. DESIGN “A”<br />
    44. 44. DESIGN “B”<br />
    45. 45. DESIGN “C”<br />
    46. 46. DESIGN “C”<br />DESIGN “A”<br />DESIGN “B”<br />WHICH DESIGN PERFORMED THE BEST?<br />
    47. 47. PIER 1 RESULTS<br />MEASURES: CTR of Delivered Emails<br /> Unsubscribe Rate<br /> Sales Generated by Subscribers<br />WINNER: Generated 86% More Clicks Than Other Competitors<br /> Generated 25% More Sales Than Nearest Competitor<br />
    48. 48. WINNER: DESIGN “A”<br />BUT…<br />
    49. 49. AAA OHIO<br />
    50. 50. DESIGN “A”<br />
    51. 51. DESIGN “B”<br />
    52. 52. DESIGN “C”<br />
    53. 53. DESIGN “B”<br />DESIGN “A”<br />DESIGN “C”<br />WHICH DESIGN PERFORMED THE BEST?<br />
    54. 54. AAA OHIO RESULTS<br />MEASURES: CTR of Delivered Emails<br /> Projected Renewal Revenue<br />WINNER: Outperformed Control CTR by 26%<br /> Outperformed Projected Revenue of 2nd Place by 4%<br />
    55. 55. WINNER: DESIGN “C”<br />
    57. 57. DESIGN “A”<br />
    58. 58. DESIGN “B”<br />
    59. 59. DESIGN “C”<br />
    60. 60. DESIGN “C”<br />DESIGN “A”<br />DESIGN “B”<br />WHICH DESIGN PERFORMED THE BEST?<br />
    61. 61. MARKETINGEXPERIMENTS RESULTS<br />MEASURES: CTR of Delivered Emails<br /> Unsubscribe Rate<br />WINNER: Outperformed 2nd Place by < 2%<br /> Outperformed Control CTR by 26%<br /> Outperformed Control Unsubscribe Rate by 15.9%<br />
    62. 62. WINNER: DESIGN “B”<br />
    63. 63. LANDING PAGE TESTS<br />Control:<br />Horizontal<br />Vertical<br />
    64. 64. 5 THINGS WHITEPAPER<br />Total Leads Generated: 88<br />Total Leads Generated: 102<br />LIFT: 34% <br />Total Leads Generated: 76<br />
    65. 65. DESIGN ELEMENTS TEST<br />Buttons<br />vs<br />Text<br />> 230 characters<br />< 130 characters<br />vs<br />Imagery<br />vs<br />
    66. 66. WINNING COMBINATIAON<br />DESIGN ELEMENTS TEST<br />Buttons<br />vs<br />Text<br />> 230 characters<br />< 130 characters<br />vs<br />Imagery<br />vs<br />
    67. 67. AS A RESULT<br />
    68. 68. GROUP EXERCISE + Q&A<br />Break up into groups of 4-5 people<br />Take turns sharing your email designs<br />Develop recommendations how each email can be optimized for subscriber experience and deliver on performance driven design tactics<br />Q&A, wrap up, findings<br />
    70. 70. ExactTarget Design Resources<br />Seven Design Principles That Will Drive Customer Engagement<br />Eight Tips on Designing for Outlook 2007 and 2010<br />Five Easy Ways to Improve Conversions Across All Interactive Channels<br />
    71. 71. ExactTarget Design Resources<br />Email MarketingDesign & Rendering: <br />The New Essentials<br />Email Design Checklist<br />Email Design for Lotus Notes <br />CareerBuilder.com<br />Case Study<br />
    72. 72. ExactTarget Design Resources<br />Design Team Blog<br />New posts weekly!<br />blog.exacttarget.com<br />MarketingExperiments<br />Maximize Agency ROIthrough testing<br />Twitter<br />@ETDesign<br />twitter.com/etdesign<br />
    73. 73. THANKS!<br />