City Of Boston

Redesigning The Newsletter Signup

The City of Boston hosts over 75 different e-newsletters, each giving information on different aspects of the city and its happenings. Some are essential to the current resident’s day-to-day while others are more fun and event-based.

The City of Boston wanted our team to research their newsletter signup process and overall customer journey of signing up.

3 Week Contract

3 Person Team

Sketch

Invision (Prototypeing)

Google Forms

Pen & Paper

My Role

I was both a UX/UI Designer and Project Manager for this contract. As the PM I ran our daily stand-ups as well as the weekly meetings with the city.

I also delegated work that would play to my teammate's strengths. This meant keeping track of our daily "To-Do's" and keeping the team on schedule.

Here are some other roles and tasks I took:

Conducted 4 user tests and 4 in-person interviews.
Synthesized data and detailed findings.
Assisted in drafting problem and solution statements.
Sketched and Wireframed ideations, and designs.
Upgraded main page, hamburger menu, header, and newsletter page to high-fidelity.
Iterated newsletter page designs after user testing.

Research And Results

Method

We utilized 3 different research methods:

An initial user test.
In-person interviews:
1. 8 newsletter readers
2. 2 city departments
Online survey with current subscribers.

Results Overview

Our research found that people had difficulty finding where to sign up for newsletters. This issue was present across the board. The issue wasn’t physically signing up, it was locating where to sign up. However, the site was quite learnable!

1. Initial User Test

Our initial user test gave participants 3 tasks:

Task 1

Average completion time; 3:41.

Task 1 Results

Users couldn't navigate the hamburger menu
Users were confused by the “Stay Connected” field.
Every user found it via the bottom navigation.

Task 2

Average completion time; 2:38.

Task 2 Results

No user took the same path to get to the Arts and Culture department page.
Only one user found it in “Departments”.

Task 3

Manage your Subscriptions:

Average completion time 2:50.

Task 3 Results

Users often asked “is there’s no account page?” and “where can I sign in?”.
Users would time-out.
The user that found it quickly had known that she usually manages her subscriptions through her email.

2. Interviews

We interviewed a total of 10 different people; Eight (8) of the interviewees were newsletter subscribers and two (2) employees from the Arts and Culture Department and the Mayor’s Office of Immigrant Advancement (MOIA).

I interviewed 3 of the newsletter subscribers and lead the interviews for both departments while my teammates observed and notated.

Newsletter Subscriber Takeaways

Users wanted to signup for multiple newsletters on the same page.
Some users would back out of signing up if they could not quickly access the information
Users were split on whether they enjoyed browsing versus purposefully finding the newsletters.
Users wouldn’t sign up if they were asked for too much information.

Department Interviews

People struggled to find the newsletters was our number one answer.
If the department has more than one newsletter, people were likely to sign up for both.
People do not scroll down far enough to see newsletters.
Cannot accept distribution emails, leaving out important organizations

3. Online Subscribers Survey

We placed a survey into the City’s outgoing newsletter to reach current subscribers. Our survey received 96 responses, all of which gave us fantastic insight.

An overwhelming majority of subscribers found the newsletters right through Boston.gov.

When we asked the departments about this finding, they informed us that they do not advertise on social media. The people who “found” the newsletter on social media, still had to navigate Boston.gov to sign up.

Screen Shot 2020-11-04 at 5.53.56 PM.png

What Does This Mean?

Our research showed that users struggled to navigate Boston.gov. With the majority of people finding newsletters through Boston’s website, and wanting to sign up for multiple newsletters, a dedicated way to access newsletters is needed.

Let's Meet Our User, Rose!

Bio

Rose likes to subscribe to newsletters to receive the latest information on her city. She isn’t too tech-savvy and isn’t on any social media platforms. She relies heavily on her email for news updates because she does not want to provide personal information.

Pain Points

Struggles to locate where to sign up for newsletters.
Unable to find where to sign up for alerts in her area.
Wouldn't sign up if it asks for too much info

Wants

Needs the sign up to be eye-catching and obvious
Wants one location for all sign ups pages.
Wants to provide the least amount of personal information

Problem Statement

Rose needs a simple and intuitive way to sign-up for her favorite newsletters and alerts so that she can receive the information she cares about while staying connected to her city.

Design Process

Rose's Key Needs

Rose needs an easy-to-find, intuitive way to sign up for her favorite newsletters and alerts.
Rose wants to be able to sign up for multiple newsletters at a time.
Rose does not want to have to give up too much information.

How We Addressed Those Needs

We thought creating one dedicated page that housed all the newsletter and alerts would allow for a quicker and more effective experience.
From our initial usability tests and heat mapping, we knew that the page needed to be accessible from the hamburger menu or close to the top.
Keeping the information needed to sign-up to a minimum.

User Flows

With the idea to build a dedicated page to house all the newsletters and alerts in mind, we started designing by building out the user’s path to success and what that would look like.

Using the Stay Connected button
Signing up for Newsletters
Signing up for Alerts

Below are our user flows.

User Flow 1: Signing Up For Newsletters

User Flow 2: "Stay Connected" Path

User Flow 3: Signing Up For Alerts

Sketches

Home Page

From our research, we knew the newsletters page needed to be placed near the top for quick access.

We changed the “Stay Connected” email input into a button. We though a button that brought people to the new page would have a greater effect.

Newsletter Page 1

The new newsletter and alerts page would be set up a lot like the current pages. The alerts section includes a button to understand what alerts the user would receive.

Below the alerts, is the newsletters section where Rose would be able to see every newsletter Boston offered.

Hamburger Menu

We also put the new newsletter and alerts page inside the hamburger menu so that the Rose can get to the newsletters from any point of the site.

Newsletter Page 2

When scrolling down, the jump links would become the sub-header, allowing Rose to quickly move back and fourth between sections.

The newsletters would have checkboxes next to their images and a filter system would be to the left of that.

Wireframes

We moved our initial sketches to wireframes and upgraded their fidelity to begin our second round of user testing to see if the new page improved on times anymore.

We did not change much from Boston's initial site. What our first wireframes did utilize is a grid system to organize all the different newsletters into their respective categories. It allowed users to filter, select multiple newsletters, edit, and see samples of what the newsletter looks like.

We also made the change in the "Stay Connected" button and moved it up in the hierarchy of the site. We knew we needed to re-design the hamburger menu to accommodate the new page.

Usability Test #2

On the second usability test, we switched up the last two tasks from our initial test. The tasks now were:

Task 1

Average completion time: 20 Seconds.

(Down 3m:31s)

Task 2

Average completion time: 1:16

Task 3

Locate the West Roxbury newsletter.

Average completion time: 1:06

Results

Overall our users times greatly improved from the initial test. But this success was not without its learning curves.

People thought the pages were too long and it caused them to doubt if they were on the right path.
When entering their email and hitting “next” there wasn't enough visual cues for them to know that the checkboxes had appeared.

Screen Shot 2020-07-28 at 4.01.42 PM.png

Iterations

We began making changes based on our user test feedback.

Home Page

One thing we did to combat people not finding the “Stay Connected” button was to move it up closer to the top so it was right underneath the “Common Resources” section

Home Page

For the Alerts page, we changed it to ask for more information. After speaking with the city, they informed us that they found the information useful in enhancing the overall alerts system. Knowing this, we included different fields to gain better demographics.

Newsletter Page

Our final batch of iterations was on the main newsletter page itself.

Addressing the issues with length began with us deciding to turn the layout into an accordion-style menu for each department. Each menu will have a corresponding number of how many articles are in the folder and how many you have selected.
To improve the visual cues, we created a blue border that would surround selected articles as well as changing the wording from “Add” to Added!”.
We replaced the instructions with a progress bar.
Finally, we removed the need to input your email first, and instead, placed it all the way at the bottom for your final submission.