top of page
osman-rana-xJueGJJHnWs-unsplash (1).jpg
City of Boston 2 (2).png

Redesigning The Newsletter Signup

Case Study Breakdown

Sprint Overview

City of Boston's Needs

My Role

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

Users need a simple and intuitive way to sign-up for their favorite newsletters and alerts so they can receive the information they care about while staying connected to the city.

I ran our daily stand-ups as well as the weekly meetings with the city. I delegated work that would play to my teammate's strengths. 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.

Tools

icons8-clock-50.png

Timeframe: 3 Weeks

icons8-tools-64.png

Tools: Sketch, Invision (Prototying), Google Forms, Pen & Paper

icons8-team-64.png

Team: 3 Person Team

Result Overview

  1. Updated the UX writing to be more directive towards guiding users to the newsletters.
     

  2. Added a "Newsletters and Alerts" section to the hamburger menu
     

  3. Updated the homepage to include a CTA for signing up for newsletters and alerts.
     

  4. Created a dedicated Newsletters and Alerts page
     

  5. Allowed users to sign up for multiple newsletters at once

Breakdwn

Case Study Breakdown

Research & Results

Research Method

We utilized 3 different research methods:

  1. An initial user test.

  2. In-person interviews:

    • Eight (8) newsletter readers

    • Two (2) city departments​

  3. Online survey with current subscribers.

Results Overview

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

1. User Test #1

Our initial user test gave participants 3 tasks:

Task 1

Sign up for emergency alerts

 

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

Sign up for the “Arts and the City” newsletter

 

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

(click to enlarge)

What does this mean?

Users struggled to navigate Boston.gov. With the majority of people meandering around the site until they stumble on the newsletters. Once found, users ended up signing up for and multiple newsletters. To improve the discoverability of newsletters, a dedicated and intuitively placed way of accessing them is needed.

Personas

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

old-lady-vector-1019741.png

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 created one dedicated page that housed all the newsletter and alerts that 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.

(click to enlarge)

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.

​

  1. Using the Stay Connected button​

  2. Signing up for Newsletters

  3. Signing up for Alerts

​

Below are our user flows.

User Flow 1:
Signing Up For Newsletters
cob_flow_1.png
User Flow 2:
"Stay Connected" Path
cob_flow_2.png

(click to enlarge)

(click to enlarge)

User Flow 3:
Signing Up For Alerts
cob_flow_alerts.png

(click to enlarge)

(click to enlarge)

Sketches

Home Page
Page 2 Sketch.jpg

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
Page%203_edited.jpg

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
IMG_9618.JPG

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
IMG_0728.JPG

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.

(click to enlarge)

(click to enlarge)

(click to enlarge)

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.

First wireframes.png

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

Sign up for emergency alerts

 

Average completion time: 20 Seconds.

​

(Down 3m:31s)

Task 2

Sign up for “Arts and the City” and “Analyze Boston” newsletter.

 

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

(click to enlarge)

Iterations

We began making changes based on our user test feedback and re-testing the newest versions.

​

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

low to mid 1.png

(click to enlarge)

Emergency Alerts
low to mid 2.png

(click to enlarge)

 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
mid to high 1.png

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.

(click to enlarge)

Final Usability Test

Our final usability test kept the same tasks from the second one and once again, we saw some fantastic improvement.
 

We also noticed that the change in visual cues improved peoples experience overall!

Task 1

Sign up for emergency alerts

 

Average completion time: 20 Seconds (remained the same)

Task 2

Sign up for “Arts and the City” and “Analyze Boston” newsletter.

 

Average completion time: 58s (-18s from previous)

Task 3

Locate the West Roxbury newsletter.

 

Average completion time: 36s (-30s from previous)

The Growth is Clear!

Initial Usability Test
Screen Shot 2020-07-27 at 4.21.53 PM (2)
Second Usability Test
Screen Shot 2020-07-28 at 4.01.42 PM.png
Final User Times
Screen Shot 2020-07-28 at 5.54.20 PM (1)

(click to enlarge)

(click to enlarge)

(click to enlarge)

Take A Look At Our Final Product

bottom of page