Unifying the UX with Emails

Consider this: Dinner time is fast approaching. Your pantry is bare. You need to go to the store to buy the ingredients for dinner. How would you define your journey to purchasing those ingredients?

Where does it start? Once you enter the grocery store? Maybe, but you had to get there somehow. Did you drive, walk, take public transit? How long did it take you?

Ok so you drove there but why did you choose this store? Was it location, price, store-loyalty? Or maybe this store is right next to your favorite cafe so that you can sip a chai latte while you shop?

Now you’re in the store. You check your list: tomatoes, eggs, scallions, avocado, mushrooms, chicken broth. And a chocolate bar (we’re not judging).

The produce section is at the front of the store so you start there. You grab everything on the list but the chicken broth – and the chocolate bar!

Where is the chicken broth? You start to wander.

You pass by the toilet paper. Now you begin to wonder if you needed more or not (an important consideration no doubt). Maybe you decide to text your spouse or roommate to see if they can check.

….

The truth is there are many factors that affect our experience with a store, service, or product. Your experience shopping for groceries didn’t just involve what happened inside the store, there were many steps before you even stepped foot inside. (Bonus points if you can identify a step we forgot before you walked in the store – hint: remember you drove there).

Similarly in a digital landscape, a customer’s journey doesn’t begin and end with the login/logout screen. We have to consider the parts of the experience beyond the physical interface of the product. How did they access your product? Why did they need to? What was their environment?


We could use that example to realize many overlooked details of a customer’s journey. However, one of the most commonly overlooked areas is the emails you send (or don’t send).

Last month, Dan reminded us to not forget the emails:

While important, many products I’ve used seem to consider emails an afterthought. A quick to-do item or a loose end to wrap up before launching. If you think that way, you’re not considering the whole flow.
– Dan Hauk

Email is a perfect example of UX outside the confines of the site or app itself. It is part of the experience your customer has with your product just like any other part of the UI.

Integrating emails into the UX

Email is a unique opportunity to encourage customers to re-engage, reaching them while they’re not actively using your product. When you consider email a part of the user experience of your product you’ll find that it gives you an additional tool for solving design problems.

I had the privilege last year of working on a new product, get.blog. Our goal was to create the simplest, most enjoyable experience possible for purchasing and owning a domain. We used this as an opportunity to experiment with different ways to create the best user experience possible for domains. We used email in a couple ways to help us solve UX challenges:

Reducing friction of logging in

We wanted to simplify the experience of accessing your account. Many people who own domains only need to use their account once a year or less. This makes it very easy to forget your account information. To solve this we decided to create a password-less account experience that used email to grant you access to your account. Enter your email address, click the link in the email and you’re instantly logged in.

gdb-login-email

The copy in this email flows right from the previous page within get.blog, creating that continuous experience.

Ask for feedback

To help us gauge the success of the product and track it over time, we decided to ask customers to take a short survey which included an NPS score question. We could have asked within the interface itself but we didn’t want to distract from the experience.

Instead we decided to include the survey in the Welcome email that was sent a few hours after sign-up.

gdb-welcome-email

We included the first (and most important question we wanted answered) inside the email itself. Once you answered the first question your were brought to the full survey to complete the remaining 3 questions.

Improving your emails improves your UX

Prior to my work on get.blog, I started an effort to update some of the emails we send on WordPress.com. Our emails had fallen out of sync with the rest the WordPress.com experience. We had completely redesigned the WordPress.com interface and user experience but as cited above we had overlooked the emails.

As I considered the redesign, my aim was not to simply rebrand the existing emails. I approached them just as I would any other part of the WordPress.com UX.

Mobile first, always

In case you missed it, over 50% of emails in the world are opened on a mobile device. Not that it took a majority for mobile to matter but you simply can’t ignore mobile anymore. In fact you should prioritize it.

I designed the new emails starting with mobile-sized screens. As I scaled up to larger screens I made adjustments including layout, content length, and font-size (based on the imperfect assumption that reading distance increases on larger screens).

Screen Shot 2017-07-31 at 10.52.06 PM.png

Styleguides & templates

To help encourage the necessity to always consider email, I broke down the designs I had created into a styleguide. After all, we had a styleguide for the rest of the WordPress.com UI. I found that by creating a formal design document for email, it helped to cement the idea of equal consideration for emails in our future work.

style-guide-i1-2.png

To overcome another common hurdle with emails – the difficult development experience – I created templates to be reused for future emails. This helped ease the burden of building emails for those less familiar with the many quirks of HTML email.


Email, like many other parts of the customer journey, deserves equal consideration in the UX of your product. Keep it top of mind and you might just discover ways email can enhance the UX of your product.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s