Designing an interactive email template
Travelbound provide exciting holidays for schools and students alike. Their desire to add this excitement and sense of adventure to the email marketing lead them to the creative team at pure360.com.
Andy Parker, html - email designer at Pure360 takes us through the process of creating an email template which stays on-brand and makes email truly interactive.
Recently we were asked to come up with some design concepts for UK based educational tour operator Travelbound. At the time, their method for mailouts was to construct a message with basic word and paint skills. The results were hit and miss, and due to sending directly through Microsoft Outlook, they had no way of gauging response.
The brief was simple. The message must keep within the company branding, other than that start from scratch and show us something unique – my favourite kind!
Here is the finished design in full
As with any email, the message itself was the most important element. I started by looking at their website (www.travelbound.co.uk) to get an understanding of their overall style and layout.
From this I began structuring the main content area which uses a 3 column layout.
Each column consists of some default elements - lead image, title, text and call-to-action link, i.e click for more info.
Defining clickables
I wanted to make sure all the links popped off the page.
An arrow icon is used to highlight a clickable area. This is seen as a circular motiff on the title bars, and as a play-style button next to the text for the main links.
Next was to build up the primary, or highlighter block. I had two requirements in mind for this area.
1 - It had to stand out clearly from the other message content
2 - The title and first sentence had to be seen above the fold*
The primary content block is split into a two column layout and looks like an exploded version of one of the single column blocks. It is evenly balanced across the width of the 3 columns below which allows for far more textual reference and because of the significant difference in size, it really does stand out on the page - instantly attracting the eye.
Checking in the header
Happy with the content layout I began work on the header.
The Travelbound banner has great visual elements to it. The type-face is incredibly strong and stylish. The telephone number is provided clearly, meaning that there is immediate call-to-action functionality - it's not just a means of showing who sent the message.
Travelbound wanted to provide the same primary navigation as found on their site, so there is a ribbon effect primary navigation strip which runs under the main banner followed by a strap line.
We worked closely together with the marketing team to come up with the best possible slogan for the mailer. Finally we settled on the one shown, which is taken from one of the flash slides on their site.
Call to action
I wanted to do something totally different with the master call to action links. I knew that if I was to create a secondary navigation strip within the header they would just get lost dwarfed by the primary navigation and banner.
Instead of settling with a simple navbar, I created a series of luggage tags, which literally hang from the header itself. Addingthis physical feature really draws the eye because they are so different to what you would normally expect from an email, giving a more organic and alive personality to the newsletter.
The footer safety net
The footer area provides an information centre, with links to core subjects which Travelbound cater for. This way if the current offers aren't targetted at your particular vocation, there is a chance to see what is available in your desired field.
The final block before the unsubsriber contains both a link to the site and again the telephone number. This is the fallback position of the message. The enlarged text emphasises the need to call Travelbound for more information or head over to the website.
Summary
Travelbound are an exciting company, and their target audience ranges from school teachers to students both at college and university levels. Everyone likes a holiday, they're meant to be a fun time. I wanted the email to reflect that sentiment. Adding more creative concepts to your call to action areas is a winning formula for click through rates.
If you missed the link at the top of this article, check out the final message design.
Email Tip
*Above the fold email is a term taken from newspaper design. The fold is, as it sounds where the newspaper is folded in half when bought on the news-stands. The first thing anyone reads is the top half of the front cover. This area is known as the fold. It is acceptable that on average above the fold in an email is the first 400px.
- Login to post comments
-




