Dissecting the layout and readability of “How-To” pages for boston.gov’s responsive site.
Parking Tickets & Usability of "How-To" Pages
The City of Boston wanted to know why people were still using analog methods, such as going into City Hall, mailing, or calling, in order to complete tasks they could online. Our goal was to figure out why, and then provide a solution in the UI. Timeframe: 1 month
Sketch and InVision for digital prototype
Paper prototypes for lo-fi mockups
Axure for flows and information architecture
Google apps for documentation and sharing
- Client liaison
User interface and interaction design
Visual design and adherence to established brand guidelines
IDEO just redesigned boston.gov. So, what were we doing?
IDEO's redesign of boston.gov was a great success. It is usable, modern, welcoming and visually appealing, so when we were tasked with redesigning the "How-to" pages, we felt a challenge.
As designers, we often redesign bad experiences and outdated and unusable systems and interfaces. Surprisingly, that can be the easy part. What's that old saying? Something like...
If it ain't broke, test and iterate anyway, because design work is never truly done? - an old design thinking proverb, probably
Municipal design: not your average user, but actually, your average person
In human/user-centered design, one of the very first stages in the process is to define the user and the problem. Usually, we do research and user interviews and come back with a full persona if we have the time, or a proto-persona if we don't.
The City of Boston and every other government digital team faces a different challenge when it comes to defining the user--if you breathe anywhere inside the city, you are the user. Anyone and everyone could and probably will interact with boston.gov at some point.
That means we as designers were not optimizing for any particular user, rather, we were optimizing for inclusivity. That was our guiding principle during the project, and we made sure that we sought out participants in our interviews, studies, and tests who were marginalized or would be less technologically proficient for whatever reason. We didn't want to leave anyone behind.
That is what's beautiful about civic tech. Making processes accessible and inclusive not only makes the design better, but it makes people's lives better. This is why for this case study I choose not to use the word "users," instead, I use the word "people."
People are not reading, they are scanning. Because of the layout of the page, specifically the use of tabs and placement of sections such as contact information, they are missing important details and making errors.
Restructuring the general layout for better visual hierarchy to accommodate user behavior and incorporating concepts such as progressive disclosure and point of need by replacing tabs with accordions will reduce errors and help people complete their tasks without frustration.
We started our discovery phase with generative research, speaking to a number of people at City Hall to get a sense of their frustrations and see why they were completing tasks in person when they could do them online.
Though we heard some good stories, this type of research wasn't helping us find our problem. We decided to switch to evaluative usability studies, observing the paths, errors, and frustrations people had on the site.
After gathering all our data, we came together and synthesized the information by affinity mapping. That was a bad idea. We learned affinity maps work best with data gathered through generative research.
Once we lined up every single user and task flow next to each other on the board, we discovered our main issues: scanning and selective attention. You can read about the concepts in our best practices document that we created and passed onto the City's digital team.
ideation: participatory design for the win
This was my favorite part of the project. We conducted four ideation exercises: design studio, cut and paste (literally), fill in the blanks, and whiteboard visualizing.
During these exercises, we came up with solutions that we tested with paper prototypes based on two important concepts: progressive disclosure and point of need.
Testing for accuracy, iterating with care
Of all the tools, usability testing was the most helpful and effective during this project. It was important that we had clean data, so we used the same tasks as the usability studies on the original site and we tested one element at a time, to ensure that we knew which part of the design caused what feedback or outcome.
Additionally, it was important to us that we were inclusive in our studies, especially with people of different ages and people who were technologically disenfranchised. We engaged in participatory design activities with organizations such as TechGoesHome, Little Brothers Tech Cafe: Friends of the Elderly, and pro-bono law clinic Harvard Legal Services Center.
small, simple changes; big, meaningful impacts
We iterated on five areas (the subheading, tabs, placement of information, more resources section, and contact information), but the main changes we made were at the top of the page.
We took the subheading ("You have four options to pay the fine") out of the banner at the top of the page and put it at the very beginning of the content, left-aligned as directions. We also changed the tabs to be accordions. You can see those two changes below, or check out the full prototype on InVision above.
We made those decisions because people were blowing right past the entire banner, which was problematic--they were missing the tabs, and subsequently, all the information they contained.
Check out the prototypes and annotations!
Our focus was on the desktop site for two reasons:
- We found users complete tasks found on "How-To" pages on their laptops or PCs
- Boston.gov is completely responsive
We used InVision in order to rapidly prototype with something clickable. I also annotated wireframes to hand off to the director of design on the Digital Team.
Presentation & Implementation
We presented twice: once to the clients in class and once to the entire Digital Team and other government employees at City Hall. The Digital Team was happy with our work and invited us to keep working with them.
To wrap up the project, we gave them some next steps on implementation.
Without the accordions, the rest of the design would cause issues. In order to effectively implement the design, we suggested the tabs be converted to accordions first. Then the rest is more flexible.
The last suggestion, though, would be to educate people at City Hall and around Boston about the uses and functions of boston.gov, as well as continue with the connections and relationships we opened up with some of the local organizations where we did usability studies. It would be good PR for the City to get in the field and work with folks hands on. More importantly, when we engaged in participatory design practices and usability studies with them, it meant a lot to them to be included and considered.
Inclusive design is the best design, period.
What I Learned
If it ain't broke, test and iterate anyway.
Every design decision has an implication, and even seemly small changes can make big impacts. Our redesign was heavily tested and has a lot of thought behind each change.
Even if there isn't enough time to design something completely new or radical, there is always enough time to make a difference in some way.