Advertisement
  1. Web Design
  2. Case Study
Webdesign

How We Did It: Designing the New Tuts+ Emails

by
Length:MediumLanguages:
This post is part of a series called How We Made Our Shiny New Envato Tuts+ Emails.
How We Did It: Building the New Tuts+ Email Templates

We recently redesigned all the emails we send out at Envato Tuts+; the newsletters, the various digests, the marketing campaign emails, and the admin emails. In this short case study series we’ll explain how we did it!

Why?

Up until the redesign, we had a fairly disjointed collection of emails with no central team looking after them. It became clear we could simplify things and make things more economical, so we decided to move our efforts over to a central account in Campaign Monitor. A central set of themes would be used across the board and we’d make sure they were designed and built in a way which represented what we stand for at Envato Tuts+.

Audit

The first stage of the operation was to collate all the various emails we were currently sending out to the masses. This meant poring through our existing MailChimp newsletters and dismantling what we had in Exact Target.

Once we knew what we were looking at, we could pick out common elements and categorize everything ready for the design stage.

We boiled it all down to:

Admin

  • new account
  • email signup confirmation
  • lost password etc.

Marketing

  • various promos

News

  • monthly digest
  • weekly digest
  • translator newsletter
  • contributor newsletter

Needs

What were our priorities for this redesign? In bullet form, we needed:

  • A responsive design
  • Branding and typography to tie in with Tuts+
  • Something representative of Envato as a whole
  • Clear calls to action where needed

And we wanted:

  • Clear, readable typography
  • Timelessness; a style which wouldn’t quickly show its age
  • Differentiation between the various types of email

Sketch

Time to get some visuals down! I used Sketch for this design process, because of its suitability for UI design. The first stage was to put an artboard together and work out some grid dimensions.

I used Sketch’s layout options (View > Canvas > Layout Settings..) to set out a grid of 640px, with 8 columns. My artboard was much wider than that, to give me breathing room. By clicking on Center the offset is automatically calculated, in this case to 280px. The grid was therefore positioned 280px in from the edge of the artboard.

A column width of 62px tied in well with gutters of 20px, giving me a sound horizontal starting point.

I wanted rows too, so checked the Rows box. My type would work from a base of 16px, so I used that as a rudimentary vertical grid.

artboard named Digest
Artboard named “Digest”

Layout

The marketing team at HQ had asked that we make provisions for some kind of hero section; something which would allow them to use striking graphics if ever they needed to.

I didn’t want that to be standard across all the types of email, but it gave me a good starting point. Using blocks, I set about making a basic layout.

With a hero, a main content area, and an off-white canvas, the stage was set. I decided to play with layers and make the content area overlap the hero slightly. I was aware this might cause Nicole (who’d be building the whole thing) a few headaches, but I knew she’d figure it out–she is a wizard after all.

Variants of this arrangement could come in the form of:

  • Block color hero (the dark ones at the top)
  • Image splash hero (the orange ones for example)
  • Transparent hero (bottom left)
  • Absence of hero altogether (bottom right)

Mobile

One advantage of a simple layout is that responsiveness is inherently simpler to achieve. Squished to a narrower viewport, we’d collapse the dual column where necessary, and butt the content area up against the viewport edge, giving us a series of sections and no overlapping.

In Sketch, where two different column arrangements are needed, we need a second page. Any grid layout we define is applied to all artboards on the same page, and we need a much simpler grid for our squished-up mobile view.

What we need here is so simple, in fact, that we really only need a single central column, with a gutter (we’ll stick to 20px either side). Sketch can’t create a grid of just one column though, so we’ll have to use two.

Typography

We use Roboto these days across much of Envato, so that decision was made for me. Colors are largely dictated by Envato’s styles too, so I had a palette to choose from. I had to decide which would be used for the body, the headings, the links, any text with less emphasis, and the “calls to action”.

My priorities were that:

  • Text should be readable, hence my choosing an easy 16px for body copy, with 24px (1.5) line-height.
  • Headings would be heavier, but not much larger, and use the same color to suggest a relationship between them.
  • Links would be underlined (it’s a bit of an obsessive tick of mine, but I don’t see why links shouldn’t be).
  • List items would use bullets
  • Nowhere would text be forced into cramped spaces!
  • Links and “calls to action” would use the same blue color wherever possible, helping the reader focus on all actionable items.
cta
Links and CTAs in the same blue

In terms of Sketch making things easier here, text styles are just one click away. Style a piece of text as you want it, save this as a text style, then refer back to it if ever you need that style again.

Digests

Envato Tuts+ is a pretty visual platform; we use thumbnails all over the place. Some feedback from the team suggested that the same card arrangement we use on our homepage would be the best way to present tutorials in a digest email. Readers would make the connection, understand what they’re dealing with, and in any case it’s a clear way of presenting the information.

Courses are slightly different; I wanted to give those extra emphasis. Each topic section would first show an available course, full width, with a little more detail than tutorials, plus a play button graphic superimposed on the thumbnail. This would highlight the distinction between courses and tutorials whilst stimulating readers to click (play buttons are good for that).

Having the play button dynamically placed over the top would be awkward, so we resigned to manually placing the button graphic onto the thumbnails themselves (with Photoshop, for example). A bit of extra work (sorry Cameron) but worth the effort I think.

Ad Blocks

We also wanted a way to present ad blocks; not necessarily ads from third parties, but something to give us the opportunity to shout about new and exciting things. I added an optional banner to the top of the layout–very similar to what you’ll see on the website occasionally. 

I then decided to split all content up into blocks, allowing us to arrange them in any order we choose, and also making a clear distinction between sections.

Here’s what an ad block looks like, with two digest sections either side.

this is a real ad
Note: this is a real ad, find out more here

Footer

The footer is a universal element across all these emails. I didn’t want tons of information buried there, but what we did choose to place there I wanted clear (I don’t understand why some companies make their footers barely visible, with “unsubscribe” links hidden away). 

So, with some social links, a text area to explain why someone might be receiving the email, unsubscribe links, and the Envato HQ address, we were all set.

Newsletters

We now have the basis for all the elements we need, giving us the building blocks for each of our email types.

Newsletters are unlikely ever to need a graphic hero of any kind, so I used a simple but bold heading to start the proceedings there. The typographic styles we’d already set would cater for most of the possible content.

A distinction between newsletters and digests was made by giving newsletters a transparent hero, making it altogether more.. broadsheet.

Admin Emails

The simplest of all our emails (besides plain text versions) are the admin messages. In their case absolutely no extra styling is needed; just get the point across, quickly and simply. A transparent hero and a lack of large heading sets the admin tone quite nicely here. Everything else remains the same including, possibly, a CTA button. Here are the desktop and mobile views:

Delivery

With the concepts and designs settled upon, it was time to ship the results to Nicole. She’d be taking these ideas and making static HTML files from them. I needed to make sure she understood the decisions which had been taken, and had all the assets needed to build the emails.

InVision allows for very quick annotation on graphics documents–and you can upload Sketch files directly. A collection of visuals with comments and pointers was a good way to communicate all the ideas.

In terms of asset delivery, Sketch makes exporting all the necessary bits and pieces very easy. Not only could I prepare all the assets (such as logos, social buttons etc.) but I could deliver them at different sizes too, covering us for screens of varying pixel densities. Learn more about how Sketch can export your assets:

With all the files, plus some more instructions in Dropbox, Nicole had everything she needed to work her magic.

Coming up..

In the next part of this case study I’ll hand you over to Nicole for the build. She’ll be explaining how she built the responsive foundation for these emails, and overcame the usual issues email development throws up.

Feel free to grab the demo Sketch file from the repo on GitHub, and see the finished emails yourself: subscribe below!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.