Teladoc's Email Design System
Our client asked for an email design system that reflected their website designs with emphasis on lots of white space, minimal photography, and the ability to have tons of dynamic content for their customers. They wanted to be able to personalize the emails their customers' specific coverage and next steps in their health journey.
Information Gathering:
Company Research
I began by looking at their emails, Facebook, Instagram, company website, and any other places this particular client interacts with their customers. I compiled use cases and looked for patterns in messaging and content.
Wireframing
Once I had a list of possible use cases, I drew out a first draft of wire frames. This document is very basic and broad and I try to encompass as many of the use cases as I can without making any "one use" email modules. My goal here is to dictate the patterns I see in their marketing and make these ideas as flexible as possible.
Stakeholder Interviews
This client was heavily invested in the information gathering process. They not only gave us look books and brand guidelines, they let us run multiple stakeholder interviews. We were able to ask them in depth questions about their brand, their voice, the future of their brand, and what sets them apart from competitors. We were able to leverage much of this information throughout the creative process.
Meeting with Strategy
Once I had basic wireframes laid out, I scheduled a short meeting with strategy and the copywriters that worked on this account. They usually can tell me more about the client and what campaigns are coming down the pipeline. I also used this time to make sure I am not missing any patterns or email modules they believe would be useful. With this client, I learned that they needed a lot of text heavy modules and patterns that really encouraged them to come back to the website to finish processes (like filling out medical history or adding dependents).
Creating the Design System
After I had done client research and found my parameters from the internal team members, I began to craft the building blocks of the design system. I always like to begin with color testing. Accessibility is a corner stone of any good design, so I made sure that the colors I used are at least AA accessible for the WCAG (Web Content Accessibility Guidelines). This information was also very helpful for strategy for when they are crafting emails down the road. It's important to me that everyone is able to easily interact with the world around them.
With this client, I laid out the most likely background colors along the top and listed every single brand color they gave us along the left side. This way we were able to test the whole range of brand colors as well as the most likely color combinations.
Deliverables
When I describe this design system, I break it up into a few different sections that more easily explain the whole.
Elements
Using their brand guidelines, I broke their colors down into components. This client was fairly flexible in their colors, so I made sure to add gradients. This helps future designers stay accessible by using lighter or darker colors, but also keeps them within brand guidelines. This allows for much greater flexibility in creating future emails.
This client already had a good font stack they used on their website, so I just made sure that the fonts were email safe and went ahead with what they had. I defined a hierarchy and outlined how links were going to appear. I made sure the links had some sort of text decoration so that they are visible even without taking color into account.
I also took this time to define spacing rules, responsive grid, and found the icons the company used. I made sure they were uploaded into the system and were components for all the future designers to use.
Al La Carte
This is the content section. I used the smaller elements to start creating buttons, content blocks that fit within the modules, and the interactions we will use.
I created responsive buttons that will grow and shrink depending on the amount of copy. I also created fixed-width button options to optimize for the most flexibility.
The individual content blocks were created to help fit the modules to the different needs of the emails. This way the designers can add or take out list items or other kinds of content. This means we can personalize the parts of the modules without breaking the design system and causing more work for development.
Modules
This client requested modules for desktop, mobile, light, and dark mode. This means we can design emails for a wide variety of view ports and make sure it still looks seamless in light and dark mode.
Documentation
When the pattern library was finished, I generated the documentation in ZeroHeight. This platform makes it easy to dictate how the items are used, and displays the assets as well. If you would like to view the documentation more in depth, please feel free to view it here.
