City of Boston's "How to" Guides

— CHUX Project —

What started as an academic project evolved into an ongoing partnership with the City of Boston's Department of Innovation & Technology (also known as the Digital Team) for two UX research projects. A couple of years earlier, the City had hired IDEO to design their website, and they did a fantastic job. However, the Digital Team continued to receive feedback about users struggling to complete tasks and locate information. They brought us in to focus on a high-traffic area. And the most visited page on the entire government site?

The parking ticket page. A driver's favorite place on the internet.

The project began as an evaluative research effort to help the average citizen navigate boston.gov more easily, and it revealed an information architecture and content design issue. I was on a team of four, and we conducted dozens of research sessions and usability studies trying to uncover ways to bring more clarity and usability to informational and instructional guides on the City's main website, boston.gov, and budget site, budget.boston.gov. After the research part of the projects, we analyzed data, drew insights, and conducted brainstorming sessions to define suggestions for the Digital Team.

Problem

Bostonians get confused and cannot complete common tasks online, specifically paying parking tickets, so they have to waste their time waiting in line physically at City Hall or on the phone. This is a problem for the City, because they then need to spend their resources helping people do things that they could do on their own. When a government needs to allocate resources to repetitive and unnecessary things, it slows down the bigger, significant work it does for their constituents.

Field research showed that on the page to pay a parking ticket, people were scanning, not reading. Faced with that reality, we discovered the layout and content design did not drive the user to the right parts to help them complete their task, specifically three problem areas:

• Subtitle: the "you have four options to pay the fine" directive was hiding in the header because the text got lost among the pattern and the color contrast was not high enough.
• Tabs: similar to the subtitle, the tabs were being completely skipped over—partly because they were in the banner area, causing banner blindness, and partly because the text was the same color as the banner.
• Call to action: the main CTA under the online tab was a text link that people skipped over without reading.
• Important details location: crucial information about the payment process was all the way at the bottom, and less important details, like contact info, was at the top.

Image descriptions below (first: top of page with the original page layout that shows the subtitle and tabs in the header banner and the text link CTA; second: the whole page)

Solution

The solution was simple, but deeply tested and validated with 59 different users. We suggested accordions, a button, and content reorganization. Why?

• Progressive disclosure: we hid most of the walls of text that users skipped and scanned behind organized accordions to force the users to slow down and read what's in front of them.
• The F shape: we leaned on the fact that the F shape is how humans tend to look at webpages in English by putting the secondary important things in their natural eyeline, along that formation. We plucked the directive out of the header banner and placed as the first piece of content in the page.
• UX copy: we put the contact information at the bottom of the page, at the very bottom of the F-shape, under the heading, “Still need help?” This location and language combination helped empower our users. They were able to take care of their tasks and transactions without having to use that contact information. That language tells users that everything they need is right there on the page, they just need to look.
• Point of need: the most important parts necessary to complete the tasks were being camouflaged in the banner. Due to banner blindness and selective attention, users were scrolling right past them. Accordions gave users choice and simplicity. By making them click on a specific accordion, they are given the information they need at the time they need it.
• The "pop": the actual payment portal was displayed as a text link that people were not reading or skipping right past. By turning that into a button—and the only button on the page—we put it right in the user's face that the button is where they need to be.

Image description below (first: the whole page with the suggested changes; second: the online accordion open with that button CTA)