Plan the work, then work the plan

The task at hand was to create a visual standard that is consistent, flexible, and scalable for emails. This would need to service all email types, transactional, promotional, and journeys for all business sides. Before we began the work, the Design team would align and agree with the Marketing team on what was needed and the plan for how to track to completion.

 

Working with the Marketing Team, we gathered and set up the following:

  • Marketing provided a list of components they needed for all emails

  • We took each of those components and divided them into tickets in our project management tool, Workfront, for assignment and tracking

  • We set up a bi-weekly rhythm with Marketing, Design, and Development to review to ensure the design team was meeting all requirements

  • The teams worked on how to restructure the process using the new libraries

 

Leading the Visual Design Team would pose a different set of challenges. Thinking in systems and how to build and manage a library at scale was a new idea for them. Before we would get started, I held up-skill sessions on what atomic design is and what a design system can do to make our lives easier. A big part of this would be to up-skill Figma’s depth of features for component building. We would also discuss and align on strategy and tactics for creating libraries. In the beginning stages, I provide the team with guidance on best practices in architecture for building a scalable library. One last best practice we implemented would be to bring in developers at the beginning of the process and not at the tail end. This way, piece by piece, we could determine feasibility early on and fixes issues before it went too far down the road.

 

Now that we all are on the same page its was finally time to get into design work! We began with an audit over past 18 months of design work to evaluate and establish standards across emails. With 18 months worth of emails, we could step back and see what patterns we were using. How were we being consistent already that we could apply to everything? What could we trim down on and set as standards to save time?

  • a b, c coloring structure

  • standardize typography

  • mobile and desktop views (was only designed in desktop previously)

  • shared language established

  • sync with dev on actual capabilities of emails before jumping into design

  • addition of Figma variables to swap brands and save design time

dev workshop

Whiteboarding session with the development team to gather information on how they construct emails

image of audit

Comprehensive audit of all design emails from the past 18 months

abc coloring structure

We decided to get the most use of our library, each component would be at a minimum, consistently colored in three different ways

mobile/desktop

After optimizing the library, designers would now have the ability to quickly create mobile and desktop versions

Variables for theming

We added in variables to quickly produce emails for our internal business units using the same structure and a palette swap