Rothy's email design system

Mailchimp EMAIL DESIGN SYSTEM

Type

Digital

Summary

The purpose of this project is to streamline and enhance the creative process, ensuring that emails consistently reflect brand identity and messaging across different touchpoints. Through meticulous user testing and collaboration with the design team, a comprehensive email system was developed.

Process

Creating a more flexible system

Our project began with a clear objective: to enhance the flexibility of our email system. Recognizing the importance of adaptability in meeting diverse campaign needs, we embarked on a thorough process aimed at reimagining our approach.

01.

Brainstorm

During the brainstorming phase, we re-evaluated our existing templates to pinpoint their limitations. Additionally, we explored methods of making the system more modular while preserving flexibility in creativity. Our goal was to strike a balance that allows for diverse creative expressions while ensuring coherence and consistency across campaigns.

02.

Testing

In the testing phase, we utilized Usertesting.com and Neurons to inform our design decisions. Through both qualitative and quantitative tests, we observed user behavior and gathered insights on their reactions to the new templates. This allowed us to refine and optimize our designs based on user feedback, ensuring a user-centric approach to our email system development.

03.

Stress test

In the stress test phase, we collaborated closely with fellow designers on the team to rigorously assess the templates. We focused on identifying any missing layout types, potential sources of confusion, and the balance of flexibility within the system. Additionally, we scrutinized font sizes to ensure readability and assessed the overall ease of use of the templates. This collaborative effort allowed us to address any shortcomings and refine the templates for optimal usability and effectiveness.

Design

Visual direction and identity
‍
Mailchimp's new brand refresh is a blend of sophistication and the expertly crafted absurdist spirit that remains distinctly Mailchimp.

Moodboard
‍
The visual direction of the email system is thoughtfully curated to align with Mailchimp's refreshed brand guidelines, ensuring consistency and coherence across all communication channels. Drawing inspiration from the brand's updated aesthetic, the design elements reflect a balance of modern sophistication and the playful, whimsical spirit that defines Mailchimp's identity.

STYLE

Spacing
‍
We utilize multiples of 4 to define dimensions, padding, and margin for both block and inline elements, ensuring precision and cohesion in the layout and design of our email system.

Treatments

Typography and buttons styles
‍
By defining consistent typography and text styles, we aim to create a unified and professional appearance across all email communications while also simplifying the development process for our developers.

User testing
‍
We leveraged platforms such as Usertesting.com and Neurons to gather additional insights into user behavior and preferences. Through these tests, we were able to obtain valuable feedback on various aspects of our templates, including layout clarity, ease of navigation, and overall user experience. By analyzing the data and feedback collected from these external testing sources, we gained a comprehensive understanding of how users interact with our email system and identified areas for refinement.

Components

Informed by user testing and stress testing with our design team, we developed a library of flexible components. This component library functions like a versatile Lego set, enabling seamless customization of email campaigns through intuitive drag-and-drop functionality. Our goal is to enhance flexibility and streamline the process of crafting tailored email campaigns to meet specific requirements.