City of Boston
Designing a seamless newsletter experience for Boston’s constituents
Client
City of Boston
My role
UX researcher
UX designer
Project manager
Tools
Figma
Miro
Analytics
Background
With over 65 newsletters published by various city’s departments, Boston faces the challenge of keeping a visual consistency across the board.
Added to this is the variation of the reading experience for the constituents that the digital team is seeking to improve and transformed into a seamless accessible journey.
How might we help Boston improve the experience and flow of information to constituents while maintaining the City’s brand guidelines?
High-level goals of the project
Revisit the users’ experience
What is the current experience and potential pain point of Boston’s newsletters subscribers?
Design an effective template
How effective at communication is the current template used by the City? What parts can be improved?
Recommend best practices
What are the best practices that departments should follow as they are putting together their newsletters?
Research part 1: learning about readers’ experiences
Interviewing constituents was the first action we implemented from our research plan.
The goal was to learn about the reading habits and needs of Boston’s newsletters subscribers.
We extracted key comments from individuals and grouped them through an affinity map to find commonalities between newsletters readers.
Key insights
Opening rate
Readers will open the newsletter if the subject line is appealing to them.
Importance of visuals
Readers click on images & visuals rather than hyperlinks.
Short attention span
Readers spend little time reading and expect the content to be short.
Scannability
Readers scan the content of newsletters rather than reading each word.
Usability testing was a second method we used to discover users’ pain points when reading emails from the City.
We presented constituents with various recently published newsletters and had them weigh in the content, the layout and the information structure of the email.
Here are 2 samples of the newsletters to illustrate some of the layout variances observed by users amongst publications.
One quote from a user in particular showcases an information architecture pain point:
“I thought this was going to be all artists resources but then actually they are talking about voting and then the census and nothing about artists unless you scroll down to the end of the email.”
Pain points
Information hierarchy
Readers were disoriented by the quantity of information mixed into one email.
Accessibility
Readers found the text too small and visuals were not ADA compliant.
Call to action
Readers were driven away from the content due to the high number of links to follow.
Consistency
Readers were confused by the variances of layout used between the departments.
Lastly, we conducted an anonymous survey that helped us validate quantitatively some of the users insights we had gathered.
Our goal was to confirm expectations and needs from the point of view of the majority of readers.
Here are the main graphs showing the results to key prompts of the survey.
100% of participants spend less than 5 minutes reading newsletters
64% respond to clickable images more than hyperlinked text.
96% of readers scan content by headline text.
We synthesize the research insights into a persona representing the City’s constituents.
The objective was to consolidate the frustrations, needs and goals of the majority of current Boston’s newsletter readers.
The persona profile includes all the elements that helps understands who is the target user.
Some key takeaways from the profile:
Engaged citizen & enjoys receiving updates from city
Needs quick view of what is important to know now
Wants limited call to action
Prefers clear separation between city announcements and regular news
Research part 2 : discovering the opportunities and defining best practices
We audited the performance of existing newsletters through the compilation of various analytics and the review of heat maps.
The goal was to evaluate the performance of the newsletters as well as learn about the on-screen interactions of the readers.
Heat maps were one of the key method that helped us understand the attention patterns of the readers.
This sample shows how readers were particularly interested by a survey link that is in a 2-line paragraph rather than the link embedded in a longer body of text.
Key learnings:
High opening rates (over 30%): citizens are curious about communications sent by the City and show a will to engage.
Low click rates: clicks on hyperlinks embedded in text are very low. Once redirected, users are not coming back to the email for further readings, leading to a loss of information.
We studied industry best practices by creating several comparative analysis of the City’s newsletters with other major US cities publications.
We looked at content, layout and information architecture to understand effective standards and MVP to implement for the City of Boston.
Here is one of the relevant analysis allowing us to compare the layout of newsletters.
Note here how most cities are limiting the content covered and only include a small amount of hyperlinks.
Takeaways
Boston has the largest number of newsletters (65 publications for a US average of 20)
Most newsletters limit the content to less than 7 different topics, creating one or 2 pages of content maximum
65% of the cities are including less than 8 links
The 2-sided design challenge
The City of Boston is achieving decent opening rates with the current newsletters, but interactions are low and there is a loss of information and engagement.
How might we teach the Content Editors about best practices and helps them maintain engagement with readers?
Constituents have expressed pain points around accessibility, information architecture and consistency of structure between emails sent out by various departments.
How might we address the readers’ challenges and goals?
Translating research insights into design decisions
Our design solution is to create a new email template made of individual components. Each component will help:
Define a consistency in visual and copy across the 65 newsletters while following best practices
Organize the content between city announcements, department news and recurrent information while ensuring engagement with readers
Content Editors’ solution must-haves
Follow industry best practices
Maintain City design guidelines
Be accessible and responsive
Constituents’s design must-haves
Be short (less than 5 minutes)
Visually appealing and scannable
Engaging through clear call to actions
From iterative design to the final solution
We translated each insight into a component, and started with hand sketches and then wireframes. We drafted several options of templates based on existing newsletters.
For each round of design, we performed usability testings and improve the solution based on the feedback received.
The goal of this iterative process is to refine the solution as you are designing it, and adjust it to the users’ needs.
Here are some examples of digital iterations.
We tested with users to find out about:
the type of call to actions used
the placement of text
the City branding
the information structure
the scannability
the visuals
Using this iterative method, each component has been refined to solve either pain points or address specific needs identified during the research phase.
The header
Goal: inform the reader about who is sending the newsletters
Pain point: inconsistency of logo used and its placement creating confusion for readers
Solution: template will include both the department logo and the name of the department. Logo will be placed by default to the left, and be removed when viewed on mobile
The announcements banner
Goal: share important information from the City and the Mayor that are not related to the newsletter content
Pain points:
City announcements take away valuable space from departments when placed within the body of text
Users were confused when the departments and City’s information were mixed in
Solution: Create a banner dedicated to City’s announcements that would be included in all newsletters, thus creating consistency of communication across board while ensuring the important data from the Mayor is shared.
Visuals, Calls to action & body copy
Goal: inform subscribers about some of the department current events or actions
Pain points:
The body of text was heavy and condensed while readers prefer to scan quickly
Information shared were blocks of text on top of each other resulting in newsletters of over 3 to 4 pages
Numerous links were embedded in the body of text and users did not know which to follow
Solution:
Structure the body of text with one visual, one bolded title and a text of a maximum of 160 characters to peak the curiosity of the reader and render the email scannable.
Remove all links and replaced by a “learn more” button to redirect the user to Boston.gov website. The CTA also allow to reduce the body of text.
Recurrent information from departments
Goal: provide year long available resources to readers for each department
Pain points:
Most resources were included as lists of links which added length to the email
Users would drop of reading the email to follow resource links thus missing some details
Solution: use the City’s library of icons to create resources buttons to redirect the user to the appropriate page on Boston.gov website.
Passing on the final design and template guidelines
Here is an example of an existing newsletter that we redesigned using the new email template. This was done for several departments recent publications.
The goals of these quick redesigns were to:
introduce the new template to the team and show them how to structure their content moving forward
explain the goal of each component and how they could be adapted to their needs as content editors
educate the team about the City of Boston’s branding and how the template is help them stay on brand
Here are the final specs of the template that was transmitted to the digital team.
It contains all the measurements, typeface, and technical information to update the campaign manager and create the new template.
Final thoughts: next steps for Boston
The launch of the new template is currently in the works.
As a last step, we also shared recommendations for future projects, based on some of the discoveries we made during research.