Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modular email templates

11,838 views

Published on

I take a look at designing a modular template system. This is simply a group of reusable modules and email patterns, that can be combined together in various ways to generate different templates. Although not a new approach, I've seen a surge of interest in the last few years as everyone grapples with mobile redesigns.

The featured examples vary in scope and industry. Adorama started with just ten modules and have gone onto expand it, whereas Monster’s latest is 35. They also had different design challenges, which I go through along with our process, user testing and internal management.

Click the 'Notes' tab below right, to view the video transcript for each slide. The video shows the live templates and gives a bit more context than the deck. You can watch it here: http://bit.ly/1zumjAd

Published in: Design
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ●●● http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Modular email templates

  1. 1. Modular email templates
  2. 2. Anna Yeaman @stylecampaign
  3. 3. http://stylecampaign.com/blog/2013/09/mapmyfitness-case-study
  4. 4. 2 case studies
  5. 5. Our process Project challenges Scalable, adaptive or responsive User testing Internal management
  6. 6. Custom template system made up of reusable modules that you can rearrange, duplicate or remove for different designs. Modular templates
  7. 7. Email designers have been building ‘Master’ templates for years Not new
  8. 8. Why the renewed interest?
  9. 9. 50% mobile emailclientmarketshare.com Prompting widespread redesigns ~
  10. 10. No one wants to build 20 or 40 one-off mobile templates…
  11. 11. Build for scale, speed and consistency.
  12. 12. Module List Components Modules Master Sample / Guides Our basic process 1. 2. 3. 4. Button #2C6E26 #BCD0CF #D9D9D9
  13. 13. Adorama
  14. 14. Mobile optimization + Brand refresh
  15. 15. Review existing creative
  16. 16. Module list 1. Header 2. 3 col grid 3. 2 col grid 4. Short image 80px 5. Medium image 150px 6. Tall image 250px 7. X-Tall image 800px 8. Navigation 9. Preference center 10. Footer
  17. 17. Responsive or Scalable?
  18. 18. Responsive layout Fluid grids, fluid media & @media header footer copy copy copy copy header copy copy
  19. 19. Scalable layout narrow fixed-width header footer copy copy copy copy header footer copy copy copy copy
  20. 20. scalable500px
  21. 21. Opted for responsive, for a superior mobile user experience. A scalable layout would have required an aggressive over simplification of their desktop creative.
  22. 22. http://www.exacttarget.com/blog/at-the-tipping-point-for- mobile-friendly-email-design/ Desktop 52% Responsive 36% Scalable 16% 36% of major B2C brands are currently using responsive email design vs. 16% scalable Chad White, August 2014
  23. 23. Scalable is most effective with minimal, image driven layouts 480px scalable responsive
  24. 24. 2 biggest challenges Dense image-based content & navigation
  25. 25. Dense images
  26. 26. Content too dense to work as a fluid image within a responsive template Desktop Mobile
  27. 27. Simplify the design, and lose important product information Desktop Mobile
  28. 28. Switch from image to HTML text. Great for image blocking and control, but limits creative options and adds complexity. Desktop Mobile
  29. 29. Different desktop and mobile images solves the problem, though adds weight and production time Desktop Mobile
  30. 30. Choose to swap desktop and mobile image modules http://www.cxpartners.co.uk/cxblog/user- experience-problems-with-responsive-photos http://blog.cloudfour.com/dont-use- picture-most-of-the-time
  31. 31. Image swap from a deployed campaign Desktop Mobile
  32. 32. Desktop Mobile Image swap from a deployed campaign
  33. 33. Desktop Mobile Image swap from a deployed campaign
  34. 34. Adorama Damien Alexeev – Email Campaign Strategist “Producing two image sets hasn’t been an issue at all. I created a mobile template framework to utilize for our standard product banners and essentially once the desktop version is created it’s as simple as copying over the elements needed for mobile. It only takes a few moments in most cases to create the mobile version. Non-standard banners take slightly more time, but provided the important elements are identified it’s just about stripping down the desktop version to the essentials.”
  35. 35. Desktop Mobile Use templates to speed up asset production
  36. 36. http://stylecampaign.com/blog/2013/01/image-optimization
  37. 37. Old navi
  38. 38. New branding
  39. 39. Navi
  40. 40. Final navigation
  41. 41. Outlook 2010 – navi images off
  42. 42. “A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity” http://www.nngroup.com/articles/icon-usability
  43. 43. Touch friendly
  44. 44. Testing different navi treatments
  45. 45. Testing different navi patterns
  46. 46. http://stylecampaign.com/blog/2014/02/respons ive-email-navigation/
  47. 47. Tapped 20% more than hamburger with outline 3x more taps with outline (looks more like a button) MENU http://exisweb.net/mobile-menu-abtest http://exisweb.net/menu-eats-hamburger
  48. 48. Final Adorama Master template
  49. 49. Some deployed campaigns
  50. 50. Adorama Damien Alexeev – Email Campaign Strategist “We definitely see larger revenue from a larger product listing in the email. Though I will be conducting testing to revisit the length. Our previous test was before implementing the new template. So now our emails on mobile are significantly longer. We’re working on a solution to highlight some products that direct to landing pages for product categories, rather than listing all the products in the email.”
  51. 51. Keep testing
  52. 52. Monster
  53. 53. Improved responsive templates + Brand refresh + Horizontal build
  54. 54. Horizontal
  55. 55. Stay below 2100px for Outlook
  56. 56. Visual style Design meetings Mood boards Few concepts of one module Surveys Explore other emails and sites Website style guide Website Mobile apps
  57. 57. http://typecast.com http://fontsinuse.com
  58. 58. http://colourco.de
  59. 59. http://styletil.es http://sparkbox.github.io/style-prototype
  60. 60. http://danielmall.com/articles/visual-inventory
  61. 61. Looked to apps for branding
  62. 62. Horizontal responsive template
  63. 63. Horizontal scalable template
  64. 64. Horizontal
  65. 65. Vertical
  66. 66. Used control templates to draw up module list
  67. 67. sketch
  68. 68. Marvelapp – take photos of sketches & link up
  69. 69. Final vertical modular template
  70. 70. Dynamic content
  71. 71. Old network center
  72. 72. Old network center New network center
  73. 73. https://twitter.com/philnelson/status/509869150022279171 http://uifaces.com Stress test
  74. 74. http://www.edisonda.com/files/download/EDISONDA_report_2013_eyetracking_in_e-mail_marketing.pdf “The first object to attract viewers attention? In most cases it would be a face […] one can receive much more information than while reading text.”
  75. 75. Increased avatar 50px to 70px
  76. 76. Redesign almost 2x height
  77. 77. a/b test 05/31 – 08/06, 2013 (control left)
  78. 78. Monster.com Leah Joyce– Sr. Director of CRM Marketing “For the test we didn’t factor in “Open Rate” as a part of gauging the success of this test. With that said, the template provided to us by Style Campaign won across the board. It was definitely a distinct and noticeable improvement.”
  79. 79. a/b test 05/31 – 08/06, 2013 (control left)
  80. 80. Monster.com Leah Joyce– Sr. Director of CRM Marketing “While we saw better opens with our Control we were measuring the impact of the design changes. The Style Campaign templates drove significantly higher email KPI’s”
  81. 81. mobile desktopNo In-between Adaptive layout control
  82. 82. mobile desktop Responsive re-design Fluid In-between
  83. 83. 18,796 distinct Android devices http://opensignal.com/reports/2014/android-fragmentation
  84. 84. Top 6 email clients Sep. 2014 http://emailclientmarketshare.com 1. iPhone – 26% 2. Gmail – 15% 3. iPad – 13% 4. Outlook – 11% 5. Apple Mail – 7% 6. Android – 6% Mobile Desktop
  85. 85. 414px 320x568 viewport iPhone viewports https://twitter.com/ppk/status/509814582479966208 1136x640 1334x750 1920x1080 375x667 viewport 414x736 viewport
  86. 86. iPhone 6+ Adaptive layout Responsive layout
  87. 87. New modular email system in 2014
  88. 88. Large amount of diversity
  89. 89. View in context via sample templates
  90. 90. User testing
  91. 91. Our lab
  92. 92. https://medium.com/bridge-collection/a-guerilla- usability-test-on-dropbox-photos-e6a1e37028b4
  93. 93. Remote
  94. 94. User testing Subtle usability issues Validate a design approach Ideas for new content and a/b tests Missing information Thought processes and behaviors Flow from email to landing page Finesse pre-launch e.g. holiday creative Competitive analysis Brand feedback: first impressions, language used Motivates a team & gets you resources
  95. 95. User testing Subtle usability issues Validate a design approach Ideas for new content and a/b tests Missing information Thought processes and behaviors Flow from email to landing page Finesse pre-launch e.g. holiday creative Competitive analysis Brand feedback: first impressions, language used Motivates a team & gets you resources
  96. 96. Participants tapping on subject lines
  97. 97. 414px Subject line as table of contents header footer Item 1 Item 4 Item 5 Item 2 Item 3 Item 1 | Item 2 | Item 3 Subject line Item 2 | Item 5 | Item 1 vs.
  98. 98. User testing Subtle usability issues Validate a design approach Ideas for new content and a/b tests Missing information Thought processes and behaviors Flow from email to landing page Finesse pre-launch e.g. holiday creative Competitive analysis Brand feedback: first impressions, language used Motivates a team & gets you resources
  99. 99. “I like how it’s mobile friendly; I don’t have to go left and right.” “I love, love the design, I love the cleanness of it. It’s very easy to operate and read.” – comments from user testing responsive email “I think the text sizes are perfect.”
  100. 100. User testing Subtle usability issues Validate a design approach Ideas for new content and a/b tests Missing information Thought processes and behaviors Flow from email to landing page Finesse pre-launch e.g. holiday creative Competitive analysis Brand feedback: first impressions, language used Motivates a team & gets you resources
  101. 101. Remote user testing email 1 - Set up a test email account e.g. testing@gmail.com 2 - Send email to test account, try to make it the only email available 3 - Create instructions e.g. how to set up a Gmail account via Mail app 4 - Send URL of instructions in place of website URL & set as first task 5 - Include how to delete test account in instructions
  102. 102. Instructions(screenshots to access test account)
  103. 103. https://medium.com/@mulligan/how-to-run-live- user-testing-part-1-setup-9b7e9edd2de8 http://blog.mailchimp.com/recording- mobile-usability-tests
  104. 104. Hit reply
  105. 105. Being able to screenshot workout summary increased social shares
  106. 106. Internal management
  107. 107. “Email client support is a very deep level of gross” - @sparkbox http://seesparkbox.com/foundry/coding_ emails_doesnt_have_to_be_painful
  108. 108. *Start of module three* *End of module three* Comment the code
  109. 109. MapMyFitness Jay DeFoore – Email Manager “Having never worked with responsive templates before, I was worried there would be a sharp learning curve. But much to my surprise the modular templates were easy to work with. After a day or two of experimenting I was quickly able to plug in various combinations of modules to iterate and test different layouts.”
  110. 110. Screencast Walks through the design & code header footer copy copy copy copy
  111. 111. Component & module breakdown (static or live) copy copy 300x200px image 18px text http://styleguides.io http://maban.co.uk/projects/front-end-style-guides
  112. 112. Sample HTML templates from the Master Im ag e header footer copy copy copy copy header footer copy copy copy header footer copy copy header copy copy copy copy copy copy footer
  113. 113. https://litmus.com https://www.emailonacid.com QA & maintain the code Human error and developing for a fluid environment
  114. 114. http://stylecampaign.com/blog/2014/04/managing-a-device-lab Start a mini device lab
  115. 115. Workflow & tools
  116. 116. Monster.com Leah Joyce – Director of CRM Marketing “So far we have had no issues with the templates Style Campaign developed. We are manually creating new emails out of the masters you provided.”
  117. 117. MapMyFitness Jay DeFoore – Email Manager “90% of the emails I create are built off the master template. If I significantly changed anything and need to use that as a new module or template, I just find it in our ESP, which acts as a content management system (CMS) of sorts, and pull out the relevant html. It's fairly easy to manage, and all I use is Brackets (an open-source HTML editor), our ESP, and Litmus for QA.”
  118. 118. Rackspace Cameron Nouri – Marketing Manager “For our team here we actually edit all of our templates using a text editor and adding in code directly to the HTML. We use TextMate primarily to accomplish this. It’s not the most ideal way to do this, but we’ve found that WYSIWYG editors can add additional code into the HTML that can break things. In addition to using TextMate we use Litmus to test any edits to ensure we haven’t broken anything.”
  119. 119. Go forth and iterate
  120. 120. Thanks! anna@stylecampaign.com

×