Modular email templates
•Als PPTX, PDF herunterladen•
16 gefällt mir•12,937 views
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
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (18)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Modular email templates
Ähnlich wie Modular email templates (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Modular email templates
- 5. Our process Project challenges Scalable, adaptive or responsive User testing Internal management
- 6. Custom template system made up of reusable modules that you can rearrange, duplicate or remove for different designs. Modular templates
- 7. Email designers have been building ‘Master’ templates for years Not new
- 9. 50% mobile emailclientmarketshare.com Prompting widespread redesigns ~
- 10. No one wants to build 20 or 40 one-off mobile templates…
- 11. Build for scale, speed and consistency.
- 12. Module List Components Modules Master Sample / Guides Our basic process 1. 2. 3. 4. Button #2C6E26 #BCD0CF #D9D9D9
- 13. Adorama
- 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
- 18. Responsive layout Fluid grids, fluid media & @media header footer copy copy copy copy header copy copy
- 19. Scalable layout narrow fixed-width header footer copy copy copy copy header footer copy copy copy copy
- 20. scalable500px
- 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. 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. Scalable is most effective with minimal, image driven layouts 480px scalable responsive
- 24. 2 biggest challenges Dense image-based content & navigation
- 25. Dense images
- 26. Content too dense to work as a fluid image within a responsive template Desktop Mobile
- 27. Simplify the design, and lose important product information Desktop Mobile
- 28. Switch from image to HTML text. Great for image blocking and control, but limits creative options and adds complexity. Desktop Mobile
- 29. Different desktop and mobile images solves the problem, though adds weight and production time Desktop Mobile
- 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. Image swap from a deployed campaign Desktop Mobile
- 32. Desktop Mobile Image swap from a deployed campaign
- 33. Desktop Mobile Image swap from a deployed campaign
- 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. Desktop Mobile Use templates to speed up asset production
- 37. Old navi
- 38. New branding
- 39. Navi
- 40. Final navigation
- 41. Outlook 2010 – navi images off
- 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. Touch friendly
- 44. Testing different navi treatments
- 45. Testing different navi patterns
- 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. Final Adorama Master template
- 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. Keep testing
- 52. Monster
- 53. Improved responsive templates + Brand refresh + Horizontal build
- 54. Horizontal
- 56. Visual style Design meetings Mood boards Few concepts of one module Surveys Explore other emails and sites Website style guide Website Mobile apps
- 61. Looked to apps for branding
- 64. Horizontal
- 65. Vertical
- 66. Used control templates to draw up module list
- 67. sketch
- 68. Marvelapp – take photos of sketches & link up
- 69. Final vertical modular template
- 70. Dynamic content
- 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. Increased avatar 50px to 70px
- 76. Redesign almost 2x height
- 77. a/b test 05/31 – 08/06, 2013 (control left)
- 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. a/b test 05/31 – 08/06, 2013 (control left)
- 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. mobile desktopNo In-between Adaptive layout control
- 82. mobile desktop Responsive re-design Fluid In-between
- 83. 18,796 distinct Android devices http://opensignal.com/reports/2014/android-fragmentation
- 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
- 86. iPhone 6+ Adaptive layout Responsive layout
- 87. New modular email system in 2014
- 88. Large amount of diversity
- 89. View in context via sample templates
- 90. User testing
- 91. Our lab
- 93. Remote
- 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. 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. Participants tapping on subject lines
- 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. 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. “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. 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. 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. Instructions(screenshots to access test account)
- 104. Hit reply
- 106. Being able to screenshot workout summary increased social shares
- 107. Internal management
- 108. “Email client support is a very deep level of gross” - @sparkbox http://seesparkbox.com/foundry/coding_ emails_doesnt_have_to_be_painful
- 109. *Start of module three* *End of module three* Comment the code
- 110. 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.”
- 111. Screencast Walks through the design & code header footer copy copy copy copy
- 112. Component & module breakdown (static or live) copy copy 300x200px image 18px text http://styleguides.io http://maban.co.uk/projects/front-end-style-guides
- 113. 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
- 114. https://litmus.com https://www.emailonacid.com QA & maintain the code Human error and developing for a fluid environment
- 116. Workflow & tools
- 117. 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.”
- 118. 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.”
- 119. 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.”
- 120. Go forth and iterate
Hinweis der Redaktion
- Hi my name is Anna Yeaman
- I’m the Creative Director at Style Campaign -- anna@stylecampaign.com / @stylecampaign / www.stylecampaign.com
- I wrote a bit about modular emails last year, discussing the MapMyFitness template system. I’m going to take a more in-depth look in this presentation
- via two case studies from Adorama and Monster.com
- I’ll be covering the process we use and some of the project challenges. I’ll also talk about user testing and internal management.
- So by modular design I’m referring to a custom template system made up of reusable modules that you can rearrange, duplicate or remove for different designs.
- This approach isn’t new, email designers have been building modular templates for a long time, back when we only had to worry about desktop clients. They were commonly referred to as the ‘Master’ template.
- So if this approach has been around for years, why all this renewed interest?
- What’s made this so popular with our clients, especially over the last two to three years, is the need for widespread mobile redesigns.
- It’s just not practical to build out large numbers of standalone templates. When responsive design first appeared in 2010, our clients were fairly cautious, requesting a few standalones for a/b testing. But once the benefits of responsive design had been established and mobile usage continued to grow, our clients were looking to make a broader commitment, they wanted their whole email program to be mobile optimized.
- And this is why we’ve seen such renewed momentum towards a modular approach, because it makes large scale mobile redesigns more manageable. So rather than tackling it one template at a time, you create the means to quickly and consistently build out tens, if not hundreds of templates.
- So before I go into more detail with the case studies, this is what our basic process looks like… We start by identifying common design patterns already in use, or sketching new patterns to come up with a module list. Then we establish the basic components and visual style such as buttons, typography and color palette, from which we can then create the fleshed out modules. All the modules together make up the ‘Master’, its essentially one big HTML file. Optionally we’ll create sample templates, or email guides which can be either static or live.
- As useful as diagrams are, in the real world there are many variables from project to project. So while we might have the goal of establishing the visual style, the way we go about it may vary. You’re never going to be able to hold too tightly to any one ideal process. Which is why I wanted to look at two real world case studies starting with Adorama.
- Photo and electronics retailer Adorama, approached us last year to mobile optimize their email program as well as update the branding.
- We started by reviewing their existing creative. Here you can see an example of their old product, postcard and standard email templates. I’ll often go through and screenshot each unique section into a document, along with some notes (you can also do this at the component level). From this and our discussions we identify the types of use cases that need to be accounted for, and draw up a list of potential modules. Everyone will have a header and footer, Adorama also had navigation, preference and learning center, 3 col product grids and images of various sizes. So we were able to take an inventory of what was in use, but at the same time you’re re-imagining how this is all going to work for mobile, and reviewing the content strategy.
- From that we have our module list, to which we’ll also add wireframes. That document gets the go-ahead from the client, so we all know what the modules are going forward. Though its not unusual for modules to get added or tweaked as we get further into the process.
- Something we explored during that initial research phase, was whether a scalable or responsive template would work best for Adorama.
- A responsive template automatically adjusts its layout as you switch from the desktop to a mobile device. Here for instance our two column grid has stacked into one column on mobile. It does this via fluid grids, fluid images and CSS media queries. The code just states, if the viewport is below a certain width (most commonly based on viewport width but not always), then change the layout like this, so it gives you a lot of control over every element.
- With scalable layouts the same creative gets sent to both desktop and mobile users, and there's no control to rearrange or adjust anything. As you can see, the layout is identical no matter were its opened. It’s fixed-width usually between 500 and 600px wide, as when its viewed on the iPhone the email is automatically scaled to the device width, so the narrower the better.
- As part of our research we reviewed various scalable layouts with Adorama. Like this Lowes example which is 600px wide, you can see it’s a simplified design with large fonts and buttons. Yahoo is narrower at 500px wide, it’s a very minimal, image driven layout, you can see that’s there’s very little copy throughout. It features a nice list view with plenty of space around the touch targets. A scalable navigation can be challenging once you exceed 3 or 4 tabs, as seen in this JCP example. Also because you’re serving up the same content to desktop and mobile users just scaled down, it can be difficult for image based text to remain legible beyond large headlines.
- After getting a feel for what a scalable layout would entail, Adorama opted for a responsive template, as it gave them more control over the mobile layout.
- I would say that the majority of our clients are choosing responsive layouts over scalable, my guess is its about 4 to 1. This is reflected in Chad White’s recent findings that 36% of major B2C brands are currently using a responsive email vs. only 16% scalable.
- While still very effective, its rare that a scalable layout matches the user experience of a responsive design. Those that do tend to be from fashion retailers, who rely heavily on photography. Lane Bryant whose scalable layout is 480px wide, is a good example of a scalable layout on par with responsive. You can see it looks quite narrow on the desktop, it’s a boarder line skinny layout which is what makes it so effective, along with the photography and short over-sized copy. Though this degree of minimalism, just wasn’t in line with Adorama’s content strategy.
- The two biggest challenges of this project, were the redesign of the navigation and the dense image-based content.
- You can see why a scalable layout would’ve been difficult, as this is their old creative on iOS.
- For the same reason we couldn’t make the images fluid within a responsive layout, as they’d end with unreadable copy.
- We looked at simplifying the design, but even then its surprising how large everything needs to be to scale down appropriately, its still not that easy to read the text. You’d also be leaving out valuable information. When selling photographic equipment, it can be hard to differentiate products just from a photo, ideally you really need the specs.
- Then there’s the option of making the text HTML rather than image-based, that way you could stack it underneath on mobile, read the text with images blocked and control font sizes. The downside of switching to HTML though, is that the team relied on the creative freedom of working with images. Also if we’d had to account for all those different image layouts in HTML, it would have resulted in a lot of extra modules. Obviously as email designers we advocate for live text wherever possible, but it can add to the complexity of production.
- The last option we looked at was to swap out the desktop and mobile images. Only consider this if you’ve carefully explored and discarded all the other options. While this solves the problem, it involves creating two sets of image assets and it also adds to the file size, so you don’t want to overuse it.
- After considering the trade-offs Adorama wanted to try the option of swapping desktop and mobile images. This article talks about ‘crop points’, and how it’s sometimes useful to prepare different versions of an image, not based on resolution but art direction. Basically what the new <picture> specification hopes to address for web developers, which you can read about via this second link.
- Here’s a few examples that the Adorama team has designed and deployed. As you can see they have simplified their desktop images, just not to the extent that a scalable layout would have demanded. We also reduced their template down from 700px to 640px which helps.
- Here they took out the product image and some of the copy on mobile.
- This campaign changes the alignment but the text remains at a readable size….they’re still experimenting with different image treatments. One of the more common reasons why some of our clients have used image swapping, besides legibility, is to retain the hierarchy on mobile. If you have a fluid hero image on desktop and you scale it down, it often loses it’s sense of scale and impact. Secondary items can end up overwhelming it. Switching to a vertical crop, or new design retains focus and scale.
- I asked Damien, the email strategist at Adorama what’s it’s been like to produce two sets of images, as the increase in production time was a major concern when we were weighing up the pros and cons. He told me that it hasn’t been an issue, and only takes a few moments in most cases to create the mobile version as they share the same elements.
- They created templates for their standard banners, to speed up production time. You can see that they just need to switch out the information but the layout stays the same. So the additional artwork turned out not to be an issue for them.
- As for image optimization you can reduce file size using tools like jpegmini, imageoptim or Riot seen here. There’s a bunch listed in this post. You can see the 127K image went down to 35K. If you don’t have time to finesse each image by hand, you can batch process them.
- The second big challenge of this project was redesigning the navigation. This is their old header, you can see that the tabs are too small for touch, its all image-based and there’s low contrast with the blue on blue. In addition, much of it was redundant; it features either an image or text three times, all linking to the same place, which can potentially cause confusion.
- Adorama were in the very early stages of a brand refresh, we just had these two images to guide us. Damien's team had also produced a navigation brief, which included examples and notes.
- The first mockup we did strongly references the new branding, the second features the icons but in the original color palette. The third most closely resembles what they had on their website, and the fourth shows an option with sub-navigation.
- Adorama went with the first option, with the color coded branding.
- We added HTML labels next to the icons so they’d be functional with images disabled, and to aid recognition.
- Nielsen states that very few icons are universally known, and mentions an Icon intuitiveness test, whereby you show your icons to customers without the text label and get them to guess what it represents in order to assess how effective they are.
- We also made sure that all the modules including the navigation, were touch friendly and legible on the iPad.
- Adorama have gone on to experiment with the navigation, constantly iterating to see what works.
- Just recently they started testing a new pattern with the navigation on one line on mobile.
- When I looked at the responsive navigation of 50 major retailers, I found that the reduce pattern was the most popular. Though popular could just mean its easy to implement, or everyone is copying everyone else. Its important to carry out your own testing plan.
- Sometimes a design pattern is widely adopted, but not necessarily the best approach. This test found that the hamburger with an outline, was 3 times more likely to be tapped than the one without, as it more closely resembles a button. Then the word ‘Menu’ outperformed the ‘hamburger’ by more than 20%, I would guess because there’s no room for misinterpretation. So its always important to test everything with your audience. We’ll sometimes add modules purely for testing purposes, such as two or more navigation options or lists vs. Grids.
- This is the final master template that we delivered, besides those four image modules the rest of the template such as the product grids is HTML to balance it out. The body modules are adaptive, whereas the navigation, preference center and footer are fluid so there’s some give on smartphones. If I remember rightly this was partly to keep the file weight down, as it means we’re only swapping out 320px wide images on mobile rather than 640px.
- Here are some of the templates Adorama have gone on to deploy.
- If you are taking note of the length of some of these templates, tests have shown that they generate more revenue from a larger number of product listings. Though that was with their old desktop control. They’re planning to run new tests around template length now that their emails on mobile are significantly longer, and weight is more of an issue.
- When you switch to a mobile template you have to revisit many of your old desktop findings, to see if the results still stand.
- The second case study is Monster.com, one of the largest employment websites in the world. Last year they contacted us to design them better responsive templates. It's one thing when your control is a dated desktop layout, but another to go up against someone else's responsive design.
- Monster choose a modular approach, as the group of templates they had prioritized for the redesign shared many common elements. They also wanted to refresh the branding and experiment with both a horizontal and vertical format.
- We started with the horizontal layout.
- The biggest constraint here is not to exceed 2100px in width, otherwise it all gets scrunched up in desktop Outlook.
- For a brand refresh we use a range of sources to establish the visual style.
- I usually start with type or color. Typecast is a great tool, not just for working with web fonts but you can also create responsive mockups in the browser.
- For color there are a lot of great resources, colourco being one of the most recent.
- So to that we’ll add buttons, text links and imagery to build up those basic components. This part of the process is similar to Samantha Warren’s styletiles. Sometimes email designers will inherit a style guide that was envisioned for the web or mobile apps, and its our job to interpret it for email. Obviously having a style guide makes this part of the process easier, but at the same time certain elements like fonts or gradients might not translate well. So I think there’s still value in email specific guides, especially live ones as email coding is such a niche, though it can be seen as a redundancy if it’s already documented elsewhere.
- If I’m not lucky enough to have a style guide, or other strong reference material, then exploring other brands email or web creative helps to quickly set some boundaries. Dan Mall creates what he calls a Visual Inventory, to establish the art direction without having to create multiple concepts.
- For this project I mainly took my design cues from Monster’s mobile apps, and to a lesser extent their website.
- Our first draft was of a horizontal responsive template. So it looks like this on the desktop and reformats into a vertical column on mobile…
- We then created a scalable mockup for comparison. A horizontal layout works much the same as a vertical one, except that it scales to the height on iOS rather than the width. The Monster template was around 450px tall, featured large copy and finger friendly buttons. We all preferred the simplicity of the scalable layout. It’s a classic example of were mobile constraints, leads to a more focused design. We discussed flipping it vertical on mobile, but it was decided to leave it scalable.
- This is how it looks on iOS. We didn't go overboard with the design cues just the small arrow here, I think the teaser content to the right is enough of a prompt.
- By the time we started the vertical framework, we’d already established the visual style.
- …and compiling a list of modules was straightforward as we had the control templates for reference. Here you can see the, “This Week on Monster” control, it includes news content, networking functionality as well as job search components.
- Our job was to finesse the design patterns, and we started by sketching out some ideas.
- Recently I’ve been playing with Marvelapp, which allows you to share clickable prototypes from your sketches or PSDs. Invision is another well known tool along similar lines.
- Once we had our modules sketched out, we mocked up the desktop and mobile views in Photoshop. We’ll submit a few modules to see if were on the right track, before designing the full set. This is all the final modules grouped together. Sometimes we’ll build HTML prototypes from sketches, but its usually with design patterns that are more experimental or have some, motion or interaction. We’ll work stuff out in the browser and finesse in the browser, but we still use PS to nail down the look and feel. I certainly see the benefit of working in the browser, just not exclusively.
- The biggest challenge of the Monster.com project, was that most of the content was dynamic which curbs your layout options.
- This is their old network center, you can see that the number of connections and the copy lengths all vary, and there's only so many ways to accommodate that dynamic content. This meant we couldn’t deviate from the existing layout all that much.
- We stuck with rows, but took out the redundant headlines, grouping the content under the one ‘network center’ heading. We increased the font size, and made the call-to-actions, buttons rather than text.
- You also need to set aside more time for stress testing when working with dynamic content. This was doing the rounds on twitter, poking light fun at an image on the Apple site. Whereby everyone has four letter names and professionally photographed avatars. Real content is a lot messier. Although you can’t see it in this presentation for privacy reasons, we used real content to QA. Plugging in really short and long names for instance, testing the extremes. One useful site is Uifaces.com, which allows you to use real avatars in your mockups.
- Email eye tracking has shown that the human face always draws our attention first.
- With notifications, we gain a lot of information from a persons avatar. So I increased the photo size, and gave it more prominence by positing it top center on mobile.
- This along with other changes increased the height, in fact the redesign was almost twice the height of the control on mobile. This was my biggest gamble of the redesign, betting on more whitespace and legibility over less scrolling.
- When Monster ran an a/b test on the “This Week on Monster” template…
- The redesign won, although it had a slightly lower open rate, it generated more clicks, post open clicks, site visits, job application's and job searches.
- Monster then ran a longer test with the recommended jobs template, to make sure they were making the right template choice. They used the same metrics as a basis for success (Clicks, Visits, Job Searches, Apply Starts, Post Open Click Rate).
- Again the control generated slightly more opens, but the redesign beat the control on all other metrics. Making a better version of an already well performing mobile template is hard. Chances are you won’t see the jump in performance you get when going from desktop to mobile, the creative improves by smaller increments. Though we did see some significant gains in these tests, especially with post open click rate and job searches, so its important to track metrics beyond opens to get the full picture.
- One aspect that might have played a small part in those results, was that the control was an adaptive layout, you can see that it switches between two fixed-width layouts.
- Whereas the redesigned modules were responsive, so they adapt to all those in-between screen sizes.
- If you are flipping between two fixed-width layouts, its either going to be too wide or too narrow on some devices. The platform that this affects most is Android, as there's thousands of screen sizes.
- Though its hard to say how much of an impact this had, as the control rendered really well on the iPhone which accounts for the majority of mobile opens.
- Apple just released the iPhone 6 and 6+ which now makes three iPhone viewport sizes, rather than one.
- What tends to happen on the 6+, is you get a bit of an extra boarder with an adaptive layout, that’s been optimized for a 320px wide screen. Whereas with the responsive template on the right it fills it automatically. When I looked at 50 major retailers in Feb 2014, I found that 77% were using adaptive layouts, and 23% responsive. Going forward I see more brands choosing responsive, as targeting specific device widths becomes harder to sustain.
- If you sign up for Monsters emails you may notice they look a bit different. That’s because we completed work on a new modular email system early this year, for a rebrand. The one on the left is for employers, and the one on the right job seekers. We kept them separate as they have different use cases and design patterns, though they can be shared.
- Some of the Job Seeker patterns like the Network Center are very specific, and therefore harder to re-purpose elsewhere. Though these are balanced out with more generic patterns like these news items. The employer modules are for sharing articles and offers and there’s numerous options for each.
- When you have this many modules stacked together into one Master, it can be hard to visualize how they might come together. So we mockup sample emails during the design phase, and we delivered a series of sample templates along with the Masters. Monster.com opted for a second modular system, as it allows them to quickly create a large number of templates while retaining team-wide consistency.
- While email metrics are crucial for determining success, you can also inform your design decisions with user testing.
- This can be carried out in the lab
- the field or done…remotely.
- I’m going to focus on remote as it’s fast and cost effective, and therefore fairly easy for anyone to carry out. The way this works is a web service provides participants based on certain demographics, or you can use your own customers. These testers then create a video of themselves talking aloud though a set of tasks and questions that you’ve set. This is the type of video you get back, with a Birdseye view.
- While it lacks real world context, these are some of the ways I’ve still found remote testing to be useful. You get to experience it from your audiences perspective, who don’t have the same world of reference as designers do.
- One of my favorite examples from a recent test, was the participants interaction with the subject line.
- Two out of four testers tried to tap on it, this is a screen from one of the actual tests. This company had been using vertical lines to separate subject line items, which possibly made it resemble navigation. One person was hoping that they were anchor tags, and the other thought it would take them straight to a landing page. From this you could try switching to commas, use more of a general blanket subject line, or go deeper and explore ways that their customers can navigate the email quicker.
- From another session a lady got confused when the subject line didn’t match the order of the body content. She was using it to orientate herself much like a table of contents. In this case she opened the email to find things weren’t positioned where she was expecting them, so everything felt a bit jumbled. You’ll notice that some brands like Groupon Goods use sequential subject lines (corresponds), whereas others like Fancy jump around and even start with items at the bottom of the template. Possibly to get people to explore and scroll. Though I wonder if its isn’t just frustrating based on what I’ve seen in user testing. Either way it’s a good series of a/b tests to run. It’s insightful to listen to non-email-folks discuss the relationship between subject line and the email body. As designers we can take for granted certain conventions, as well be too familiar with our own content.
- User testing is not just about identifying flaw's, you also get a clearer picture of what you’re doing right.
- Here are some comments made when we were testing a responsive email and its landing pages, this test was run with a handful participants. When I shared the videos with our client, their first comment was that it confirmed to them the importance of responsive design, and helped to validate the direction they’d taken. It’s not just what testers say, but what they do that really counts. And in this case, not one participant zoomed or pinched the email once. -- http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
- Seeing people struggle with non-mobile emails is pretty painful to watch, but sharing these videos can help to build a case for mobile optimization in a way that I think little else can. It also lights a fire under the whole design team.
- Using a remote user testing service can be tricky at first, because the interfaces are set up to test websites and apps, not emails. I’ve been using usertesting.com, and my way around this was to create a test account in Gmail, then send each participant to a webpage with instructions on how to access that test account. I set the instructions in place of a web URL, and make that the first task.
- Here’s the instructions I use for setting up a new iPhone Mail account. In most cases they’ll already have their own Mail account, so you’ll want to show them how to toggle between the two and delete it after the test. You have to be very specific about which email client you want them to access and how. Luckily you can user test your user test instructions, to get it running smoothly.
- If you want to try user testing in your office or out and about, there’s this three part series written by Cluster on Medium. In it they share this $100 camera, which they use along with Screenflow to record the sessions. In this second post Mailchimp show you what gear they use, it’s a more portable rig so you can use it in cafes for instance. The webcam they use is even cheaper at $50, so it doesn’t have to be a costly exercise.
- There are other ways to get quick, painless user feedback. MMF asked their subscribers to simply hit reply and let them know what they thought of their redesigned modular system.
- From that feedback, they were able to ascertain that the font size used for the workout summary module, was causing users to scroll on their phones.
- After reducing the font size slightly social shares increased as the summary fit on one screen, making it easy to take a screenshot and share. Instagram in particular saw a boost. Obviously not everything that comes up in user testing is automatically golden. Part of our job is to interpret the results and give weight to those findings. Though it certainly generates a lot of fuel for further a/b tests, and reminds us that there’s real people on the end of each email address.
- One question which always comes up when discussing modular templates, is how difficult are they to work with in-house?
- Obviously, one reason ready-made modules are so attractive is because they take care of the responsive coding. As Sparkbox states, email client support is a very deep level of gross. Which can make email development very frustrating.
- Commenting the code so that the start and end of each module is clearly defined, goes a long way towards easy internal management. As Jay mentions in the MMF post, clear delineations helped to make the modules plug and play.
- He also mentions, “After a day… and Jay had never worked with responsive templates before “ . Obviously not everyone will have the same aptitude when it comes to email code. But on the whole most people don’t find it as difficult as they feared, as for the most part you’re just juggling around modules and updating the copy and images.
- Though you can create various support materials. We’ll sometimes make screencasts which walk teams through their modular code, and shows them how to get the most out of it creatively.
- Or guides that document the components and modules and also explain the code. These are either static like a PDF, or live on the web. A couple of live guides to look at for inspiration are Lonely Planets seen here (design elements like color and typography and more fleshed out components such as cards), and also Fontshops (I like how they have it broken down to Globals, Objects and Modules). Ours are usually component's, modules and sample templates.
- Sample templates can be another useful support item like you saw earlier with Monster.com, as they allow you to view the modules in context, and also get teams up and running quickly. Though in my experience the comments in the Master are usually enough for most coders.
- Though even with support materials and a solid codebase, you’ll still want to continue to QA your creative. Not just to check for human error, but because we’re developing for a fluid environment. New email clients get released, new versions of an OS, or support changes often without warning. Many of our clients use preview tools like Litmus or Emailonacid, to help keep the code up-to-date internally.
- Some have even started to build their own device lab. Just a handful of real devices can cover many of your urgent needs. Just check your email stats to see which clients to prioritize, and keep an eye on which versions of each platform are most popular. You’ll find for instance that Android is more spread out than iOS.
- I also spoke to some of our clients about their in-house workflow.
- The majority were using a traditional process to manage the modular system. For instance Monster.com use Dreamweaver as their text editor, and manually create new templates from the master.
- MMF use Brackets, and their ESP acts as a CMS of sorts keeping track of different builds.
- Rackspace use TextMate, and mentioned that they avoid WYSIWYG editors due to their habit of adding additional code or breaking things. There’s many different workflows that you can adopt with a modular template at its core. For instance those dealing with language translations may wish to automate part of the process, or those with team members that aren’t so code savvy can hook it up to a template builder. There’s definitely an interest in finding efficiencies, in the way that emails are created and managed.
- Finally, when you have such a well defined foundation, its easy to design your own modules, as the visual style has already been established. Obviously it does require a bit more coding proficiency, but clients like Adorama and MMF have gone on to rift on some of the original design patterns that we delivered. They’ve put them through their paces via a/b testing, experimenting with things like module order and combination. Our goal is to fashion bulletproof modules that are easy to work with out the gate, but that’s just the starting point. I think ultimately its about creating something that our clients can iterate on and extend, making it their own.
- Thanks! -- Anna Yeaman: anna@stylecampaign.com / www.stylecampaign.com / @stylecampaign