August 8, 2014

Campaign Critique 02: Ted Goas

In an effort to encourage open discussion around email design, I’m starting a new series of blog posts called Campaign Critique. Each post in the Campaign Critique series will look at an email campaign submitted by a reader. I’ll discuss what I think works with the design and where I think things could use some tinkering.

Hopefully we’ll all learn something in the process.

If you want your campaign reviewed, you can submit it here.

Spotlight on Ted Goas

This edition of Campaign Critique features a great design for SeatGeek from designer and developer Ted Goas. Let’s jump right in and take a look at this thing:

Ted Goas Design

First off, this is a fantastic email. It has most of the things I love in an email: a clean design, beautiful, readable type, an easy opt-out, nice graphics, and a musician and band that I fucking love - Robert DeLong and Interpol. Seriously, my wife is sick of me playing Global Concepts all the time.

Ted could honestly leave this template as-is and it will serve SeatGeek well for some time.

That being said, there are always improvements to be made. After dissecting this campaign a bit, a few came to mind.

Defining Goals

Before we get into the dirty stuff, I’ll let Ted explain the goals of this campaign:

The goal is to promote choice artists and events and tie them back to the website to track or purchase tickets. The project was to redesign a two-column email in a way that ads can be removed on a per-email basis. Responsive was not required for phase one, but something planned for the future.

If that goal is achieved, readers will end up on TBA, a blog focusing on music, sports, and festival news run by SeatGeek. I couldn’t find the Interpol spotlight, but here’s one on Disclosure for a bit of reference. There are a few other CTAs in there, which we will get to later.

Identity Crisis

I feel like there’s a bit of an identity crisis going on in this email. It’s being sent by SeatGeek, made evident in the footer:

SeatGeek Footer

However, the header of the email has a logo declaring, “SPOTLIGHT BY TBA”. Looking at the TBA blog, the bullhorn logo is the same, but the logomark has “TBA BY SEATGEEK”.

Logo Disparity

Furthermore, SeatGeek, despite being the actual sender, is really only present in name in two places outside of the footer: in a button towards the top and the “Interpol On” sidebar in the middle of the email.

This inconsistency left me scratching my head. Granted, I’m not a regular TBA reader, but I can imagine that many are left confused. There’s a real opportunity to bring the TBA, Spotlight, and SeatGeek branding together—both in the email and on the website.

At the very least, I would suggest using the same “TBA BY SEATGEEK” logo from the website in the email. I understand wanting to call out that it is part of the “Spotlight” series, but that could be done more effectively by adding a title to the email’s body along the lines of Spotlight: Interpol. Not only will it help solve that identity crisis, it will better reflect the landing page post.

Give ‘Em A Taste

Speaking of tying things back in with the landing page…

While I’m not positive, I get the feeling that the email contains the entirety of the Spotlight post on a band. That body copy is similar in length to the Disclosure post linked above.

I’m not a huge fan of laying it all out in an email.

While I love a good newsletter, I don’t necessarily see email as a long-form reading medium. Emails should entice a subscriber, whet their appetite and then get them to take action and jump over to your site—where you have more options to both track and engage them.

I would suggest cutting down on the copy a bit and giving readers more incentive to actually visit the website. If a subscriber is only interested in reading about their favorite band, and the entire article is in an email, they’ll just read the email. That’s great but it won’t get them on your site.

Just include the first paragraph (or some email-specific intro) and a strong call-to-action and encourage subscribers to go where you want them to be: your website.

Clarifying Calls-to-Action

Speaking of calls-to-action, there’s a lot of room for improvement here. I’m in the camp of keeping CTAs to a minimum. Subscribers have limited attention, so you want to focus that attention as precisely as you possibly can.

Just in the top half of the email, I count 14 links—all highlighted below, all competing for valuable attention:

CTAs Oh My

I understand a lot of companies urging email designers to include a ton of links, thinking that the more links, the more likely people are to press them. In my experience that usually has the opposite effect.

Shoring up some of those links would likely result in better subscriber engagement. It’s all about focusing attention where you want it. Do you really want subscribers to go check out Interpol on Spotify? Or do you want them on your blog or buying tickets via SeatGeek?

Do not be precious with your CTAs. Choose which links are the most important and kill the rest.

I’d start with the sharing links. They rarely perform at all. If you have to keep them, move them to the bottom of the email. It allows you to better showcase your actual content and subscribers are more likely to use them once they’ve digested an email and seen that it’s worth sharing.

I’d probably get rid of the nav links in the header, too. I like that they bring in some consistency with the website, but would wager they’re more of a distraction than anything else.

Chart Confusion

I don’t really see the value of the ticket price chart, to be honest. It’s a gorgeous chart but I think it lacks context. I’ve never used SeatGeek, so I don’t know if they are sell tickets themselves or act as an aggregator for reselling tickets. If it’s the latter, then that chart is really saying I’m screwed. Second-hand tickets are really expensive. They’re either sold-out or SeatGeek is charging me a premium for no good reason.

I’d remove it and move up those dates and buttons. That’s the meat of the email right there. That’s where you want that attention. Move it up, slap some color on those buttons, and send it on its way.

Sidenote: Kudos on using bulletproof buttons.

It would be interesting to see what kind of subscriber data SeatGeek has, too. If they could do some geo-targeting and dynamically populate those dates, this email would kill. Even better, they should pull in forecasted ticket prices for each show. That would take on some of the work I think that chart is attempting, but with amazing context for each show.

Dream email: They geo-target and the first show is the Spotlight artist playing in my city with ticket prices. The other shows are similar bands that I’d probably love, also playing in my city with ticket prices. Think Netflix-style concert listings, in an email. Swoon.

Let’s Talk About Type

When submitting his design, Ted mentioned that there were a few requirements for the email:

The landing website is set in Whitney and Gotham, so fonts needed to match as best as possible. The navigation links up top had to be Gotham.

TBA chose well with Whitney and Gotham. They are both stunning typefaces. But, having to match fonts in an email always poses challenges.

Fortunately, Ted is on the right track. He uses the excellent Open Sans for the majority of the copy in the email, falling back to Helvetica Neue, Helvetica, and a generic sans-serif when web font support is lacking. It’s an elegant solution and one I highly recommend.

The problem with matching fonts from websites is that a lot of times designers are forced to use images to achieve that goal. In this case, the navigation links, set in Gotham, are all images. If those links are that important (I’m skeptical) then they should really be actual text so that they are visible in clients that disable images by default.

There are two solutions here:

  1. See if Hoefler&Co. Cloud Typography plays nice with email clients. Their entire collection is available for use as web fonts. It’s possible they either a) don’t work well in email clients or b) have weird licensing restrictions, but it’s worth a shot.
  2. Just use the existing Open Sans font-stack here. It gives you live text and works the same way as the rest of the email.

Honestly, I’d recommend the second solution. While I love type, I honestly don’t think it’s something the vast majority of readers will notice at such a small scale. I’d rather go with a typeface that’s a bit off from branding guidelines if it means everyone can see it than risk a large percentage of users not seeing anything at all when images are disabled.

It would be very interesting testing out the Cloud Typography approach. I would imagine the licensing could get prohibitively expensive pretty quickly, though.

Taking Things Responsive

Ted mentioned that a responsive template wasn’t a priority for phase one, but was something planned for future versions of the template. With such a nicely designed email, Ted should have an easy go of making it responsive.

Looking at his code, it is well-structured and well-documented, making any updates easy to implement. With a design like this, it would be trivial to do some of the basic stuff like making tables and images fluid, increasing text and button size, and stacking some content. That “Interpol On” sidebar could be stacked below the body copy, as could the ad in the middle of the email. Single-column typically works best on smaller devices, so stack where you can.

It might not be a bad idea to hide some content, too. Assuming the chart is kept in, hiding it on mobile would probably be a good idea. The text is small enough and light enough that a reduced size will kill any contrast it has and make it unreadable.

I’m curious as to whether or not those Robert DeLong ads are paid to be in there. If not, I’d rip them out wholesale, regardless of my love for his music. If the spotlight is on Interpol, keep it there. Randomly interjected artists will likely confuse readers and steal some of the focus you want on Interpol.

Wrapping Up

This is an awesome email. I love the design and, obviously, I love the content.

With some more consideration, the email could be made more consistent with the blog that acts as a landing page. Likewise, reassessing which links are vital and which are secondary could serve to streamline the email and focus subscriber attention. And, with a little time and code-wrangling, the whole thing could easily be made responsive, keeping all (or most) subscribers happy—regardless of what device they’re reading on.

Ted mentioned that a redesign is imminent, so I’m really excited to see what he comes up with. He knows SeatGeek’s audience and priorities better than me, so I’m sure he’ll make the right choices and deliver something great. I just hope he shares it with us when he’s done!

Special thanks to Ted Goas and SeatGeek for sharing their design.

Want to submit an email for a Campaign Critique? Send it over.