New Emails. 
New Designs.

Emails have not seen a refresh since its conception. With a new focus on drip campaigns to get users to return to the platform, we decided this would be a perfect time for a redesign.

Background

Role

Product Design Lead

Responsibilities

UI Design
Brand Design
Frontend Development

I worked closely with the VP of Product, VP of Client Success, and the content team to deliver this experience.

I was the only designer on this project, and also had to learn how to use Sendgrid to be able to implement the first drafts of the design.

This was due to the software developers being too occupied with other projects to be able to contribute.

These emails would be ultimately sent to the clients’ end users.

Where to begin?

My manager gave me 3 use cases to start off with. He said if we could cover these basic ones, we’ll be good and can just adjust ones for future needs:

- Basic Text Emails
- Feature Overviews
- Highlighting a User/Speaker

I wanted to get a feel for what our current designs looked like to see if I needed to do a major overhaul, or just fine tuning.

Immediately off the bat, I knew that I would be starting from scratch, as these designs were very outdated. On top of that, we were also sending emails like this below.

After an audit, it was time to get to work.

Competitive
Analysis

I was starting with absolutely no knowledge on this subject. For research, I wanted to look at our competitors, but most did not have a well designed email system. Instead, I took a look at how different industries approached theirs.

From emails like these, I learned a few simple but important things:

These became some of my guiding principles when I approached this project.

Client Branding

One of the first hurdles that was thrown at me was client branding. In the current ecosystem, the only thing that was represented was their logo, and sometimes the color.

Not only that, but there were complaints about the colors chosen for the emails. Sometimes (actually most of the time), it would clash with their colors.

Rather than have that headache this time around, I was told not to do anything with colors; however, I really wanted to see if it was possible.



I looked into the platform to see if there was any way I could incorporate a client branding. I knew it had to be simple, but subtle.

During this time, we were also implementing new redesigns, including our new home page. I noticed that there was an opportunity to use some of these components on the emails.

With these components in mind, I just started ideating on what these emails could look like.

Breaking the System

Once I got the general gist, I wanted to try and match our platform as much as possible. This meant using our current illustration library.

The examples above are okay, but this illustration library was starting to show its age. As much as I wanted to keep the platform and email system in sync, it felt cheap especially when compared to what I had just researched.

Testing New
Illustrations

I went to my manager and found that he agreed that it was time for a new illustration library, and that this would be a perfect start for it.

He gave me two constraints: it just had to be diverse, and be flexible enough to cover a wide range of topics. And with that, I started looking and experimenting.

Flatline was one of the personal favorites, but unfortunately, all the characters were drawn with the same ethnicity. It was not diverse enough, so it was canned.

Bro Library

Pros:

Cons:

UX Colors Library

Pros:

Cons:

Abstract Library

Pros:

Cons:

Pablita Library

Pros:

Cons:

Flatline Library

Pros:

Cons:

Welcome to Brooklyn

I eventually found myself with the Brooklyn library. The illustrations matched our two most important requirements:

A concern was brought up while showing these illustration sets: we should not have colors. Some stakeholders thought that it may conflict with a client’s branding.

I argued that it would not be the case, but I lost that battle, so we went ahead and took out the colors.

However, I noticed that having the picture by itself made the email feel like something was missing. I realized I had those backgrounds as a way to break between the header content and the body.

Making it Work

I looked back at our platform to see if I can get inspired, and looking back at the home page, I found the solution.

The colored shadows that we place behind photos were the perfect answer. It’s simple, and adds to the client’s branding.

Just to double check, I pulled in a developer to see if it was possible to connect brand colors to the background in the Sendgrid environment.

Luckily, it was.

The New Emails

With everything set in stone, I finalized the designs. Some of them were simple enough for me to implement it within Sendgrid using HTML/CSS. Others were more complex, so I had to just leave them as designs for now.

Implementation

Nearly 6 months would pass by, and there was lot of changes in the company. The email redesigns were unfortunately put in the back-burner during this time.

That is, until I was the lead for the design team.

We went full steam ahead with implementing what I had designed in the past. The CTO assigned a dev to work with me in connecting necessary data points on the emails, and implementing the more complex designs.

We created phases where we would take out the emails from the old system and have them implemented. We aimed to be on Sendgrid fully within 2 months, and to completely leave behind our old system.

Reflection

After phase 1 was implemented, we heard a loud rejoice from our clients. There was a decent amount of partners that had actually disabled emails altogether because of how bad they looked.

With our new redesigns, our client team reached out back to those clients and most of them activated it.

In overcoming the daunting task of email design, something I wasn’t confident in, I realized that I could take any project to completion, given the right amount of time and resources.

One last thing, the work I did on this project was used as a basis for a whole revamp of the visual design of the product itself.

You can read more about that on this project:
Dashboard Overhaul.