Project Scope

The Content Studio is a newly formed team at Nestlé Health Science with 3 designers specializing in different media. As a team, we create content and digital products across 1–16 brands, ranging from social media, paid media, and websites. 
Due to the high volume of email creation requests, I was tasked with creating a set of modular blocks to help facilitate email deployments.
Why Create an Email System?

It removes information silos and bottlenecks caused by only a few people's experience with email and creates cohesive emails at every send. Pre-designed modules can be used to create regularly used email templates. The modules can mix and match or move around to build unique emails faster than starting from scratch.
🎩  Role: I was tasked with conducting market research, collaborating with stakeholders to design a set of blocks, coordinating assets, and working with developers to develop the blocks.
⏲️  Timeline: April 2020 - June 2020 (Templates) | June 2020 - August 2021 (Content Creation)
Credit: Various brands at Nestlé Health Science
👉 Auditing Current Emails

A heuristic evaluation is often performed to analyze a website's usability. I used heuristic principles to help me diagnose current email problems. The sheet below shows the heuristics violated according to Jakob Nielsen’s 10 Principles on Heuristics. 

Analysis Findings

NestlĂ© Nutrition Store system generated emails, old designs - circa 2012-2021

BOOST® triggered emails, old designs - circa 2018-2020

👉 Secondary Research

The initiative to revitalize the emails was to acquire greater market share from the competition. I conducted secondary research to understand how major retailers structured the emails. Below are the four key takeaways:
đź“ť Takeaway #1: Live text-based emails are more beneficial in the long run.
đź“ť Takeaway #2: A user-centered approach from the inside-out
📝 Takeaway #3: We don't read, we scan.
📝 ​​​​​​​Takeaway #4: Follow mobile-first best practices.
Secondary Research Details 
đź“ť Takeaway #1: Image vs. Text-based emails
During my research, I discovered that image-based emails are still popular, despite the numerous issues they cause. Even though this route of launching emails may seem cheaper and faster, it fails to display key content when users disable automatic image download on their devices. HTML emails can take more money and time to setup, but it's more beneficial in the long run. 
For an enterprise like Nestlé Health Science, HTML emails were the way to go since it would help the CRM team scale up their production across different brands. 
Image-based emails concern:
❌ Meaningful alt text isn’t present.
​❌ Content can’t be seen at all. ​
❌ Inaccessible
❌ No visible, compelling calls to action
Why are HTML emails better?
✅ Spam compliant
✅ Effective subject lines and pre-headers
✅ Design for mobile devices with minimal navigation
✅ Tap-friendly HTML touch-points
✅ Scannable content
✅ Healthy text-to-image ratio (60/40)
✅ Images with optimized file sizes
✅ Accessible (ADA AA compliant)
✅ Functional & QA tested
📝  Takeaway #2: Adopt a User-Centered Approach
Human-centered design can improve the overall experience of a user’s interaction with an email. This leads to a smooth transition, increased click-throughs, and conversion rates.

Credit: Litmus

📝 ​​​​​​​Takeaway #3: Design for Eye-Tracking & Scanning
Scanning has overtaken reading as the dominant method of content consumption online. Two popular methods are:
F-shape: Utilizes the natural way that users in Western cultures have been reading for hundreds of years—from left to right, then down, left to right, then down, and so on.
Inverted Pyramid: Continuously draws eyes downward toward a specific point (usually a prominent CTA).
📝 ​​​​​​​Takeaway #4: Mobile-First Design
Over 50% of global web traffic originates from mobile devices, and this percentage will only increase moving forward. It is more important than ever to present your users with experiences that don’t just work well enough on smaller screen sizes—on-site and email experiences should be optimized specifically for smaller screen sizes.
🤔 How might we redesign the email process for an enterprise so that our internal team and freelancers can deliver fast and efficient emails? 
Here's how we did it:
✅  Fluid Responsiveness
Building the core elements using the Atomic Design principles means we can formulate our designs and start building pattern libraries. The core elements were re-styled for other brands so we could effectively scale email production across 10 brands.

Building email blocks using the Atomic Design Methodology

✅  Simple design with reduced navigation 
Email UX should be as simple as possible. Based on studies, marketers have 50 seconds to capture users' attention in an email. Then about 11 seconds to communicate your message. The first 300-500px should contain the valuable information because it will entice users to scroll through the email.

Simple design with reduced navigation 

✅  Tap-friendly touch points ​​​​​​​
The CTA is a visual cue to the users, so make sure they are easy to click on all devices. The button needs to stand out from the rest of the content. Use the primary, filled-in-buttons CTA for the main offers. Secondary CTA offers prospects an alternative course of action.It is less prominent and can be helpful when engaging with prospects who are not interested in the original offer.

Tap-friendly touch points​​​​​​​

✅  Short, scannable content
As designers, our job is to make the process of scrolling simple and attractive. This can be achieved with a simple layout and by distributing content properly. Use visual cues that will guide the reader to scroll through your email, like dividers and screen-size sections for easy eye scanning. 
S-Curve: A two-column layout with an image on one side and copy on the other, switching with each subsequent row. 
F- shape: It utilizes the natural way that users in Western cultures have been reading for hundreds of years—from left to right, then down, left to right, then down, and so on.
Inverted Pyramid: Continuously draws eyes downward toward a specific point (usually a prominent CTA).

Concise, scannable content​​​​​​​

✅  HTML background colors and text for reliable rendering This is a common misunderstanding.
From a technical standpoint, implementing background colors doesn’t add any load time to emails, and they are still visible even when images are turned off. They can help separate content, call out messaging, or set an email apart from others in your subscriber’s inbox.
No matter where in the world your reader is opening your email, whether it’s on the subway with limited cell service or in their home with a full Wi-Fi connection, HTML text (or live text as I’ll call it) will maintain a readable size.

HTML background colors and text for reliable rendering â€‹â€‹â€‹â€‹â€‹â€‹â€‹

✅  Optimize images for quicker load times.
The image size impacts the total time it takes for the content of the email to fully render once it’s opened. The reader might have a slow internet connection speed, so the loading time might take longer than expected.
PNG — lossless, meaning they won’t falter in quality when you compress the image, which allows you to export with transparency.
JPEG — These won’t allow transparency and are quite lossy. Use it when your images are loaded with color.
SVG (Scalable Vector Format) — A vector format that allows you to resize your image to fit your needs without sacrificing image quality.
✅  Make it accessible
Alternative Text: important for people with disabilities because it describes the function and appearance of a photo or graphic that they can't see.
Color Contrast Evaluation: Be mindful of your color choices in regards to your images and other email components. Distinguishing between colors is difficult for many, so try to increase the contrast between the email text, image, and background. The required ratio should be 4.5:1 or above.
👉 ​​​​​​​Testing Block Application

The next step was testing email templates with the blocks from each journey. During this process, it was important that each block be built to effectively resolve the issues identified in the research phase. We built example templates utilizing the new blocks to do this.
👉 ​​​​​​​Development Issues & UAT Testing

From there, I worked with an internal Nestlé agency to develop the emails from design to code so they could be loaded onto the SalesForce Marketing Cloud platform (NHSc CRM migrated to Klaviyo four months afterwards). There were multiple challenges that we faced during this due to limitations from the agency, email platform, and aggressive deadlines.
The challenges started with the handoff process. We had built the emails in Figma, but the agency only accepted Photoshop files. Due to this challenge, we had to delay the handoff by a week so we could rebuild the templates in Photoshop.
Digging through the data, we learned that 78% of the total subscribers across all brands came from Gmail, followed by Outlook, Yahoo, and other email clients. Because of the overwhelming preference of our audience, we focused the optimization plan heavily on Gmail and Outlook.
Below are some of the issues we encountered during User Acceptance Testing (UAT) with Outlook:
Font didn't load and space didn't match design files
Font didn't load and space didn't match design files
Font didn't load and too much space underneath the coupon
Font didn't load and too much space underneath the coupon
Mobile menu should be hidden on desktop
Mobile menu should be hidden on desktop
👉 ​​​​​​​Email Deployment

The product was launched a few weeks after the initial timeline. The Nestlé Nutrition Store and BOOST were the first brands to launch their email experience. For the remaining brands, replication took place once brand sites went through UI/UX transformation and had segmented journeys. The CRM team owned the replication process and had estimated that each brand would take a few hours.
Below are some of the emails deployed in Klaviyo using the new system.

Deployed emails from Klaviyo

🎯 Outcomes

A design system is a collaborative tool. The email design system’s goal isn’t to eliminate the need for a designer. It’s also not to make all emails look the same. In addition, this system is easily usable by freelancers.
The use of blocks allows the system to remain flexible and fresh for future needs. New blocks can be created and existing blocks can be updated as needed.
We saw quick success as a new team (the Nestlé Health Science CRM team) was able to hit the ground running with our newly created email template system.
Emails are being launched on time as opposed to 1-3 days later when they were handled by a third party agency.
✨ Takeaways
​​​​​​​
Even though we worked with an internal agency, we assumed the agency had access to the same tools, but this wasn’t the case. It’s important to involve the development team as the project moves through different stages.
Content is king! Keeping content top-of-mind and implementing a content-forward approach during both ideation and design will help facilitate a more efficient development and production pipeline.
🎥  Credits

Product Manager - Dana Katz
Designer - Kate Yip
Copywriter - Cassandra Rose
Back to Top