What is the Value of Design in Email Marketing?

Editor's Notes

• #4: For over a decade, Adestra has been empowering Marketers to achieve their goals and maximize their ROI. We were founded on the principle that marketing success takes more than technology, and that’s why customer service is at the heart of our business. We’re not just Software as a Service, we’re Software and a Service
• #5: My name is Anca, I’m a Content Executive here at Adestra and I’ll be your host for today. I’m joined today by Paul Dyke who is a Lead Designer at Adestra and HTML for email expert. He has a wealth of knowledge on design theory and he believes design affects our interaction with many layers of the modern world as you'll be able to see today. He'll be guiding us through the process of how email design can help deliver on a brand's promise by avoiding fads, being clear on goals and using essential design theory principles can wow your subscribers. I'm sure that by now you're really anxious to hear what he has to say so I'll pass it over to Paul. 
• #6: Hello everyone. We know that beautiful design is more appealing. Well yes, but so do your competitors. [[ Gut instinct Realise your brand identity Where are you going? Email design nuts and bolts The steps we take when creating a design Follow the trends avoid the fads Essential graphic design and how to wow! Refining your design with data ]]
• #7: These days poor design is a no-starter and so there is a general baseline of fine. Good design is essential, awesome design is a competitive advantage. According to the Direct Marketing Association’s 2015 Response Rate Report, email gives you a generous return on investment of 30-32% compared to other channels including social which is 5% to 17%. It’s the good times for being an email marketer, right? Well yes but we are part of a saturated space, competing with apps and social giving us minute-to-minute communication updates to our different digital devices. I’m going to show you how to elevate your emails above that noise.
• #8: In his book Brain Rules, Molecular biologist John Medina says that “Emotionally charged events persist much longer in our memories and are recalled with greater accuracy than neutral memories”. I have a son who is a year and half. He’s not a baby any more, but last year he was and my wife and I found looking after him pretty stressful at times. I remember one late night trip to the supermarket to buy some food for him. Walking up and down the aisles, of unfamiliar products, I kept asking myself what should I choose for him? You can't read the text on every packet. We use our gut instinct. We rely on our emotions and it's design that taps into these. Colour, text and image combine to produce a impression of that product. So what did I pick? Ella’s kitchen. It looks tasty and nutritious. The bright colours and child like illustrations are appealing to children and are therefore also appealing to stressed parents. The information is clearly displayed the stage the product is aimed at, the main ingredients, the texture and that they are 100% organic. So it was the visual imagery to brought me to an emotional state (from stress to reassurance) and this put me in an appropriately receptive frame of mind to receive the message targeted at me. The inbox is the same, you skim through lots of emails and it's the sender name, subject line and your emotional recall from past interactions that counts. So take care, start with writing sharp and concise subject lines and preview text that they are closely matched to the content of your email. Once an email is opened, you only have a moment to prove your message will be relevant, important or trustworthy.  
• #9: 2. Realise your brand identity A recent article in A list Apart blog by Jarrod Drysdale discusses the myth that design is only valuable when it’s new. The truth is that we rarely create a new design for a template. As I’m sure it’s the case with many agencies, we have people who want to work with us year after year. These close relationships mean that we know much about their organisation's marketing objectives so that we can quickly support them in a new project but also join with them to celebrate successful campaigns. When new clients join Adestra and they require help creating an email template, we ask to see a helpful document, if possible called The Brand Guidelines.
• #10: This document contains guidelines which are useful for designers. They usually have these sections: The big idea Identify which is often how to use the logo. Typography Colours Photography Graphic Devices Copywriting and Tone of Voice Design layouts and grids {{ What’s fun about this document is that it often contains examples of how not to use brand. For example when twitter updated their logo in 2012, their brand guidelines had a long list of usage guidelines laying out everything you absolutely cannot do with the Twitter bird. Examples included: “make the bird be upside down” “reunite the bird with his bird family” “change the bird to a better colour” “add a grey speech bubble next to the bird that makes it appear as if the bird is talking or smoking hookah” }} Guidelines do more than mark out rules and regulations, they tell a brand’s story, focusing everyone together in the same direction. So why is this document so important? The answer is simple (click) – following them provide consistency and consistency improves the usability of any system. Many of you will be aware of my manager and Head of Digital Design, Rob Pellow from other presentations. He’s renown for his long wild beard, shaved Mohican hairstyle, relaxed dress sense and proud owner of cartoon themed tattoos. Now imagine if Rob walked into work one day clean shaven, dressed in a tuxedo and requesting a cup of tea? We might gingerly sit down next to him and ask if everything was okay. The same logic applies to brands: inconsistency will confuse and distance your customers. Not everybody has the time or resource to put together a document like this, but each organisation knows the direction and tone of their brand. We can help tease this out. 
• #11: 3. Where are you going? Before embarking on a new email template, you need to understand where this piece fits into the context of your broader marketing strategy. To be successful it’s vital to ask yourself what is the main, measurable aim we have here? Is it “to increase the numbers of people who register for our event by X number’, or ‘to increase our product sales from people who have purchased from us before by x amount.’
• #12: So after establishing why you send emails. The next question is who are your customers, because it is by knowing them that you can determine how you are going to achieve your main aims. Making personas of your customers is a really good way to do this. A persona is a summary of research about your customers what you have observed. Personas are often given imaginary attributes like names, job titles, likes and dislikes and made into charts to put up in the office. It is argued that using personas can help booth clarity, productivity and success. Where is this research about your customers? It’s everywhere. Email behaviour data is found in the reporting tools in your email platform, online behaviour and purchase behaviour can be found in your analytics platform, and self disclosed data is the result of signup and preference centre forms your customer complete. There is also your own deep knowledge of your customers from serving them one-to-one.
• #13: Personas can also include information about how they discover and use your produce or service. Map out this journey e.g. web form, newsletter, webpage purchase, order confirmation, nurture email, and back to the web for again to update details or unsubscribe. You analytics program might be able to tell you how your readers are moving through your different digital platforms and where they might be experiencing issues. Your business changes and your customers change, so these personas need to be adjusted over time. A drop off point that you might identify for example is when people view your responsive email on their mobile (which looks great) and then they move to the desktop version of your homepage which is difficult to view on their phone and the content isn’t relevant. If the experience is not seamless, trust is broken. At Adestra we have a team of people ready to guide you through this process, whether it is talking to our customer success manager, your account manager or with a senior designer before you start redesigning your email strategy it is of value to get expert advice.
• #14: 4. Email design nuts and bolts In the previous slides we looked at where you are going, which are your main aims such as getting people to make a purchase or to use your service more. Now we are going to look at email design nuts and bolts which are all the small activities that build up to achieving the main aim. We will be focusing on user interface design which is "the overall experience of a person using a product in terms of how easy or pleasing it is to use." It’s a really important component in delivering brand promise.
• #15: There are excepted norms for placement of things on a website, there are some in email too. These accepted design standards can help your readers know quickly what kind of message you are communicating. You put your logo at the top. You have an unsubscribe link in the footer. Users can scroll down through an email. Generally we stick to 600 pixels on desktop, centred and responsive when the screen width drops below 600px (for mobile). Content is arranged into a groups and put into a hierarch that is easily scanned. This is typically in order of priority with primary messages being nest the top of the email and supporting details small further down. Primary messages use larger, bolder font possibly combined with a hero image. Secondary messages are in a smaller font size. Set some rules. A restricted design is more easy to understand as a whole. So use a limited pallet, fonts, sizes and box shapes. It is this repetition tempered with difference that creates beauty. Simplify your design for desktop and do it again for mobile. Think about your link / button design. We use mice pointers for desktop, but fingers for mobile. Don’t write the words ‘click here’ tell people where they are going and give them an incentive. Also be wary of high commitment CTA buttons such as buy now. It’s likely that they will want more convincing than just your email and this is what you’re website is for. You’ll get less click throughs by using a high commitment CTA, but those clicks will be more likely to actually convert. Use a mixture of html text and images, not just images. Gmail clips emails after 20540 characters of code, or roughly 20kb of size. So make sure your email is smaller than that, including images.
• #16: 5. The steps we take when creating a design Our email editor allows for a modular approach to template design. Each module is self contained and can be stacked, rearranged and used, or not used on a campaign by campaign basis. There seems to be endless combinations but the finished arrangement will be more or less on brand, depending on the amount of customisation that has been allowed. Restrictions and consistency in email do not mean that you have to send exactly the same layout each week - we tend to work with our clients on creating a template with a large suite of options so that they can match their content to the right layout for the right audience. Good email templates are about providing a range of finely crafted tools so that you are always prepared for the job at hand.
• #17: I wanted to share with you the steps I take when creating an email design. 1. wireframe Wireframes are typically a low-fidelity, bare-bones blueprints, usually represented with grey boxes and placeholders for detailed content. Their goal is to help establish what goes where, without taking up too much time on aesthetics yet. A good wireframe explains how the content is grouped, how the information is structured, the most basic visuals involved in the UI interaction such as buttons. In our regular catch-up meetings with a client, we’ll often share wireframes as they can quickly be amended to try out new ideas. 2. Prototype experimental ideas If we have a fun idea for something that pushes the boundaries of what is possible in email or is something we’re unsure how it can be coded, we’ll produce a quick working prototype. This might be something like some cool animation, background images, animated menus or carousels. 2. Template layout design This is a main design showing desktop and mobile views. It is often made in Photoshop, but sometime created directly in HTML. This will be shared with the client to sign off the design. However it’s often shared with an email campaign mockup… 3. Email campaign mockup try to use real content taken from previous campaigns. If the template is to be used for a lot of different brands or purposes, it is often useful to show how the template can be reskinned in the editor for these different purposes. 4. We then code the template in HTML, test it working in the email editor, run it through our content and spam check to see how it displays in the main email clients and then it’s handover time.
• #18: 6. Follow the trends avoid the fads Follow the right trends, avoid the fads that are inconsistent to your brand. So how do you tell the difference? "If a design technique is popular only because “all the cool kids are doing it,” it’s a design fad".
• #19: So what do we have here? We’ll use some retro powerpoint effects here as well, just to make the point. We have: drop shadows on text. Ok this isn’t a no, no, but it does look a little like Microsoft Word Art from the 10 years ago. Web 2.0 glossy buttons. Stars, badges, stickers etc Metallic bevels Icons that don’t have meaning And particular bug bear of mine, social network icons that use retired designs.
• #20: One trend that we’ve seen on the web, that is starting to make roads on email, is web fonts. Especially Google Fonts which are free to use. This design we recently made for Canvas Club Boxing in the US uses Google Fonts throughout the design. But beware, Google Fonts are not support by all email clients and so you need to have a web safe backup in your font stack like Arial. Icons – what do you think? Are they useful or not? It is my view that icons should be used quite sparingly. If the icon needs a label explaining what they mean, then maybe they are not necessary. Icons are images which convey meaning faster than words can. The icons which we know from the physical world work well – arrows, play buttons (adopted from the 1980s cassette players). Also social icons make sense if it is logo of a brand you recognise. We have question whether it’s valuable to put a ton of social icons at the top of your email maybe they detract from your logo and they take people to an external site. Once on Facebook who knows where they’ll go next, probably not your website. We’ve started suggesting that clients only display their most social active accounts. Canvas boxing club use Instagram to promote their events and classes and so we thought it wise to put it at the top of the email. However we haven’t used the official Instagram logo which is purple, pink and yellow gradient because it really detracts from the monochrome design. Instagram is so important to canvas boxing club that they pull through screenshots from their feed into their email.
• #21: Flat design is a minimalist user interface design language. It might be argued that has become so commonplace that it is starting to look wearisome. Look at a library of email templates to purchase off the shelf and they all look like silicon valley start-ups. They look very nice, with good typography and layout, but they're not memorable. Or perhaps flat design is a trend and is a style arrived upon by numerous designers independently while developing an appropriate aesthetic for their work. There are many ways that flat design is very appropriate for HTML email. Visually appealing designs can be easily made using CSS with few images. We are very familiar with flat design from the main internet companies, Apple, Microsoft and Google who have all adopted flat design in their interface design. It may have been a reaction against a fad called skeuomorphism where a virtual object mimics its real world counterpart. The “trash can” is, perhaps, the most recognizable skeuomorphic object. Google's new design language 'material design' is based on paper and ink and the shadows and edges that we see from physical surfaces that give meaning to what we can touch. The image on the right is from a design for CFAUK which make heavy use of flat design principles.
• #22: 7. Essential graphic design and how to wow! Continuing on from design trends, I’m now going to show you some real email design projects that the Digital Design team have worked on and use them to highlight a few essential graphic design theory ideas and also how to include the element of surprise in your emails.
• #23: The Asda money logo has a strong oval shape and this is repeated throughout the design, the round button, the card graphic and the photo of the family paying at a restaurant are all rounded. To prevent the hard line at the bottom of the image suggesting that it was the end of the email, I added a dotted curved line making the circular shape appear to continue into the white space. This enables the reader to see this email as a single recognisable pattern rather than a set of individual elements.
• #24: Grand Hyatt New York asked for our help designing a housekeeping email that would be sent to new guests. They wanted a dark themed email which is usual in email because dark text on a light background is usually more legible. We were able to use their warm red and grey blocks to attract attention and to structure the email. Bright, saturated images and logos are used to attract the eye to different content. Maslows hierarchy of needs says that people’s basic needs should be met before higher level needs can be introduced. This email first welcomes the guest and introduces the staff who are able to assist them, the world of hyatt scheme tells people about rewards that matter to them, and then they can start to plan any leisure activities (there are boxes listing events and the weather forecast for the week ahead in New York City).
• #25: This K&B design for UBM’s kitchen and bathroom show needed to use angles from the K shape in the logo. However it was not possible to code such a shape in email and also enable the main content boxes to expand vertically. I was able to use horizontal diagonal lines instead. These high contrast orange and black elements create movement from side to side as your eye scans the email.
• #26: This design by Kristina Wright for Crabtree and Evelyn uses centrally aligned symmetry. Elements in a design should be aligned with other element because this creates a sense of unity and cohesion.
• #27: Future publishing’s Gamer Magazine approached us to help re-design their PC Gamer Weekend emails. Head of Digital Design, Rob Pellow designed and coded a mobile responsive modular template that resulted in an outstanding 500% increase in click-through rate. Most striking about this email is the use of background images which extend beyond the 600px confined of a standard email to give them greater impact. Red and black colouring in the logo is repeated throughout the design in buttons and images.
• #28: This design for Lloyds internal newsletter uses colour coding to combine together the elements within the image tiles. Look at the client first title with the blue gradient background, this is repeated in the photo and in the text below.
• #29: Here’s an example of flat design really working well the Armed Forces Charity SSAFA who support military families. The brand colours are used to create a pleasing structure and asymmetry. This consistency creates a visual rhythm that passes through the email. There are some clever use of diagonal shapes that appear to flow behind boxes. These have to work with dynamic content, the amount of text in a box will change on a campaign by campaign basis. When producing a design for an email, it’s important to show it to the person who will coding to check that it’s possible to achieve in HTML for email.
• #30: In this mock-up for animal charity Blue Cross, Kristina faithfully implemented their brand to achieve a coherent and meaningful design. Blue cross use the two blue colours from their logo throughout. This works well with the photos of the animals available to rehome because they are usually a warm brown colour which draws the eye whereas blue recedes. The photos used are particularly well taken. They have pets as the focus, strong eye contact and have a real emotional connection that engages people. The blue cross brand is warm, caring and compassionate nature and Kris uses elements of their design to inspire others to act in the same way. This is achieved through curves which is see in the rounded font, the rounded corners on the button and curve that vertically divides a quadrangle of text and images.
• #31: My colleague Gorka Munoz produced a series of designs for a travel company. The project was a series of re-engagement emails and to create brand awareness. He created a tiled frame with the centred text ‘SEE THE WORLD’ and the sub text ‘endless possibilities, where will you go?’ The frame contains tiles beautiful images from different destinations around the world. These are separated by a washed out background image. They don’t move but the design has a circular motion. The tiles have tap into many emotional memory prompts whether it be postage stamps or a photo album. The design poses the question have you become to narrow focused and constrained in your thinking. The email then invites people to self select a category of holiday. The colours group the sections together.
• #32: Beauty is observed when we see likeness and difference. Sending quality emails regularly establishes your reputation of providing quality. But repetition can become boring. Your emails should also surprise and delight because difference is more memorable. So be different, surprise people so they remember you. I love this animation for my favourite restaurant chain that I received in my inbox, Giraffe. Banana, blueberry and maple syrup pancakes. Yum!
• #33: Alternatively, you could use some more advanced CSS animation as Gorka did in this invitation email to our annual Christmas quiz. This has the huge advantage of being small in file size and much more fluid in its animation.
• #34: 8. Refining your design with data Finally. Let’s talk about data. With automation, email sends can be triggered based on behaviour, or based on logic — if certain conditions are met, then an email is sent. This allows email sends to be much more highly personalized, and also more relevant and timely. We call this First-Person marketing.
• #35: Serious Sport are a personalised sports clothing company. In this product recommendation email that we designed, customers receive a personalised experience which starts in the hero cricket lawn block, their name is mentioned, their club and their club’s logo is mentioned. It’s not shown in this screenshot, but the product recommended also contained the cricket club’s logo. This email achieved an outstanding average open rate of 59% and an average click to sale rate of 9%. This First-Person Marketing approach to email clearly makes sense and it is achieved by collecting the right data and forming programs that meet people’s needs. A plain text email would have been fine, but design makes it clearer to understand.
• #36: So in conclusion. Your customers rely on their gut instinct before they read a word so use design to trigger an emotional response that they’ll remember. Brand rules help you to be consistent and this improves usability. Know where you’re going and how your customers are finding you. Email design has become it’s own discipline with sensible approaches, you can use these. And First-Person Marketing is here right now.My name is Paul Dyke. My twitter name is @pauldyke. Many thanks for listening. Over to you Anca.
• #37: Planted questions? Thanks a lot for that Paul! You took us on a very informative journey starting with living up to our brand, deciding who we want to target and what we want them to do and then looking at how we achieve that with elements of design theory and email templates. It's probably given you lots to take back to your team and designers but before we say goodbye, we'll have a look at the questions to see if there's something we can help with today. Will the slides be shared? And recording? What do we do if we don't have brand guidelines? What is your advice on re-designing emails in line with a new website? I've read a lot that many email clients ignore styling. Where does beautiful email design stand? Answer: graceful degradation vs the other one. Once I’ve created an email, is the design fixed? What about user testing?