DSG.png
 

Email Foundations Design System

The Challenge

Train dozens of DICK’S Sporting Goods designers on email best practices, provide a way to ensure consistency and reduce internal email marketing support requests.

The Outcome

The Email Foundations website. This site housed our email design system and development resources.

My Role

As the Creative Manager, one of my roles was to lead the team through establishing all of our email creative best practices that included design, development, and subject line writing. This team was responsible for training and supporting over two dozen creative teammates in the creation of over 4,000 different marketing emails per year being sent to our 25 million+ subscribers. The Email Foundations website was designed and developed by this team while I provided UX oversight, creative direction, and content review.

homepage.jpg

The Email Center of Excellence (COE) is a small team of highly skilled email designers, developers, and writers. Their main focus included innovating in the email marketing space, establishing and maintaining email guidelines, and training and supporting the larger team of email designers and writers who deliver over 4,000 marketing emails each year for DICK’S Sporting Goods, Field & Stream, Golf Galaxy, and the other brands in the DSG portfolio.

In order to deliver such a large volume of work, and to move our email marketing forward, the Email COE transitioned away from image-based email marketing to live-text emails using a codebase built from scratch. This codebase was built specifically to make emails WCAG2.0 AA compliant, as well as prepare the organization to take on the effort of email personalization.

Email Foundations: Guidelines, Training, and Support

With the transition to live-text emails and the need for rapid turnaround times, all while maintaining brand consistency across different email categories, the team created an Email Foundations website to support dozens of designers and writers in creating their specific emails. The COE put together guidelines on design, development, and subject line writing. Because of the nature of HTML emails, consideration had to be given to everything from file size to ADA compliance.

Design

The Design section of the site was dedicated to reiterating the DSG style guide, but with specific information for the email medium. For example, there are brand colors that do not pass ADA in email, so specific colors were used to meet the email requirements while meeting brand standards.

photography.jpg

Animation

Animations played a large role in DSG emails because of their engagement and ability to increase sales. So, the site also laid out the different types of animations that were approved by creative leadership and the details around how to create them. Special attention was paid to file size and ADA compliance.

types of animations.jpg
email holiday animation.gif

Development

When we transitioned to live-text emails, it meant the larger group of designers would need to get comfortable with more complex HTML to build their emails. The Email Foundations site housed all of the development documentation, as well as served video tutorials to help designers learn the skills necessary to build their emails. The training and support documentation received high praise from leadership because it meant the team was equipped with everything they needed. The codebase also helped streamline the production of emails through increased efficiency and decreased production time.

One major accomplishment for this codebase took place during an audit by our email service provider in preparation for sending more personalized emails. The feedback was overwhelmingly positive. The ESP said what they reviewed was the best codebase they had seen from any of their clients. We were positioned to take on any future personalization the organization wanted to pursue.

snippets.jpg

Resources

The Email Foundations site also presented a number of resources to help make the creation of emails as easy as possible. Documentation on specific ADA requirements and dark mode considerations, as well as links to color contrast checkers and personalization tools, making this site a one-stop-shop for all designers and writers working on email.

alt text.jpg
dark mode.jpg