Project Scope
The Content Studio is a newly formed team at Nestlé Health Science with three designers specializing in different media. As a team, we create content and digital products across 1–16 brands, including social media, paid media, and websites.
Due to the high volume of email creation requests, I created a set of modular blocks to help facilitate email deployments.
Why Create an Email System?
It removes information silos and bottlenecks caused by relying on SMEs to send and create cohesive emails at every send. Pre-designed modules can be used to develop regularly used email templates. In addition, 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.
⏲️ 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 a more significant market share from the competition. I conducted secondary research to understand how powerful retailers structured emails. Below are the four key takeaways:
📝 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 set up, but it's more beneficial in the long run.
For an enterprise like Nestlé Health Science, HTML emails were the way to go since they would help the CRM team scale up their products 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 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. 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 explicitly optimized for smaller screen sizes.
How might we redesign the email process for an enterprise, SO 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 ten brands.
Building email blocks using the Atomic Design Methodology
✅ Simple design with reduced navigation
Email UX should be as simple as possible. Studies show 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 valuable information because it will entice users to scroll through the email.
Simple design with reduced navigation
✅ Tap-friendly touchpoints
The CTA is a visual cue to the users, so they can easily 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 leading offers. Secondary CTA offers prospects an alternative course of action. It is less prominent and can be helpful when engaging with prospective customers not interested in the original offer.
Tap-friendly touch points
✅ Short, scannable content
As designers, our job is to make the scrolling process simple and attractive. This can be achieved with a simple layout and the distribution of content correctly. Use visual cues to guide the reader 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.
From a technical standpoint, implementing background colors doesn’t add any load time to emails; 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 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 render once it’s opened fully. 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 pretty lossy. Use it when your images are loaded with color.
SVG (Scalable Vector Format) — A vector format 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 with your images and other email components. Many struggles to distinguish between colors, so try to increase the contrast between the email text, photos, 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. Each block needed to be built during this process to resolve the issues identified in the research phase effectively. We created 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 afterward). We faced multiple challenges 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 to 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 too much space underneath the coupon
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 target segmentation. The CRM team owned the replication process and had estimated that each brand would take a few days.
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 ones can be updated.
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 instead of 1-3 days later when a third-party agency handles them.
✨ 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 essential 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 will create a more efficient development and production pipeline.
🎥 Credits
Product Manager - Dana Katz
Designer - Kate Yip
Copywriter - Cassandra Rose