Designing a seamless newsletter experience for Boston’s constituents

Thanks to some eye-opening user research, we’re re-thinking our approach to how we craft and send City newsletters.

We regularly publish and send more than 65 newsletters from departments across the City to keep residents informed about what’s happening in Boston. The trouble is, with so many newsletters going out, they often lack visual consistency across departments and the experience of our subscribers can vary.

We partnered with a user experience team from General Assembly this summer to review all of our newsletters, as well as the newsletter creation process. The group researched our current processes to design better newsletter solutions. The blog post about their findings below was written by the General Assembly cohort that we worked with: Marjorie Mesnis, Max Nagel, and Kateryna Zabrodska.

Getting started

The City of Boston was looking for a more seamless experience for department newsletters. But, they had a wide scope of questions to be answered or addressed. Ultimately, we narrowed our focus on two main areas:

Understanding the systems in place on how newsletters get sent
Reviewing the format and layout of the emails

The questions we used to guide our work included:

What are best practices and approaches that we can advise to departments as they’re putting together their newsletters to ensure a more seamless experience across all of the City’s newsletters?
Are there changes we should or could make to the City’s newsletter system, for example settings and templates? Are there also changes we should or could make to how we’re sending newsletters to allow our content editors to be more successful in the system?

Who is our user? Who should we speak to?

Before we could design solutions, we needed to understand who we would be designing for. Is our newsletter user a Boston constituent? Or, are we designing for the City of Boston employees currently sending these newsletters?

Process and tools

From our interviews with newsletters readers, we were able to identify the following behaviors:

users quickly scan the content of newsletters
users like clear email subject lines
users click mostly on images and visuals
users think newsletters should be short, and
users feel that information should be relevant and easy-to-read.

To learn more about the City process around creating newsletters we interviewed content editors from various City departments. At this point, we realized that the editors would be our primary user, because they are the ones responsible for creating a positive user experience for constituents.

Through talking with City employees, we discovered that they:

want more customization over formatting and layout functions
think better guidelines for visual sizing could be helpful
prioritize types of information in newsletters
have two goals: communicate updates on the department and City and redirect to the City’s website, and
think buttons help draw attention to calls to action.

Oursecond research method was usability testing. It consisted of showing readers some of the existing newsletters and prompting them to comment on the structure of information, content provided, and the layout.

With this method, we defined the following opportunities to take into account in our design:

The current size of text used in newsletters was too small to read when viewed on mobile.
Users noticed that not all pictures were clickable and the large number of links was confusing. If they clicked on one link, they would be re-directed out of the newsletter and not come back for further reading.
Many of the newsletters include important and current City announcements, such as voting, the census, or COVID-19. However, each newsletter presented those announcements in different ways. Often, the layout, pictures, charts, and links would be different. That would lead the reader to question the goal of the newsletter.

To better understand how newsletter readers interact with content, we conducted an anonymous survey with 28 participants. Our goal was to learn more about reader expectations and habits with newsletters:

Results from our survey:

Of our participants, 100 percent spend five minutes or less reading newsletters and 64 percent respond to clickable images more than hyperlinked text.
Overwhelmingly, users scan content by headline text and only connect with relevant content.
Email subject lines grab readers attention and are more valuable than the sender.

With all of this research, we narrowed down our scope for the content editors from the City. This allowed us to better meet their needs as communicators as well as design a newsletter template that would also benefit subscribers.

What do other large cities do, and what are industry best practices?

A performance audit of existing newsletters allowed us to understand what information readers find valuable, and how they interact with on-screen content.

We noticed that for the majority of City newsletters, performance was generally very good. Constituents tend to be very engaged with what the City is sending and also tend to click on content within newsletters. So, our design challenge became making emails even more accessible and engaging, while respecting the success that past emails have already achieved.

At a more granular level, we started to look at heatmaps and interaction analytics from past newsletters. We noticed that constituents tend to click on hyperlinks that are not embedded in the bodies of text. They also prefer to click on links on the left side of the screen in a two column format. Our insight from these heatmaps was that we should consolidate the number of clickable areas. We should be intentional in where links are located on screen and within the newsletter content.

At this phase, we also wanted to learn how other cities around the U.S, send out newsletters. After we performed a comparative analysis of newsletters published by other large U.S. cities, we found that:

Boston had the biggest number of newsletters (62 versus an average of 20).
Most newsletters limit the content to seven or less topics, typically creating one or two pages of content.
Sixty-five percent of cities are including less than eight links in their newsletters.

Designing a solution

We landed on a problem statement for our work. Content editors need a better way to disseminate City newsletters that:

follow industry best practices
maintain City design guidelines, and
remain accessible to all readers to improve the experience and flow of information to constituents.

We also flagged pain points we would need to address in our final design:

Keep it short (less than 5 minutes)
Create visual and content consistency across publications
Engage users through visuals rather than hyperlinks
Recognize that newsletters serve as a quick, informational interaction with constituents
Design should be responsive and accessible

After we identified the problem, it was time to ideate and brainstorm the solution. Through this process, we came up with rough sketches of layouts and then narrowed down useful components that we put in place as digital wireframes.

First, we created three templates offering various ways to address the pain points. We then executed a usability test to identify how users react to the new layouts. Our goal was to refine what components are the most successful at attracting a user’s attention.

Designing components one by one

To refine our initial design, we had users interact with different components in the City’s newsletters. During our research, we continued to iterate on the following sections of the newsletter template:

Text and image structure

We wanted to use a template that better controls the amount of content and overall length of newsletters. To that end, we designed three templates that would work to structure the number of characters using frames and other restrictions. We also took a mobile-first approach to design to ensure that content would be easily readable when stacked on smaller screens.

The second pain point we wanted to address was the number of hyperlinks in existing newsletters. Our solution was to design a simple button that draws readers attention and removes excessive clickable content and the length of the email.

During usability testing, we learned that users liked the look of the framed copy in Version 1 (left), but did find it harder to read than in versions 2 and 3. Moreover, text inserted in a picture sometimes does not get picked up by screen readers. This limits the accessibility of the content for people with visual impairments.

This led us to exclude version 1 and 3 and use version 2 (middle), which follows American Disability Act (ADA) recommendations.

The header

Part of our design iteration included usability testing on unique components within the newsletters. Below, you can see the design solutions for newsletter headers for both desktop and mobile.

City announcement banner

To create content consistency within newsletters and communicate announcements in an effective and efficient way, we designed a banner. In the graphics below, you can see iterations of the design, using the City’s existing iconography. This banner was designed to match existing banner styles used on Boston.gov with the goal of creating a consistent reader experience across newsletters and the City’s website.

As part of our work, we developed simple clickable graphics with text and button elements. We wanted to understand how users would interact with the different components. Testing showed that icons housed in squares with actionable copy and arrows to redirect readers to Boston.gov were most valuable to earn the user's attention.

Blue buttons are the main calls to action in City emails. We found that the blue buttons in the announcements banner diverted the user's attention away from the buttons in the main content section of the newsletter, so we removed them.

Recurring content banner by departments

The goal of using simple component icons was to shorten the length of the newsletter by compiling recurring content into simple clickable icons:

For each department, we noticed that many of their newsletters include the same content and resources as other departments at the City. We felt that a valuable solution to long bodies of text would be to instead create reusable, clickable icons.

By adding this type of section to City templates, you would:

save space and shorten newsletters, making them more digestible
create habits for readers as they familiarize themselves with icons, and
regroup all necessary information and resources into one spot across all City newsletters.

Final thoughts

By reducing the amount of text, and regrouping reader’s actions in each section into just one button in our design, we were able to make the newsletters scannable and readable in less than five minutes. Grouping information using iconography also enabled us to maintain the amount of information shared with the readers while keeping it organized and accessible.

We hope that this new design is a more digestible, organized way for the City of Boston to display information in its newsletters. We want Boston residents to have an experience that is consistent and clear, with easy-to-understand information.

General Assembly offers accelerated courses for in-demand skills in tech. The students we worked with were part of the Summer 2020 User Experience Design Immersive. Their work on the City of Boston’s newsletters was a final project that they completed over three weeks. The students who took part in the project were Marjorie Mesnis, Max Nagel, and Kateryna Zabrodska.