Chili's Email Design System
Our client asked for an email design system with an emphasis on accessibility, interaction, and clear branding. They were previously custom designing and developing each individual email which was time consuming and inevitably has small differences in each email that didn't make them all feel like a cohesive brand.
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 typically very basic and broad, and I try to encompass as many of the use cases as I can without making any "one use" modules. My goal here is to dictate the patterns I see in their marketing and make these ideas as flexible as possible.
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 wanted a lot more interaction and things that grab the clients attention and that they also lean towards large, graphic heros. This helped me work those items into their system.
Meeting With Development
I always try to make time to meet with development, but in this case it was extra important because I needed to discuss the interactive part of the emails. Our development team was able to give me guidelines as to how and when email interactions work and don't work. Not all email clients render the same and they advised I dictate fallbacks that are still user centric for those who won't be able to see the more advanced email modules.
Creating the Design System
After I finished with the 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 will be using are at least AA accessible for the WCAG (Web Content Accessibility Guidelines). This information will also be very helpful for strategy 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.
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 take this time to define spacing rules, responsive grid, and find the icons the company uses. I make sure they are uploaded into the system and are components for all the future designers to use.
Al La Carte
This is the content section. I use the smaller elements to start creating buttons, content blocks that fit within the modules, and the interactions we will use.
I create responsive buttons that will grow and shrink depending on the amount of copy. I also created a fixed button option to create the best flexibility I can.
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.
In the interactions of this particular system, I added hover states for buttons, selected/deselected states for the quizzes, and a celebration gif for challenges and birthdays.
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 good in light and dark mode.
Documentation
When the pattern library is finished, I generate the documentation in ZeroHeight. This platform makes it easy to dictate how the items are used, and to display the items as well. If you would like to view the documentation more in depth, please feel free to view it here.
