Email Redesign

Having a background in email from Kohl’s and EPIC Creative, the team asked me to join their ongoing discussion about how to improve our email process and look more modern. We examined what was working with the current system via analytics, and decided to do a total overhaul of the design and codebase as a result.

Mocked up in Sketch, coded in HTML/CSS, tested with EmailOnAcid.

Modernizing & Componentizing

One of the biggest problems with the old system was the amount of duplicate work it entailed. There were a lot of reusable designs/styles that, if remade in a modular way, would make things go smoothly. So, we nailed down the necessary components, and got to work.

1. Sketching Our Options

Our email partners did a great job of compiling references inside and outside our field, to show the direction they wanted to go. We looked at similarities between them, compared it to what assets we have to work with, and started sketching out options.

This part of the process was fluid, fast, and collaborative, taking place over a handful of meetings and review sessions where we hammered out issues in the same room when possible. 

2. Mid-Fidelity Mockups

After settling on a few different visual directions, I got to work in Sketch mocking up three different versions of the same components. 

The biggest differences between them were in the way we approached styling them: did we stick close to the current site, push it a little beyond our current site’s designs, or ignore it and go big for the most impactful and future facing email design. We landed somewhere in the middle, but leaning towards the future.

3. Creating The Code

With the easy part out of the way, now came the “fun” part (I’m talking about you Outlook). Luckily I’ve had a few years experience making emails that work across clients, leaning heavily on my 90’s experience with table based web-design, early 00’s fluid design practices, and plenty of MSO exceptions.

As we started sending around tests of the best case scenario, the internal feedback was largely positive, but kept pushing us to take it a step further in terms of “wow” factor. To do this, we worked closely with the Marketing Communications team to better capture photos for digital and print needs.

4. Testing The Newness

As we started sending actual emails, we found some great ways to optimize the code for the use-cases we actual found ourself in; some things needed buttons that we didn’t account for, others needed content middle valigned instead of absolutely aligned to the top of their sections.

All of these were minor template changes that have been quickly made, tested, and integrated, ensuring that everyone is using the best version of the code/design possible when they pull it down and get to work. 

5. What's Next?

It’s too early to totally quantify its success with customers, but the numbers look positive and internal reception has been super positive. Is it perfect? Probably not. But it’s much easier for anyone with basic HTML-knowledge to download and use without a designer or front-end developer needing to step in and hold their hand. That’s meant non-content emails also stay on-brand and can be sent much faster. So that part of it is a huge success.

As for the future, we’ll keep adding to the default components; we’ve already added a webinar invitation and alternate banner style since launch. And as we make it a habit to do A/B testing on everything from subject lines to content/layout, we’ll have a much better idea of what resonates with which audience moving forward. 

Join the Infrequent Newsletter!

Instead of making yet another Substack newsletter, just sign up for an old-fashioned email blast whenever I remember to write it.