Raymour & Flanigan Email Design System

Our client asked for an email design system with an emphasis on accessibility, interaction, and clear branding. They have an existing design system for their website, so we were able to work together on how their components were defined. The have their existing set up to follow the structure and naming rules based on Atomic Design. Their email were originally very image based, so we tried to keep as many image options as possible, but also add in some live text to help keep them as accessible as possible. They wanted to focus image heavy and lots of white space. I created modules with spacing options as well as many image options.

Information Gathering:

Company Research

I began by looking at their emails, Facebook, Instagram, company website. I also was able to get some 1:1 time with their designer who has architected most of their website design system. I was able to work together with them to create a new system that worked seamlessly with their existing procedure and naming conventions.

Wireframing

Once I had a list of possible use cases, I drew out a first draft of wire frames. This client wanted to approve each step of the process, so we shared this document with them and discussed the types of emails they send in so far as brand, promotional, outlet, and their purchasing journey. We needed a decent amount of modules with text heavy options as well and many image heavy options.

Ions:

We created the documentation INSIDE the design file for the first time. After some user interviews with previous design systems I've made, I was able to iterate my process to be more streamlined and easier for our Creative team and clients to access all the information in one location. Figma made this easy with annotation plugins.

Atoms:

Molecules:

Organisms:

Email Examples:

Before and After

In the image above, you can see their original emails in the top left. Their emails were only in images with little to no live text. Their alt text was not descriptive of the images nor did they describe all the text imbedded in the images. They gave us two emails to mock up in our design system. You can see their original emails, next to it is the email mocked up in our design system, and then on the right is the blank modules we used to create that email. The "Golden Hour" email was mocked up twice to show them how we could move some of the text to keep as much live as possible.

Some of the important features in this design system include:

Buttons not imbedded in images
- Live text on buttons and standard size for accessibility standards
Maximizing live text
Creating a book-end effect with header and footer
Consistant hierarchy of typography
Bulletproof grid structure to ensure seamless transitions between desktop and mobile
Style more inline with website and brand guidelines
Color guidelines to ensure greatest visibility to those with low vision or colorblindness

Page updated

Google Sites

Report abuse