Justine Jordan, Litmus - Design Principles to Supercharge Your Email Performance
•
2 likes•526 views
Email is one of the most powerful weapons in a marketer’s arsenal… but it takes a truly solid design strategy to get it just right. The difference between two emails – one that generates big results and one that never sees the light of day – can be little more than a single design element. In this session with email extraordinarie Justine Jordan, learn dozens of tips and tricks you can use to improve your subscriber experience, open rates, clicks and conversions.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to Justine Jordan, Litmus - Design Principles to Supercharge Your Email Performance
Similar to Justine Jordan, Litmus - Design Principles to Supercharge Your Email Performance (20)
More from Marketing United
More from Marketing United (16)
Recently uploaded
Recently uploaded (20)
Justine Jordan, Litmus - Design Principles to Supercharge Your Email Performance
- 2. #MarketingUnited @meladorri @litmusapp Hi! I’m Justine. @meladorri @litmusapp Get the slides + resources: litmus.com/lp/emma16
- 3. #MarketingUnited @meladorri @litmusapp Loves design, email marketing, the internet, technology, UX and cats—especially when combined. Always has an opinion.
- 4. #MarketingUnited @meladorri @litmusapp Loves design, email marketing, the internet, technology, UX and cats—especially when combined. Always has an opinion.
- 6. #MarketingUnited @meladorri @litmusapp (yes, including you)
- 7. @meladorri @litmusapp#MarketingUnited “I’ve been amazed at how often those outside the discipline of design assume that what designers do is decoration. Good design is problem solving.” —Jeffrey Veen former User Experience Manager at Google
- 8. #MarketingUnited @meladorri @litmusapp @krudz at #TEDC13 “It’s called artwork Not artf*&%ingaround”
- 11. #MarketingUnited @meladorri @litmusapp Have you ever made something that was… Read? Interacted with? Used?
- 12. #MarketingUnited @meladorri @litmusapp Have you ever made something that was… << open << click << conversion Read? Interacted with? Used?
- 13. @meladorri @litmusapp#MarketingUnited “Everyone designs who devises courses of action aimed at changing existing situations into preferred ones.” — Herbert Simon (1969) The Sciences of the Artificial. Cambridge: MIT Press.
- 14. #MarketingUnited @meladorri @litmusapp Design is not art. Design is: • a plan • a strategy • a process discover + define research + brainstorm create test + assess improve + evolve
- 15. @meladorri @litmusapp#MarketingUnited “Thinking like a designer can transform the way you develop products, services, processes—and even strategy.” —Tim Brown IDEO
- 16. @meladorri @litmusapp#MarketingUnited EMAIL IS NOT JPG Print ad One-page website
- 17. @meladorri @litmusapp#MarketingUnited EMAIL IS A unique MEDIUM
- 23. @meladorri @litmusapp#MarketingUnited To create truly personal email, we must design human-centered experiences
- 24. #MarketingUnited @meladorri @litmusapp 80% of subscribers delete emails that look bad on their phones… …and 30% unsubscribe Human-centered design
- 25. @meladorri @litmusapp#MarketingUnited A well-designed email serves two purposes: 1. Shows respect for your audience 2. Helps to achieve your goals
- 26. #MarketingUnited @meladorri @litmusapp 1. WHO are you sending to? 2. WHAT do you want them to do? 3. WHEN is it appropriate to send the message? 4. WHERE will the recipient read it? 5. WHY are you sending this message? 6. HOW are you going to measure success? Ask yourself (and write down) the five W’s
- 27. #MarketingUnited @meladorri @litmusapp Internal vs. external B2B vs. B2C Demographics WHO Register for a webinar Read an article Buy something WHAT Triggered vs. mass Drip or automation Behavioral-based Day and time WHEN Mobile/tablet Web browser/webmail Desktop/at work WHERE Brand awareness Content marketing Influence behavior Drive purchase WHY Opens Clicks Conversions HOW
- 29. #MarketingUnited @meladorri @litmusapp Data-driven design Outlook-heavy audience Adjust design for preview pane, code for limited support Image-blocking email clients Code with styled alt text and colors to create interest Large Gmail opens Use hybrid or fluid coding; lack of responsive support Large number of retina devices Adjust Photoshop file for retina sizing Large Lotus Notes audience Start looking for another job
- 30. email receipt requested from an ATM transaction! ENVIROMENT: WHERE/WHEN
- 31. Huh?
- 32. WHAT Book a hotel? Get more info? Add…to…calendar…?
- 33. #MarketingUnited @meladorri @litmusapp From name Subject line Preheader Open Tap/Click Inbox Email/Body THE SUBSCRIBER EXPERIENCE
- 34. Inbox
- 35. 35 ~25 characters ~35 characters ~85 characters
- 36. #MarketingUnited @meladorri @litmusapp Cutoffs can have immature and/or offensive consequences
- 38. @meladorri @litmusapp#MarketingUnited 75% of emails are displayed with preview text in the inbox
- 41. Images
- 42. @meladorri @litmusapp#MarketingUnited 43% Of emails are viewed with images disabled.
- 46. Guide to styled ALT text: bit.ly/styledALT Guide to image blocking: bit.ly/image-block !
- 47. Alignment
- 50. @meladorri @litmusapp#MarketingUnited Alignment Creates order and organization. The scaffolding for your email.
- 51. #MarketingUnited @meladorri @litmusapp Left Alignment Is natural to read since it mirrors the way we read. It’s easy for the eye to follow.
- 52. #MarketingUnited @meladorri @litmusapp Center Alignment Is harder to follow from line to line. Use sparingly.
- 53. #MarketingUnited @meladorri @litmusapp Right Alignment Is also harder to read for Western languages. Use sparingly.
- 56. Proximity
- 57. #MarketingUnited @meladorri @litmusapp These are related
- 58. #MarketingUnited @meladorri @litmusapp Are these?
- 59. @meladorri @litmusapp#MarketingUnited Proximity Creates relationships and groups between elements. Makes things easier for the reader.
- 61. #MarketingUnited @meladorri @litmusapp Proximity + alignment
- 62. Color
- 69. Serif Stroke added to the ends of characters. Times New Roman, Courier, Palatino, Garamond, Bookman, Georgia.
- 70. Sans-serif Arial, Helvetica, Verdana, Comic Sans, Trebuchet, Arial Black, Impact. No extra stroke features at the end of characters.
- 71. Choosing Type
- 72. #MarketingUnited @meladorri @litmusapp Comic Sans Papyrus Brush Script
- 73. Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow chuck venison flank sausage picanha prosciutto. Meatloaf short ribs pig chicken jerky. Turkey shoulder corned beef swine filet mignon boudin biltong fatback chuck sirloin pork belly cupim. Andouille turducken Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow chuck venison flank Line Height/Spacing
- 74. Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow chuck venison flank sausage picanha prosciutto. Meatloaf short ribs pig chicken jerky. Turkey shoulder corned beef swine filet mignon boudin biltong fatback chuck sirloin pork belly cupim. Andouille turducken Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow chuck venison flank Line Height/Spacing 1.4–1.6 font size
- 75. Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow chuck venison flank sausage picanha prosciutto. Line Length Bacon ipsum dolor amet spare ribs turkey flank boudin, pastrami turducken rump cupim chuck jowl alcatra ham hock doner. Turkey pig tongue jowl meatloaf meatball, shankle cow chuck venison flank sausage picanha prosciutto. 50-75 characters
- 76. @meladorri @litmusapp#MarketingUnited Font Guidelines Don’t use too many. Consider the message a particular font may send. Use them consistently.
- 77. Hierarchy
- 78. @meladorri @litmusapp#MarketingUnited Hierarchy has to do with the order, number and scale of the elements in your message
- 79. @meladorri @litmusapp#MarketingUnited Use hierarchy to… Influence user behavior Guide subscribers to click Set expectations Enhance comprehension
- 80. @meladorri @litmusapp#MarketingUnited Create Hierarchy By using size, color, alignment, contrast, and position.
- 81. #MarketingUnited @meladorri @litmusapp Use actionable insights to send smarter emails Knowing your audience is key to building emails that look great and drive performance. With the addition of Email Analytics to your account, you have access to rich audience insights that will help you optimize, target and track trends in your campaigns. Optimize conversion rates Act-On saw a 130% increase in clicks and 93% increase in sales- ready leads by optimizing emails for their growing mobile audience.
- 82. #MarketingUnited @meladorri @litmusapp Use actionable insights to send smarter emails Knowing your audience is key to building emails that look great and drive performance. With the addition of Email Analytics to your account, you have access to rich audience insights that will help you optimize, target and track trends in your campaigns. Optimize conversion rates Act-On saw a 130% increase in clicks and 93% increase in sales- ready leads by optimizing emails for their growing mobile audience.
- 83. #MarketingUnited @meladorri @litmusapp Use actionable insights to send smarter emails Knowing your audience is key to building emails that look great and drive performance. With the addition of Email Analytics to your account, you have access to rich audience insights that will help you optimize, target and track trends in your campaigns. Optimize conversion rates Act-On saw a 130% increase in clicks and 93% increase in sales-ready leads by optimizing emails for their growing mobile audience.
- 84. @meladorri @litmusapp#MarketingUnited Be consistent with styling Headlines: 22px+ Subheads: 18-20px Body copy: 13px minimum - 15-16px is better
- 85. #MarketingUnited @meladorri @litmusapp Wine Merlot Cabernet Chardonnay Beer Stout Amber Pale Ale
- 86. #MarketingUnited @meladorri @litmusapp Wine Merlot Cabernet Chardonnay Beer Stout Amber Pale Ale Wine Merlot Cabernet Chardonnay Beer Stout Amber Pale Ale
- 88. #MarketingUnited @meladorri @litmusapp • Readability • Usability • Clarity
- 89. @meladorri @litmusapp#MarketingUnited White space can be any color. It’s just breathing room.
- 93. less white space = cheap more white space = luxury h"p://alistapart.com/ar0cle/whitespace Use white space to set the tone. Same content (copy and image)…
- 94. Use white space to improve legibility + comprehension
- 95. @meladorri @litmusapp#MarketingUnited “…good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%...” h"p://www.smashingmagazine.com/2009/09/24/10-‐useful-‐usability-‐findings-‐and-‐guidelines/
- 96. @meladorri @litmusapp#MarketingUnited The rule of thumb 40–60 pixels between elements
- 97. Surround something with white space to make it stand out.
- 98. Emphasis
- 99. #MarketingUnited @meladorri @litmusapp When you emphasize EVERYTHING, you emphasize nothing.
- 101. #MarketingUnited @meladorri @litmusapp I LIKE BIG BUTTONS … AND I CANNOT LIE
- 103. Next Steps
- 104. #MarketingUnited @meladorri @litmusapp 80% of subscribers delete emails that look bad on their phones… …and 30% unsubscribe Human-centered design
- 105. Download workbook: bit.ly/email-plan Map out the 5 W’s of your next campaign with your entire team
- 106. #MarketingUnited @meladorri @litmusapp From name Subject line Preheader Open Tap/Click Inbox Email/Body Brainstorm ideas for how you can maximize each stage of the subscriber experience [no idea is a bad idea at the beginning]
- 107. #MarketingUnited @meladorri @litmusapp Share your plan for using: Images Alignment Proximity Color Fonts Hierarchy White space Emphasis
- 108. @meladorri @litmusapp#MarketingUnited Keep It Consistent Develop a process and email style guide. Use type, color, and structure the same way consistently.
- 109. everyone designs