UserOnboard EXPOSED!

Update 002: Inside an Email Redesign

If I had to pick ONE area that most companies under-leverage in their onboarding experience, it would easily be lifecycle emails.

I've been on the record about this for years, so I knew that the overall strategy would involve a lot of experimenting with emails when I decided to improve UserOnboard's own user onboarding.

Since a lot of those experiments would involve pushing my beloved MailChimp subscription past its functional limits, I switched (with a heavy heart) to sending my own custom-coded emails via SendGrid, instead.

Hand-crafting the emails I send also meant I had an opportunity to rethink the presentation of the emails themselves, and it occurred to me that there aren't a lot of guides out there on that particular aspect of product design.

If you're considering revamping your own company's emails, you just may find the following story helpful. And even if you AREN'T currently revamping your emails, you might pick up a few effective ideas anyway!

Let's start at the beginning, shall we?

Starting at the Beginning

Since the very first email UserOnboard ever sent, its emails have been pretty bland-looking:

Screen Shot 2018-08-09 at 1.57.49 AM.png

I chose the "Plain Text" template when I first set up my MailChimp account all the way back in 2013, and I made approximately zero changes to its layout in the intervening half-decade.

The layout stayed basically the same because the role it was serving stayed basically the same: to send one-size-fits-all, list-wide announcements whenever something new came out.

The defaults included in the "Plain Text" template were fine enough for that purpose, but if I was stripping everything down to the foundation and starting all over again anyway, I figured I should REALLY hit the reset button and start with a literal blank page:

Screen Shot 2018-08-09 at 1.59.05 AM.png

This total reset was equal parts a relief and a stress unto itself. I was kind of like the kid at the end of the Neverending Story with the universe inside the grain of sand -- what should I fill it with? Where should I start?

Taking My Own Dang Advice

I decided to take my own advice to "start your designing where your users start their using." In this particular case, that started with outlining the core UX of what it's like to "receive an email" to begin with.

It's impossible to know what someone might be doing before they receive an email, but in thinking about my own inbox experiences, I realized that the vast majority of the "modes" that I was in when I was "doing emails" fell into two general buckets:

  1. "I just got an alert about a new email and I want to see what it is" mode


  2. "I'm sifting through my inbox, conducting email triage" mode

Those are pretty different modes to be in, but they both lead the user to the same fork in the road: "should I stop what I'm currently doing to read this?"

If I want to increase the odds that people respond to that question with a "yes", then I need to leverage all the design elements that are available to me. When it comes to an "inbox view" like the ever-popular Gmail's... that ain't a lot:

Screen Shot 2018-08-09 at 2.02.36 AM.png

All in all, we have a whopping FOUR design elements (at most) to work with, so we really need to get each of them pulling in the same direction:

  • Sender name
    This might not seem like something worth "designing", but it is! If we want people to consider opening our emails, we need them to quickly recognize the relationship we have. In my case, "UserOnboard" would work, though it's pretty impersonal. "Samuel Hulick" wouldn't be telling the whole story either, though, so I went with "Samuel from UserOnboard".
  • Avatar
    Not all email clients will show an avatar, but setting up a Gravatar only takes seconds and will (I believe) cover you here. I could have used a photo of myself, but instead chose the UserOnboard logo (I like my face and all, but I believe the logo is more recognizable).
  • Subject line
    Like Christopher Wallace, this one's a biggie. In fact, you could make a case that the subject line is THE biggest design element to consider for every email you send! I have found that very brief phrases (2-3 words) that inspire curiosity (which is satisfied by clicking through) generally work best.
  • Snippet
    Some savvy email-senders will "design" the snippet by starting their email body with hidden copy (which doesn't get hidden in the snippet preview), but this tactic feels a bit deceptive to me. Instead, I just try to kick off the message with as strong of a "regular" opening line as possible.

With those four key elements locked in, we've done everything we can to help people decide to click through and read the email itself.

But what will be waiting for them when they arrive?

A Body Made for Moving

Now that the recipient has shifted from "deciding whether to open it or not" mode into "ok, I will give it a chance" mode (hooray!), we want to give them as much of a return on their time investment as possible.

While many companies love to trick out their emails with three-column layouts and responsive masthead graphics, I don't go for that at all. I'm not creating emails to be admired on a gallery wall; I'm creating emails that encourage people to do something.

When it comes to motivational content, give me "clear and concise" over "impressively ornate" every. day. of. the. week.

Previously, we wanted the four "design elements" to pull in the same direction when it came to helping the recipient decide whether to open the email or not. Now, we want everything in the body to help them decide whether to click the call-to-action or not. If it doesn't help with that, it needs to be cut.

To kick things off, let's fill our "blank page" with the main copy from the last big announcement that UserOnboard sent out:

Screen Shot 2018-08-09 at 2.42.53 AM.png

If I may toot my own horn a bit, I can definitely imagine worse places to start from!

The copy in UserOnboard emails has always been intended to have much less of a "business conveying information" vibe and much more of a "someone writing a friend" one, and I think that holds up in the example above, even without any kind of formatting in place.

Just like last time, let's do a quick dive into each component:

Screen Shot 2018-08-09 at 2.10.33 AM.png

  • Intro
    I like to keep things quick and concise here -- just enough to get people motivated to engage, but no more than that. Some sophisticated marketers can get a LOT of out long-form email copy, but that always feels like too risky of a tactic to me. I prefer to use emails as a bridge to the "main attraction", not as an attraction unto themselves.
  • Call-to-Action
    Speaking of the main attraction, this is the way to get there! I like my links big, bold, and hella obvious. And the same goes for the copy inside those links. Many companies mix multiple CTAs into paragraphs of body copy, but I always like to have ONE clear call-to-action per message to save the reader from having to work to figure out what they're even supposed to do.
  • Signature
    This can be helpful in reminding the reader of our relationship (in the unlikely event that they opened the email without seeing who it was from), but is otherwise just a polite way to end a message. That might seem frivolous, but small touches can really make something feel more personable, and that's a feeling I'd like to see more of in the world.
  • Postscript
    I started adding a "p.s." at the bottom of UserOnboard's announcement years ago, and am consistently surprised at how many people read and respond to them. It's also a great place to sneak in a secondary call-to-action if I need to include one, so I'm keeping it in my new email template until further notice.

With these in place, let's apply some styles!

Making It "Pretty"

In keeping with the "personal email from a friend" vibe, I thought it would be interesting to see how far I could get just by using the built-in formatting features in Gmail:

Screen Shot 2018-08-09 at 2.13.02 AM.png

Perhaps I'm just easy to please, but all it took to make me happy was making the call-to-action bigger and the postscript smaller. It definitely didn't feel "polished", but for me "polished" wasn't a design goal unto itself (in this case, anyway).

Even as sparsely-"designed" as the Gmail mockup was, it still made the call-to-action very clear, and all the other elements felt cohesive enough in supporting it. And, since it literally only used Gmail's WYSIWYG formatter, it still very much passed the "does this feel like it was sent by a real person?" test.

In fact, the biggest thing that kept me from adopting this as UserOnboard's "real" email template was that it felt TOO much like it was sent by hand from a real person. As much as I want to maintain "friend-like vibes", I don't want people to have to wonder if an email from me is genuine or not (or, even worse, wonder if I was intentionally trying to trick them).

With this in mind, I added two additional elements when I coded this up as a real-deal HTML email. The first addition was a "header" (of sorts) at the very top:

Screen Shot 2018-08-09 at 2.36.58 AM.png

This was initially supposed to house the UserOnboard logo/branding, but there are already a ton of other identifying characteristics throughout the rest of the email, and I also didn't think the logo was pulling enough weight in the "everything supports the CTA getting clicked" department.

I liked the headline-and-blue-border combination, though, so I decided to keep that for the time being. My first impulse was to repeat the subject line as the header copy, and I'm curious to see if that's effective. It's an unusual design decision, but if I'm putting time into coming up with quality subject lines anyway, I might as well get my money's worth from them.  :)

The other addition was a footer:

Screen Shot 2018-08-09 at 2.37.07 AM.png

Unlike the header, this content was very much non-negotiable. CAN-SPAM compliance is serious business, and I am definitely not one to shoot myself in the foot with shoddy delivery rates due to cutting corners and falling into spam traps. I personally think it's dumb that every promotional message is required to include a physical address, but rules are rules and I'm complying with that one.

The "unsubscribe" link is also required by law, but that rule is one that I *do* believe in -- and heartily so. I have worked super hard to earn every subscription that this email list has and it's definitely a bummer whenever someone leaves, but there is absolutely nothing to be gained by making it a chore to unsubscribe. If someone feels like it's time to move on, I'd at least like to offer one last "good UX" in helping them do so without having to muck around.

And that... was... pretty much it!

Putting It into Practice

I tidied a couple parts up (and gave the links the "UserOnboard blue" color), but beyond that, I'm happy with the spartan simplicity of the presentation.

Screen Shot 2018-08-09 at 2.15.39 AM.png

The words really stand out, which will hopefully mean that the message really stands out (which will hopefully lead to more people doing more things they care about).

If nothing else, I have a clean foundation on which to conduct experiments, and code maintenance should also be a relative breeze. HTML emails are notoriously difficult to develop by hand, but the "code base" for this is almost amusingly straightforward (if you'd like to see it, let me know in the comments!).

Beyond that, there's not much to report on, other than what I *didn't* do:

  • I don't have a layout grid that I have to worry about breaking on mobile widths
  • I don't have graphics containing crucial information that show up as empty outlines if images are disabled
  • I don't have a pu pu platter of social media icons, privacy policy links, app store buttons, or exhortations to "please add us to your address book"

I just have words on a screen, similar to the ones you're reading now.

And every single one of them has been considered with you in mind.

I'm excited to see where they take us both in the future!