Informational Email Template
Creating a Global Design System for Email Communications
Introduction
At Herbalife International, we faced several challenges with inconsistent email layouts and designs. Different teams created communications independently, which often confused our recipients and weakened our brand identity. To address this, our marketing team approached the design team to develop a centralized design system aligned with our partner, Salesforce Marketing Cloud. This initiative established clear guidelines and a cohesive framework, allowing us to deliver a unified experience across all emails—newsletters, marketing campaigns, and transactional messages—while strengthening Herbalife International’s brand voice and connection with our audience.
Role
Product Design Lead
As the UX Design Lead, I led the creation of a centralized design system to resolve inconsistencies in email layouts, ensuring a cohesive user experience and strengthening our brand identity across all communications.
Business Objectives
Our business stakeholders needed our design team to establish a comprehensive design system for all email communication channels to enhance brand consistency and improve user experience. The previous approach had caused confusion among recipients, making it essential to standardize layouts, messaging, and visual elements across all emails—whether newsletters, marketing campaigns, or transactional messages. By implementing this design system, we aimed to increase engagement, strengthen our connection with the audience, and reinforce Herbalife‘s market presence locally and internationally.
Challenges
Creating a comprehensive design system from scratch presented several challenges, including the lack of existing guidelines and diverse team inputs that led to conflicting styles. Additionally, coordinating cross-functional collaboration, conducting user research, and ensuring seamless integration with Salesforce Marketing Cloud added complexity, while change management and the need for thorough documentation and training required significant time and effort.
Duration
Spanning over four springs.
Team Members
UX/UI Designers - Cesar Olguin, Raf Gonzalez
UX Research - Yeyen Ong
Marketing Product Owner - Danny Guerrero
Director - Ken Oelerich
Functional & Dev Manager - Shiva Ivoghli
Challenges of Using Outdated Legacy Email Templates
Inconsistent Branding: Utilizing various legacy templates can lead to a fragmented brand identity, making it difficult for customers to recognize and connect with the brand.
Poor User Experience: Legacy designs often lack mobile responsiveness, resulting in a subpar experience for users on smartphones and tablets, which can lead to higher bounce rates.
Low Engagement Rates: Outdated aesthetics may fail to attract attention, leading to reduced open and click-through rates, ultimately impacting overall campaign effectiveness.
Compatibility Issues: Legacy templates may not render correctly across modern email clients and devices, causing formatting issues that can disrupt the message.
Inefficient Design Process: Maintaining multiple legacy templates can complicate the design workflow, making it harder to implement updates and ensure consistency across communications.
Limited Functionality: Older templates may lack advanced features and capabilities, restricting the ability to incorporate interactive elements that engage users more effectively.
Negative Perception: Relying on outdated designs can give the impression of a stagnant or out-of-touch brand, potentially damaging customer trust and loyalty.
Legacy Email Communication Templates
Legacy Email Communication Templates
Legacy Email Communication Templates
Proposed Email Templates
Marketing Emails:
Marketing emails are promotional messages aimed at driving sales or engagement. These emails may include special offers, product launches, or event promotions. The primary focus is on persuading recipients to take action, such as making a purchase or signing up for an event.
Promotional Emails:
Promotional email is a marketing communication aimed at encouraging recipients to take a specific action, such as making a purchase or signing up for a service. These emails often feature special offers, discounts, product launches, or event invitations designed to capture the recipient's attention and drive engagement.
Informational Emails:
Informational emails are designed to convey important information to the recipient. This could include announcements, educational content, policy changes, or updates on specific topics. The goal is to inform and educate the audience without a direct sales intent.
Transactional Emails:
Transactional emails are triggered by a user’s action and provide necessary information related to that action. Examples include order confirmations, shipping notifications, account updates, and password resets. These emails are essential for enhancing the user experience and ensuring effective communication throughout the customer journey.
Newsletters Emails:
Newsletters are regular email communications sent to subscribers, providing updates, insights, or curated content related to a specific topic or organization. They aim to engage the audience, build community, and keep readers informed about relevant news, events, or developments.
Essential Principles for Email Design Systems
Brand Guidelines: Specifications for logo usage, color palette (HEX, RGB, CMYK), and typography hierarchy.
Layout and Grid System: Guidelines for content alignment and responsive design across devices.
Essential Components: Styles for buttons, forms, and standardized designs for cards and containers.
Imagery and Copy Guidelines: Visual consistency and brand tone, with an emphasis on accessibility.
Email-Specific Best Practices: Recommendations for preheader text and effective call-to-action (CTA) placement.
Testing and Documentation: A/B testing strategies, performance metrics, and a centralized design system library.
Final Template Designs Using Components and Patterns from the New Global Design System
Creating a new design system for email communications improved brand consistency and user experience, leading to higher engagement and a stronger audience connection. This approach also strengthened Herbalife's market presence and streamlined workflows.
The design system included essential components such as brand guidelines for logo usage, a defined color palette, and typography hierarchy. It featured a layout and grid system for responsive design, as well as standardized styles for buttons, forms, and cards. Additionally, imagery and copy guidelines ensured visual consistency and defined the brand's tone, with a focus on accessibility.
Email-specific best practices were established for preheader text and call-to-action (CTA) placement. A/B testing frameworks and performance metrics were integrated to measure effectiveness. Accessibility standards, including color contrast and alt text recommendations, were implemented. Comprehensive documentation was created, providing a centralized library of components and usage examples to enhance the quality and effectiveness of marketing emails.
Brand New Product Email Template
The New Product Email Template is a dynamic communication tool designed to announce and promote a newly launched product.
New Products Promotional Email Templates
New Products Promotional Email Templates are designed to showcase the latest offerings from a brand in an engaging and visually appealing manner.
Informational Email Template
An informational email is designed to convey important information to recipients without a promotional intent.
Wellness Email Template
A Wellness email is a type of communication focused on promoting health and well-being.
Results
-
A unified design system ensures that all email communications reflect the brand’s identity, reinforcing recognition and trust among recipients.
-
Standardized layouts and messaging provide a seamless experience for users, making it easier for them to navigate and engage with content.
-
By eliminating inconsistencies in design, recipients are less likely to feel confused or overwhelmed, leading to clearer communication and better understanding.
-
A cohesive and visually appealing design captures attention and encourages higher engagement rates, resulting in more interactions with emails.
-
Consistent messaging and visuals help to build a stronger emotional connection with the audience, fostering loyalty and long-term relationships.
-
A professional and polished email design enhances Herbalife’s credibility and visibility, strengthening its market presence both locally and internationally.
-
A comprehensive design system simplifies the design process for the team, enabling faster turnaround times and more efficient project management.
-
A robust design framework allows for easier updates and adaptations in response to market changes or new initiatives, ensuring continued relevance and effectiveness.
-
With standardized and optimized designs, tracking performance becomes more straightforward, enabling data-driven improvements for future campaigns.
-
Enhanced engagement and user experience can lead to higher conversion rates, ultimately resulting in improved return on investment for email marketing efforts.
Herbalife®
Legal Notice: All assets, images, videos and design are copyrighted material owned by Herbalife Nutrition® 2024.
Digital Design Portfolio is for viewing only, not for sale.