Headlines - Email Redesign

Upon arriving at UAH as the new Web Designer, one of the first priorities was to redesign Headlines, the weekly newsletter sent to faculty and staff from the Office of Marketing and Communications.

Headlines v1 (pre-redesign)

I'll call this version 1 even though there had been some minor updates prior to my arrival: namely, the addition of a Photo of the Week section to showcase photography in each mailing and add some visual interest.

The feedback we had received was that the layout was so text-heavy that most recipients quickly skimmed over it if they opened it at all.

Headlines v2

In the version 2 redesign, I sought to emphasize the look and feel of UAH's new brand (which had recently been refreshed with a new logo and colors). Events were given a calendar graphic to make them visually distinct from other sections. A sidebar was added to better utilize standard email widths.  The sidebar provided an opportunity to promote UAH athletics events without competing for space with primary events and news.  

A note about email technology: If you've ever developed email templates before, you know it's like stepping in a DeLorean and setting the flux capacitor to 1994. Email clients are infuriatingly behind the times. This means that emails, to this day, are built in tables, a practice that has been long-since frowned upon in web design. While concurrently working on making UAH's new site responsive and mobile-friendly, responsive techniques in email design was still in its infancy. Sadly, responsiveness was tabled for this version.

Because the underlying HTML of this template was significantly more complex to update each week, our lead developer created a builder interface. This served as a kind of form that the web communications administrator in charge of Headlines could use to more easily build Headlines out each week.

The visual overhaul that version 2 introduced saw an increase in open and click rates and helped the OMC in its mission to keep faculty and staff informed of campus news and events.

The Beginnings of Headlines v3

While version 2 was largely a cosmetic overhaul that was completed in a matter of days, version 3 would be a far more involved undertaking – one that required years of big-picture planning.

Headlines, in its version 2 state, presented a number of shortcomings and challenges:

• Even with the builder interface, each email still required about one full day of work from the web communications admin to build, and a considerable amount of time from the writer with whom he coordinated (meaning this one email required ~20% of the resources from one web admin on top of additional resources from a writer)
• There were scheduling challenges with coordinating the ordered release of news stories across multiple channels (ex: Headlines needs to be held back because Story A hasn't been finalized yet)
• Often, news stories were simply titles linked to a PDF of the story, creating usability challenges and also meant that errors discovered after sending out Headlines could not be corrected
• The information architecture was not clearly defined – content was divided into three sections (Top Headlines, Campus Events, and Campus News in Brief), but news stories were often about events and events were often related to news stories
• Occasionally, there wasn't a clear choice for Photo of the Week, leading to a delay in Headlines while member of OMC scrambled to produce a photo
• The layout was not responsive, making it difficult to view on mobile devices

These issues caused significant consternation within our department on a weekly basis. We would often make half-joking comments like "one day when Headlines is automated, we'll be able to tackle [X project]." So I began planning a realistic solution for automating Headlines.

The basic idea

The Headlines email would be automatically populated each week with content that was already published on the UAH website.

In theory, it was understood that the UAH website was the mouthpiece for UAH communications and Headlines was simply a curated roundup of the news and events published on that website. But it was time to put that theory into practice.

My plan was this: Headlines would be a webpage, populated programmatically with a feed of news, events, and announcements. That webpage would then be copied into an email and sent out each week.

The technology for News was already in place.  Joomla (the CMS upon which the UAH website is built) offered modules that could be set to show a certain selection of articles in a customizable layout. All we had to do was customize those modules and assign a specific category to each article that we wanted to include in Headlines.

Announcements worked largely the same way. However, we weren't featuring announcements on the UAH website. So before we could include them on Headlines, we had to first come up with a plan to properly utilize them on the website. Over time, we accomplished this goal.

Events was the biggest challenge. The existing Events page on the UAH website had been created somewhat hastily. It lacked a lot of features and was thus underutilized by event organizers and campus in general. The redesign and relaunch of UAH Events deserves its own case study, but the selection and implementation of the software behind this new page was heavily motivated by my desire for the ability to display events in customizable formats across various pages.

With those pieces finally in place (after years of planning and implementation), I began design work on version 3.

Headlines v3

Notable changes from v2

• Headlines has always been a roundup of news, announcements, and events. So now the primary sections were titled exactly that: News, Announcements, and Events. Gone were the verbose and somewhat nebulous titles from v1 and v2.
• Rather than linking titles to PDFs, clicking news articles took users directly to the story on the UAH website.  This also allowed writers to make corrections or updates to stories even after the Headlines email was sent.
• All news articles and events could now include photos, giving users more context and encouraging interest.
  
• Photo of the Week, a section that was sometimes difficult to fill, was replaced by The Lead, a featured story that was given emphasis for users quickly skimming the email.
• This version was responsive (yay!). The adoption by Gmail of new rendering techniques and the proliferation of responsive email design patterns meant that this could finally be implemented in v3.

I built the webpage as if it were the body of an HTML email (tables, tables, and more tables!), customizing the PHP and HTML controlling each module to appropriately transfer to an email body. Email on Acid was used to conduct round after round of email client compatibility tests to ensure the email would be displayed correctly across a wide range of email services and programs.

Outcome

The result was a resounding success. Weekly time involvement for Headlines was reduced from ~one day to ~one hour, open rates and click rates improved, and feedback from around campus was overwhelmingly positive.