MassLegalHelp.org

Information Architecture

Overview

Project Objective

MassLegalHelp.org, a free public law library website for the state of Massachusetts, is a content-rich site that had become very difficult to navigate due to its unwieldy information architecture. Wordy page titles, excessively deep section hierarchies, and text heavy article pages made it a chore for the user to get the information they might need. My team was tasked with revising the site's architecture to more closely align with users' needs.

My Role: I worked with my team on a content audit, SEO and accessibility review, card sort, revised sitemap, persona development, journey map, and wireframes. I also designed the final deliverables and helped present them to the client.

Case Study

Competitive Analysis

We reviewed MichiganLegalHelp.org for its straightforward information architecture, and Gov.uk for its strong organization of a directory-style navigation.

Audience

We developed four personas based on the information we had from the client. Research showed that most people visit the site in crisis and need information about the law to protect themselves or their loved ones. Many of the users are low-income, have low-literacy levels and many take advantage of accessibility features.

Constraints

MassLegalHelp.org has very limited resources behind it, so our recommendations needed to be feasible for one or two people to implement and manage. We had to consider our audience as well, since many of the site's visitors have low-literacy levels and need fast and easy-to-access materials in a crisis.

User Research: Performing the Card Sort

We set up our card sort using the Omnisort website. We had 58 cards, one for each of our proposed page and section titles. We recruited 15 participants who completed the online card sort activity. From the test, we recognized a disconnect with some of the legal language (i.e. “asylum” was commonly misunderstood) and contextual confusion (i.e. “frequently asked questions” and “legal protections” were unclear page titles unless you saw them within the context of their section).

Our revised sitemap trimmed the site's sections from 11 to 9.

Design Process & Solution

We revised the site’s architecture by creating a refined sitemap. By trimming their top navigation from 11 to 9 sections and grouping topics together in the secondary navigation, we were able to greatly simplify the site. For the minutia, we suggested an alternate “content type” system, rather than every article having its own page. We also suggested creating additional accessibility features and keeping them in one place, creating pages with a consistent header structure (h1, h2, h3) and more content to support SEO.

Takeaway

This project showed me the importance of collaboration and feedback. It’s rewarding to develop products with others’ contributions. Sharing ideas and brainstorming with each other helps create a final product that is greater than each of us could have achieved individually. In this project, I learned a lot about SEO and greatly enjoyed designing the wireframes. I also learned Omnigraffle, which has quickly become a favorite prototyping software of mine.