Personalized newsletters that are easy to curate and look great on all devices

I managed the relaunch for a suite of newsletter campaigns that over 300,000 readers engage with everyday.

The Problem

Observer sends out thousands of personalized news digests everyday and each is tailored to specific preferences based on subscribers’ reading history.

Issue 1: Each newsletter was conceptualized and brought to life by a different team so each template had its own branding. For some, it was hard to tell that they even belonged to the Observer family. We wanted to create a cohesive design system that was flexible enough to accommodate the different types of content featured in each newsletter but also showed that the email was an Observer product.

Issue 2: Because of the various layouts, the workflow to setup and send each newsletter was different, which made it tough to train new staff members. We wanted to streamline how the newsletter campaigns were configured and automate as much of the process as possible.

Issue 3: There wasn’t a way to monetize the newsletters unless a direct ad or sponsored campaign was sold into a specific one. Lacking a way to serve network ad units was leaving potential profits on the table. On top of this, there wasn’t a streamlined way to book ads, which created the potential for miscommunication and double booked campaigns.

Issue 4: We saw consistent open rates across the board except for a certain set of users—those opening the campaign in a mobile Gmail environment. It turned out that even though we had designed and coded a mobile-friendly version of our newsletter, Gmail wasn’t rendering our CSS correctly so our layouts looked broken on small screens.

newsletterwithdirectad
Most newsletters can be configured from a single campaign which has options to set topic logos and additional units for direct advertisers.

Design and Implementation

I worked with Observer’s creative director to implement a design that could accommodate different ways editors wanted to showcase content in each newsletter. We also designed a welcome message that readers were sent when they first subscribed to any newsletter. The welcome message invited the user to subscribe to other newsletters and showcased some of our most popular content.

After interviewing editors and web producers about the pain points of creating each newsletter, I went over my findings with our engineering team. They were able to leverage a custom programming language provided by our our email service provider to streamline production of newsletters. Instead of maintaining a number of templates for each newsletter and ad scenario, most newsletters in the suite could be configured from a single template, making staff trainings much simpler. The new templates also automated much of the production process by pulling content from designated posts on Observer.com so an editor didn’t have to enter a story more than once. Eliminating these redundancies allowed editors to focus their time on the areas of the newsletter that were truly custom.

In order to monetize each campaign, we partnered with a network that could serve ads in designated slots even when a direct ad wasn’t scheduled. The new templates were designed for optimal display of these ad units and also included a bespoke unit that added value for direct advertisers.

At the time, Gmail wasn’t playing well with CSS media queries so to optimize our layouts for mobile devices, we coded our templates with a fluid tables that allowed content to stack instead of shrink on smaller screens. The result was a future proof design that rendered consistently no matter the email client.

(Right) This won’t do—Gmail wasn’t rendering our CSS correctly so our layouts looked broken on small screens. (Left) A fluid hybrid design was key to making our layouts look great across all devices and email clients.

Going Forward

Reader interest in email newsletters is growing and with excellent products created specifically for the medium (like Lenny, the Skimm and Clover Letter) it’s no wonder why. Gone are the days that a simple news digest will do—personalization technology coupled with bespoke content creates the opportunity to deliver delightful user experiences to readers’ inboxes. We’ll continue to test and refine how to present our stories to this very unique set of users.