New user-friendly update to our how-to pages released

In case you hadn’t noticed, we recently made a major update to our how-to pages on Boston.gov. What’s a “how-to” page? This type of content (for example, “how to pay a parking ticket”) breaks down a transaction or process with the City in a step-by-step manner. They’re full of useful information and walk you through how to get something done with the City.

Unfortunately, the initial design was hard for folks to navigate. We relied on a “tabbed” layout, where critical details related to the topic were set up in individual tabs on the page. A user would click on a tab depending on their situation to find the information they needed.

We knew anecdotally that folks were missing the additional tabs at the top of the page, but we didn’t want to make any changes based on assumptions. So, way back in 2018, we worked with a General Assembly user experience cohort on a research project focused on our how-to pages. 

Working with General Assembly

Thanks to the efforts of the General Assembly group, we were given some eye-opening research about our how-to pages on Boston.gov. The team found that the way information and contact details were displayed, along with the location and placement of the tabs and the tendency for people to scan websites, was causing problems for folks.

Ultimately, the group found that when the full page was presented to users, they were most likely seeing something like this:

A large portion of the page is being completely ignored, and most of the users visiting the site never became aware of the other options for paying a parking ticket. To address these problems, the General Assembly team designed a version of our how-to pages using a “drawers” layout (they called them “accordions”) that leaned on progressive disclosure.

This approach moves rarely used features or secondary information to a secondary screen or secondary section to make applications easier to use. By displaying the tabbed information in drawers, those details were hidden from users until they were ready to click and see it. This layout forced folks to slow down, reduce their scanning, and read what was in front of them.

A more intuitive how-to page

We’re excited to announce that we’ve officially relaunched our how-to pages in this new, “drawers”-focused layout. If you visit any of our how-to pages on the site, you’ll see that we’re now leveraging progressive disclosure. Instead of information being hidden in tabs at the top of the page, you can see your options and dig deeper by clicking on the “drawer” that applies to you:

Since launching in late August, we’ve seen huge jumps in engagement on our pages. In previous heatmaps with the tabbed layout at the top, most users were just engaging with whatever the first “tab” of the how-to page was. They would often click on whatever “online” button was available, and the user behavior was lining up with the findings of the General Assembly cohort we worked with.

In the new layout, however, our heatmap lights up with user interactions. Folks are clicking through all of our tabs, and they’re even scrolling down further through the page, finding more useful information related to the topics they’re researching. Below, you can see the heatmaps and stats of our desktop users for the month of September for two of our most popular pages, “How to pay a parking ticket” and “How to get a resident parking permit”:

What happens next?

While this iteration of our how-to page is now up on the site, we’re by no means done. We’ve caught a few small bugs since launching that we’re planning to fix. And, just like the rest of Boston.gov, we plan to continue to make updates based on your feedback.

If you see something about our new design that doesn’t work for you, or if you have suggestions for further improvements, please let us know! You can email your comments to feedback@boston.gov and we’ll get back to you as soon as possible.