Email Templates | Primary
Designed and built Shopify email templates.
02/2021 - 03/2021
1 Product Designer (me)
Email Marketing Director
(Jennifer S. Lin)
Email design
Template building
Email testing
Figma
Liquid & CSS
Litmus
Background
As part of Primary's Shopify migration project, we wanted to refresh our transactional email design and build the email templates for our new Shopify store. I was assigned to take on the challenge and walk into this unexplored land.
Shopify stores come with a variety of built-in email notification templates. These notifications are triggered by events, like a new order being placed, an order being shipped, a password reset request being submitted, etc. Store owners can use Liquid and CSS to customize the look and feel of these email templates.
Goals and priorities
I checked with our email marketing director who listed 9 emails that were projected to have high volumes compared to the rest. These emails include Order confirmation, Gift card created, Shipping confirmation, Order delivered, etc. We wanted these first-tier email templates to look well-crafted, on-brand, and evoke desired emotions when customers open them up. For the rest 20+ templates, we planned to just update colors, fonts, and UI elements to make the templates look on-brand.
Design
Building the foundation
When I was checking the previous transactional email designs, I noticed there wasn't a style guide. The font size and line height of body text occasionally varied from one template to another, and no pattern in spacings could be observed. Considering the relatively large amount of email templates we were going to design and build, I decided to create a style guide for the emails as the first step.
I started experimenting with type hierarchies, spacings, buttons, and link styles. First, I grabbed copies from our old email templates and replaced the Shopify default templates with our content. Then I played with font styles, font sizes, line heights, text alignments, and so on with three email templates: Order confirmation, Gift card confirmation, and Shipping confirmation. These three emails vary in length and complexity, and they cover all the UI styles we might use in transactional emails.
After trying different combinations of header/body style pairs on these three templates, I landed on a short but versatile style guide for our transactional email templates.
To make sure it works on different screen sizes, I tested it on mobile size frames. Then I made a few adjustments to header font sizes to make them look not oversized on smaller screens.
Adding colors
Then it's time to bring in colors and characters to these templates. Bold and vivid colors and letter-like illustrations have been essential parts of Primary’s visual identities. You can see them across platforms and forms: clothing, packaging, mailers, websites, social media, and of course emails. In marketing emails, we usually take a bolder approach to the use of colors, where space not taken by photos would be filled with a brand color as the background. And texts are usually large and prominent. But for transactional emails, we wanted to use colors more carefully. There are places you don’t want to use non-neural colors as background, like the order summary in the Order confirmation email. And you want to balance out background color, characters, and texts so that the decorative elements serve the content instead of competing with it.
I did 4 rounds of design passes for the tier-1 emails, starting from trying different levels of decorations, to a version where more colors are used as background in the head and footer, then rolled back a bit and limited the number of colors used in each template.
After I landed on iteration 4, the team felt the look and feel of the templates have reached our expectations. So I shared the designs with our email director for her feedback. I also sent a Figma link to our content team to get their eyes on the voices and tones of the copies.
Toning
A piece of feedback I received from our email director surprised me: the designs didn't look as well in the dark mode. The main issue lied in the use of non-white background colors. Some email clients automatically darken light background colors for dark mode users and the final outcome is usually out of our control. This "feature" of the email clients not only made it difficult for us to achieve a desired look with non-white background colors, but also made texts that stay on top of illustrations hard to read. Another issue was that the black logo with transparent background became almost invisible in the dark mode. Besides, the red color used for discount prices did not pass color contrast test in some email clients.
We didn’t know the exact percentage of users who use dark mode when reading emails, but according to Litmus, 36% percent of iPhone users use dark mode on their phones, and a growing number of email clients are offering a dark theme for those who prefer a dark interface. We would definitely want to solve the issues mentioned above to provide a satisfying experience for dark mode users. So, we decided to take out the colorful backgrounds in the templates and used white backgrounds instead. For the logo, we decided to do two things: we will use a white logo for email clients that support dark mode media query; for those that don’t support dark mode customization, we will put the black logo on a white background so that the logo is always visible to customers.
Build
Mirroring: From Figma to CSS
As mentioned, I created a style guide before I started designing the email templates. Similarly, the first step I took when building the templates was to translate the visual style guide in Figma to CSS. This was useful because Shopify would inline any style tags in the template, which means you can define your styles in a stylesheet in the <head> of a template, then use the custom classes in the <body> as needed.
After the translation was completed, I tested the classes with the Order Confirmation email template. In this process, I also added some utility classes to the library to make it more comprehensive.
Building for real life
There were some discrepancies between Shopify’s default order confirmation email template and the email we want to deliver to customers in terms of the information shown in the receipt. To name a few:
- We wanted to hide the third variant metafield in the template.
- We wanted to show gift card recipient information and gift card message in the email if the order contains gift cards.
- If customer added a gift note with their order, we wanted to show that message in the email.
- We also noticed the order summary has a different structure from the receipt shown on the order status page in some scenarios. We would like to update the code to make sure there is a nice consistency in order summary from checkout pages to confirmation email.
Luckily, most of the hiding/showing jobs have been done elsewhere across the site, so I just needed to find examples of how engineers have done it and tweak the code to make it work on the email template.
To test the output of the confirmation email, I created several dummy orders that covered all the possible order types:
- Order content: Just physical products / Just gift cards / Physical products and gift cards / Special products (e.g. masks)
- Price: Full price / Sale price / Bundle price / Discount code
- Order notes: Gift message
- Payment method: Credit card / Gift card credit / Credit card and gift card credit
- Refund
This process was quite time-consuming but it was really fulfilling when everything was finally working nicely.
Cross-client testing
Another huge challenge was to get the email to look nice in different email clients and color themes. Till this point, I had only viewed the confirmation email in the Gmail web app on Mac. I thought it wouldn't look too far in other email clients, but I was so wrong.
I learned from our email director that among our customers, Apple mail on iPhone was the most popular email client, followed by Gmail web and Gmail app on android and iOS. When doing email testing, it is important we make sure our emails look good in these major clients, and it’s also a good idea to test the less used clients for the best experience (e.g. Outlook, Apple Mail on iPad, and Yahoo mail).
I used Litmus to run testing for the templates. The testing process was simple, as all I needed to do was to send a test email to our Litmus account to check the auto-generated preview for each client. Then I would fix the issues, test again, and repeat until an ideal result is achived.
The process required a lot of patience and sometimes things would get tricky. Sometimes fixing one bug would introduce a new one, and some clients were really difficult to work with because they didn't support certain properties and there were no easy workarounds. It is a good thing to remember that sometimes it’s impossible to 100% achieve your goal in the email world. Be practical and make sure your template works and looks good in 95% of your targeted clients, and make sure things work properly and look acceptable for the rest 5%.
Dark mode
Since Apple brought dark mode to Apple Mail on desktop in 2018, more and more email clients have joined the dark mode party.
Dark Mode is a reversed color scheme that utilizes light-colored typography, UI elements, and iconography on dark backgrounds. Many users prefer Dark Mode because:
- It’s easier on the eyes, especially in low-light situations.
- It reduces screen brightness and saves battery life.
- Some people may simply have a preference for darker interfaces.
We didn't have a reliable source of data to tell how many of our customers were using dark mode on their devices. But most popular email clients nowadays support dark mode, so we wanted to make our emails look nice in dark mode as well.
In general, there are two methods you can use to customize your template for dark mode:
Media query @media (prefers-color-scheme: dark)
It is used to detect whether the user prefers a light or dark theme and display the right design in response to your chosen color mode. It has nice support on the latest iOS and macOS device and you can see more support data on caniemail.
Conditional CSS and [data-ogsc]
They are used for creating styles that target Outlook apps. The basic idea is to use conditional CSS to target the Outlook apps and use the [data-ogsc] selector to control styles like color, background color of selected elements. I’m not going into details since there are already plenty of good examples you can find on Google.
What I learned
Email design is a lot different from website design because there are more limitations in email implementation and that requires you to take all of those limitations into consideration when designing an email. It doesn't mean you don't need to think about technical limitations when working on a website design project, it just requires a whole different set of knowledge to create something that both looks nice and works well across email clients. It would be wrong to assume you can just apply what is possible in the web world to the emails and thing will work perfectly. Yes, email templates are built with HTML and CSS, but the markups and properties you are familiar with sometimes don't get interpreted the same way by some clients.
If it's your first time building a set of email templates, be prepared to spend more time than expected on testing! There could be situations where changing a few lines of code fix a bug in one client and ruins another. Just be patient and try different approaches that you can find online.
Looking back at the process, the best decision I made was to create a style guide for the email templates before doing anything else. It saved me a lot of time and effort during the whole design and implementation process. Having a style guide in code also made it easy to maintain the templates.
On the other side, there was one thing I wish I had done: asking the marketing email director for design feedback earlier. If I had known the limitations around the use of background colors and characters, maybe we could have landed on the final version earlier.
It was a great learning process working on this project! I was very proud to see these templates go live. Knowing tens of thousands of customers are receiving emails I designed & built makes a good amount of joy I can take in every day.
Next project: Color Stories | Primary >>