Welcome to Part III of our three-part series on our design process of the LawHelp Refresh design.

In Part II we discussed how we structured usability testing and how we recruited participants. If you haven’t yet, check out Part I and Part II. This week we will look into our results including both what went well and what failed. Finally I will share our next steps and another exciting upcoming project on LawHelp.

Again I want to offer a special thanks to Lagniappe Law Lab who maintains the content on LouisianaLawHelp.org. They also provided a lot of helpful feedback on the design and its usability. You can check out the new LawHelp Refresh design on sites like GeorgiaLegalAid.org, WashingtonLawHelp.org, and LawHelp.org/HI among many others.

Part III

It was inevitable that we would run into numerous issues when testing such a large-scale redesign. We did indeed surface a list of reiterations to carry out but the overall user experience proved to be much more successful than I had anticipated. When I test designs, I go into usability testing eager to surface the problems. Being proven wrong is super valuable and saves you lots of time and resources. This left me rather surprised that so much of our goals proved successful in this beta site.

The full analysis was quite long (18 pages long) and so I’ll spare you all the finer details and share these highlights from our results:

1. Intended user pathways
2. Graphic design engagement
3. Information hierarchy
4. Labeling confusion
5. Other issues

Intended user pathways

The most encouraging finding was that all users successfully followed the pathways we had intended. No users got lost trying to navigate through the site. The multiple pathways we included to important destinations were utilized well and we never ran into a situation where a user was stumped and would just abandon the site. This was consistent with the mobile experience too.

The way most LawHelp sites are structured aims to point users to three main areas to find solutions to their legal issues:

1. Resource articles and tools — These are organized on the homepage into various legal topics and often include interview tools and links to legal forms.
2. Legal aid referrals — Our Directory tool organizes a listing of civil legal aid organizations in that state that users can contact to get free representation and consultation.
3. Search — A typical keyword search tool to surface site-wide results.

Although this strategy varies across our network of state partners, there is a general theme that goes something like this:

First, try to help users find answers themselves through resources and tools. These are articles, links to external content, and tools such as interviews or legal form generation.

Second, when a user needs more than written information and needs to take the step to talk to a human, help them find an appropriate organization to refer them to.

Third, when they haven’t found their answer, surface relevant information based on keyword search. Keyword search is particularly useful when the user has a very specific need.

In the old LawHelp design, these user pathways were not always distinct. Some users didn’t even realize there was a search bar, others leaned heavily on the search bar because they found navigating the site wasn’t very easy. The legal topics on the homepage weren’t formatted as cleanly as they could be and didn’t encourage engagement.

Check out this screenshot of the old design on LouisianaLawHelp.org. You’ll notice the overreliance on text, the alignment issues on legal topics, and just in general how nothing screams “click me!”

With the new design, we successfully struck a balance where users seemed to first want to interact with the legal topics and surf the resources under those topics. After reading up on their issue, they went to find a lawyer or organization to speak to. Finally, if they felt they couldn’t find their answer, they utilized the Search bar to enter keywords.

This exactly how we wanted it to go which was exciting! Since we launched the new site, our Google Analytics seems to back this up where legal topics represent the bulk of user pathways.

Graphic design engagement

How did we get users to follow those pathways as intended? We made use of a far more compelling visual design. The way we contained legal topics into cards, utilized color, and inserted hover-over animations played a big role here. Check out this gif of the new design in action.

There’s a lot of improvements going on here. The use of color is much bolder. The use of hover-over animation and color changes is entirely new. We use contained cards to separate information better and push users towards making selections.

It was abundantly clear during testing that users were much more interested in engaging with the design. We decided to offer six color palette options so that states can better differentiate their site from others. We made sure to achieve at least AA WCAG 2.0 contrast standards, but usually AAA in most places. All six palettes offer strong use of color while allowing for different site personalities.

Information hierarchy

When we say “information hierarchy” we are talking about the way information on the site is organized and structured. Does it make sense to users? Can they differentiate the difference between a topic and subtopic? Can they take an issue such as eviction, and use navigation to find relevant information or do they get lost and have to rely on the search bar?

We found that in all areas of the site that the information was easily accessible and interpreted by users. Topic-based navigation was highly successful, users were able to differentiate between primary and secondary information (such as resource content vs sidebar links). Once on a resource, we found that resources that made use of various organizational features performed best.

For example, Louisiana’s Hurricane Ida resource utilizes a tabbed layout including the FAQ module. This gives users tabs to navigate through and sort out information. The FAQ module offers a pleasant experience in finding answers to your specific questions. The FAQ module is great for frequently asked questions but it works for any way you want to organize a list of information. Such as listing out county-specific information or outlining each step in the process of obtaining a name change.

Labeling confusion

One larger issue we surfaced was that users found some titles and labels difficult to interpret. The biggest example of this was in the Legal Aid Directory. This is a listing of all civil legal aid organizations in the state where users can search and peruse organizations to contact. Many LawHelp sites label this in the navigation bar as “Find Legal Help.” Initially this was to simplify the language and make it more accessible to understand.

Unfortunately, in testing, we found that this was too simplified. Users already see themselves on this site to find legal help and so having a main navigation item with that label was too vague. We are currently using one LawHelp site to test alternative language and see if engagement increases. Legal Aid Organizations or Find a Lawyer are possible solutions.

The other tool users couldn’t interpret was the Quick Exit feature. This is a common tool in the field of intimate partner violence (AKA “domestic violence”) where some users are seeking help under duress, worried that an abuser may walk in on them trying to find help. The user can then click on this big red button in the top right corner to quickly exit the page and switch over to a generic search engine site.

No user tried to use this feature and we had to ask them specifically for their interpretation of it. Users thought it would close the page, clear their search filters and language settings, or return to the homepage. What’s more is they couldn’t figure out why that search engine page loaded when they clicked on it. Fortunately, since no users interacted with it, we aren’t worried about much confusion there. It’s also a commonly known tool for people seeking help around Intimate Partner Violence (IPV)/Domestic Violence (DV) so we are optimistic that it will be understood by users who need it. We do have a hover over tooltip that explains how it works. Some other websites who have similar features use a pop-up to inform users of this feature when they reach the site. Pop ups are ignored immediately by the vast majority of users so we haven’t yet gone down this route to increase discoverability.

Other issues

Finally, we had a number of other smaller issues arise. We had tried diverting from the industry standard mobile menu button with the three horizontal lines (hamburger menu) to try out something that simply said “Main Menu.” This was a total failure so we quickly reiterated this back to the hamburger menu and it then performed very well.

Before

After

We have a feature for allowing users to change subtopics while perusing resources under a subtopic. Example: Looking at results under Housing → Eviction and then wanting to switch to Repairs without needing to use the main navigation menu. 0% of users utilized this so we are currently reiterating on this. It appears to be too well hidden. The main information on the page is to the right and the tool is in the mid-upper left. This hasn’t been an immediate concern because users successfully switched subtopics using the main navigation without complaint. We are in the middle of redesigning this now and aim to move this tool closer to the content and make it look more like a breadcrumb.

Finally, we found that users had trouble discerning the meaning between “Content Detail” and “Read More” when looking at listings of resources. The difference between the two is that “Read More” will lead you to a resource on the site where you can read a whole article on this issue. “Content Detail” is a button associated with an external resource. Clicking on that title will send you directly to an external resource. Clicking on the “Content Detail” button will send you to a short internal page that describes what kind of external content you are about to head to.

Users didn’t show any concerning issues here though. We have found that users are so used to clicking around to figure out how things work, it’s very unlikely that we will see users throw up their hands and say “well I don’t know the difference between those so I am going to leave this site now.” Sometimes labels don’t need 100% success in interpretation, they just need to be navigable.

Next Steps

So what did we do next? First we conducted a detailed analysis of the research findings. We broke it out into design affirmations (things that proved us right) and complications (things that need fixing). We then prioritized those complications, considering what needs reiteration prior to launch, what can wait but should be fixed, and what doesn’t pose a significant barrier to success and thus can wait indefinitely.

I like to use the MoSCoW framework for prioritization.

• Must: Improvements that are critical. Without fixing this, there will be huge problems.
• Should: These are important fixes but they could wait a little longer before they become a “must.”
• Could: These are nice to haves. If they are small efforts, we do them now. If they are higher effort, we bookmark them for later.
• Won’t: Things we likely won’t ever do with an explanation of why.

Tip: The MoSCoW framework can be used to prioritize all kinds of things from product road-mapping, to design reiteration, to packing a suitcase for a long vacation (Years ago, I developed a spreadsheet and equation for the latter).

As we rolled the design out to additional states, we also incorporated additional, iterative community feedback. Ideally we’ll have the resources to dig into the small issues later on.

We also developed six standard color palettes, ensuring that each fits WCAG 2.0 standards of at least AA if not AAA. We did the same for three custom palettes some of our state partners contracted us to do. We fixed the mobile menu. We drafted design requirements for our designer to fix the Other Problems menu, and we conducted some other minor fixes.

Tip: Check out WebAim.org for a free color contrast checker tool.

Announcing the new LawHelp.org

The biggest next step is to redesign the national LawHelp.org website! We are so thrilled to apply this new design to our national gateway website. Many LawHelp state sites are reached first through this national gateway site and so we expect even more engagement once we improve the user experience and interface there. As of now, we have finished the design process and are beginning development. Keep an eye on LawHelp.org for that redesign later this summer.