CITY OF BOSTON
HOW-TO REDESIGN

 

Overview

The City of Boston's new website was by and large a great success. Unfortunately, many users struggled with in-page navigation on How-To Pages. I worked directly with the City of Boston's digital team to solve this problem, which we accomplished through extensive community outreach and user testing. Read the City's article on Medium or my summary below.

 
 
 
 

Team

Michael Greig
Cass Hebert
Amanda Reiter

Duration

3 weeks

Tools

Sketch
InVision

 
 
 

My Role

I took on a leadership role, guiding scope, strategy, and team meetings. I also helped with user research and testing, and led organizational outreach and recruitment efforts.  

 
 

 
 
 

background

 

In 2015, the City of Boston worked with IDEO to redesign their website. (Read IDEO's write-up here.) After a successful transition, the city has been working to iron out the remaining kinks and respond to user feedback. They had some idea that How-To pages were not living up to their potential, and that some users struggled with them, but not who or in what way. They recruited my team to dig deep and validate their assumptions, as well as explore possible solutions. 

 
 
 

DISCOVER

 

How-To Pages

How-To pages give essential information on a broad range of topics, like how to pay a parking ticket or apply for a birth certificate. We needed to understand how they were formatted and used to know where to look for issues. 
 


I created documents like this for multiple How-To pages to get a high-level understanding of their layout. The city had their own suspicions that elderly users might struggle with tabs as a content selector, and we also noted that the information hierarchy might be a useful lever to adjust. 

 

Finding Our Users

We knew we needed to make a concerted effort to find the users who struggled with these pages. Because this was a government project, it was essential that we engage with as many varied groups as we could. While my team members went to City Hall to speak with citizens, I connected with various community organizations to set up meetings and usability tests.

logos.png

This included a pro-bono law clinic, a non-profit which runs technology classes, and a volunteer organization which works with the elderly, among others. I hoped that by connecting with these organizations, we could find technologically disenfranchised users, and solve the problem through inclusive design. 

 

VALIDATE

 

First things first, we needed to confirm our suspicions that 

  • Tabs are difficult for some users, particularly elderly ones
  • Information could be better prioritized

Connecting with the organizations previously mentioned, as well as engaging our immediate networks and recruiting users on the streets, we tested the original site with 15 users. We confirmed our hypotheses, with the additional insight that almost everyone struggled with tabs to some degree. On top of this, people generally scanned content and missed important details.
 

Users jumped straight to the center, missing essential instruction
 

Scanning Example Mobile.png
Scanning Example Mobile 2.png

On mobile, the selector looked like a simple divider, and almost everyone skipped over it
 

 

CREATE

 

After evaluating the current design, we set to work designing a more intuitive alternative to tabs.  We tried various methods to generate ideas, including

  • A design studio exercise
  • Printing, disassembling, and rearranging the current design 
  • A participatory design exercise targeting the layout of information

We knew we needed to make a more noticeable way to select content, but the other major insight we gained from these exercises was the idea of progressive disclosure.  We needed to be cognizant of cognitive load, and prevent users from feeling overwhelmed. 

 
 

With this in mind, and after reviewing best practices, we settled on accordions. This made sure users chose their content first, and showed them only the most relevant information. 

 
Accordions Example.png
 
 

Test

 

Immediately, we ran a simple paper prototype test among our colleagues to gather initial feedback. We were able to test accordions as well as a simpler version with tabs as floating buttons with 15 people.

paperprototype.jpg

Nearly everyone preferred the accordions and used them without issue, so we moved on to the next stage of testing.

Once again, engaging with our networks and community contacts, as well as recruiting users in public places, we were able to test with 29 users. 

A breakdown of users we tested by decade of birth

All in all, we discovered that virtually every user understood and used accordions without problem. In addition to this, there were multiple small changes which can be viewed in our annotated wireframes below. To call out a few, we

  • Emphasized "More Resources" to encourage continued exploration of useful content on the site
  • Put general query contact information at the bottom to prevent users from confusing it with specific action-oriented contact info
  • Put crucial information at the point of need, within specific steps in the process
 

 

OUR REDESIGN

 
 
 

Outcome & Reflection

 

Glowing Reception

The Digital Team received our work very well, and invited us to present at city hall. Not only did it it validate a lot of internal assumptions, the research and testing we did also served as a useful tool in internal, interdepartmental discussions. We were able to get out and interact with citizens in a way that was difficult for the busy team. 

 

Learnings and Insights

With such a tight timeframe, it was hard to be thorough but also deliver. Throughout the project, I learned to set up stricter timeboxes and prepare agendas for our meetings and activities. It was a challenge to strike the balance between giving everyone enough time to work through their considerations, while also staying on task to meet deadlines, but ultimately we made it work and maintained our group harmony as well. 

 

Next Steps

The city invited us to continue working with them to reevaluate their budget site. Stay tuned for future updates on our work.