Email Invitations

Role: Sole Designer and Developer

Teams involved:

Events National Program & Outreach Meetings & Membership Studies Corporate & CEO Programs IT

Product Overview

Following the Newsletter Overhaul rebrand, CFR needed to reflect its new brand standards to email invitations. These templates are used to invite CFR members and press to special events, and to send press invites for breaking news. 5 departments across the organization rely on this single template to send invitations.

As sole designer and developer on this project, I owned both the visual design and the Sailthru coding, working directly with IT to test and validate the templates across every major email platform and device. Met the tight deadline of going live before the United Nations General Assembly (UNGA).

  • Event location logic had to handle in-person, virtual, and hybrid formats without breaking
  • Outlook and Gmail each handle dark mode differently, sometimes in ways that could make the template unreadable
  • Hard deadline: templates had to be live and reliable before CFR’s highest-visibility season, UNGA
  • Coded conditional location logic in Sailthru to merge CRM event data correctly across all three event formats
  • Wrote Outlook specific dark-mode code and fixed Gmail’s pure-black footer auto-inversion
  • Aligned 7+ departments on one shared visual system through multiple rounds of stakeholder review
  • QA’d across every major email client and device with IT

Desktop Designs

Send Update with Logo template, desktop Press Invite template, desktop Press Update template, desktop

Mobile Designs

Send Update with Logo template, mobile Press Invite template, mobile Press Update template, mobile

Dive Deeper

Problem

The existing invitation templates did not meet brand standards. They hadn't been updated to reflect CFR's new visual identity. The process of creating an event in CFR’s CRM (Microsoft Dyanmics 365), having the information merge to the template, then populate into the Sailthru template, and displaying correctly across different email platforms in both light and dark mode created a lot of space for error during this project. Invitations needed to work correctly for in-person, virtual, hybrid events, and press invites.

There was also a hard deadline driving the work: the templates needed to be ready in time for the UNGA (United Nations General Assembly) season. This is one of the busiest times of the year for the Council. During UNGA, CFR sends invitations for high-profile meetings with heads of state, prime ministers, and country representatives, inviting members and press to join. This template would be the first thing many members and press contacts saw representing CFR's new brand, for some of the most prominent events of the year.

The Challenge

This was a tedious, high-stakes project due to the amount of stakeholders involved. The design and the underlying code had to hold up across a wide range of event types and use cases, right as CFR's event and press invitations were going to increase due to UNGA.

CRM-to-email merge logic

Event data was created and entered into the CRM (Microsoft Dynamics 365), then needed to merge correctly into the coded template in Sailthru. The trickiest part of this was location logic: in-person events had a physical address, while virtual events had no location at all. Instead, virtual meeting details would be displayed in another part of the template. Hybrid events needed to account for both.

Outlook-specific dark mode coding

Outlook processes dark mode emails differently compared to other email platforms. It requires its own conditional code, read specifically by Outlook, to control how the template displays in dark mode. Without it, Outlook applies its own automatic dark mode conversion which would impact accessibility of reading the email in some cases.

Gmail’s automatic color inversion breaking the footer

Gmail automatically flips pure black and pure white in dark mode on its applications. The template's footer originally used pure black with white text and links, making Gmail flip the footer to a white background and making the white text and links unreadable.

Getting all of this right required a ton of QA across Outlook, Gmail, Yahoo, and other major clients and devices, with no margin for error given the UNGA timeline and the prominence of the events being sent. Beyond the technical challenge, aligning 7 departments on a shared visual system, down to something as specific as color choices, was an undertaking given the number of stakeholders involved in this project.

Process & Design Work

  • Brand-aligned template design. Designed the email invitation template to match CFR’s new branding standards, working through color and visual decisions with stakeholders across every department that would use the template.
  • Stakeholder alignment across departments. Ran meetings with stakeholders across IT, Events, National Program & Outreach, Meetings & Membership, Studies, and Corporate & CEO Programs, then iterated on the design.
  • CRM integration coding. Coded the template in Sailthru to connect with Microsoft Dynamics 365, ensuring event fields created in the CRM would merge correctly into the live template.
  • Conditional location logic. Built logic to handle three distinct event formats: in-person (physical address), virtual (meeting/Zoom details, no location), and hybrid (both) so the template would display the right information correctly regardless of event type.
  • Client-specific dark mode coding. Wrote Outlook-specific conditional code so the template’s dark mode display matched the brand rather than relying on Outlook’s default auto-conversion. Adjusted the footer away from pure black to prevent Gmail’s automatic dark-mode inversion from flipping the footer to white and making the white text and links unreadable.
  • Cross-platform, cross-device QA. Partnered directly with IT to test the templates across major email clients and devices. Focused on how each one handled dark mode to confirm consistent rendering.
  • Timed delivery. Scoped and paced the work so the new templates were live and stable ahead of UNGA.
Full-width in-person event invitation template

Outcome & Results

  • Verified consistent rendering across clients and devices. Through QA with IT, I confirmed the templates displayed and functioned correctly across major email platforms and devices, including dark mode.
  • Solved client-specific dark mode bugs before launch. Caught and fixed the Outlook dark-mode conditional coding and the Gmail pure-black footer inversion issue before the templates went live, rather than after members or press started seeing broken emails.
  • Strong stakeholder and leadership buy-in. Leadership and stakeholders across departments responded positively to the new brand consistency. Getting alignment on shared decisions such as color wasn’t easy with this many chefs in the kitchen.
  • Launched in time for UNGA. The templates went live just ahead of UNGA, CFR’s busiest season. This will be a test for whether the system could hold up under the highest-profile events in the organization.
  • Performance data still pending. Because the templates launched ahead of UNGA, there hasn’t been time to collect performance data.

to have the best experience with my portfolio, please view on desktop or tablet :)