Michigan Poverty Law Center

Michigan Poverty Law Center

Legal Site Redesign

Legal Site Redesign

How might we make job-supportive resources more accessible and valuable to MPLP's legal aid attorneys?

How might we make job-supportive resources more accessible and valuable to MPLP's legal aid attorneys?

Role

Role

Role

UX Designer and Researcher

UX Designer and Researcher

Skills

Skills

Skills

  • Heuristic Analysis

  • Competitive Research

  • Google Analytics

  • Interviewing

  • Wireframing

  • Prototyping

  • Usability Testing

  • UI Design

Timeline

Timeline

Timeline

Overview

Overview

The Michigan Poverty Law Center (MPLP) is a non-profit organization that trains and supports legal aid attorneys across the state.

Problem

The MPLP had received complaints that their website was difficult to navigate.

Problem

The MPLP had received complaints that their website was difficult to navigate.

Goal

The MPLP wanted to improve the ease with which attorneys can access supportive resources, such as guides, samples, and meeting information.

Goal

The MPLP wanted to improve the ease with which attorneys can access supportive resources, such as guides, samples, and meeting information.

delUX Overview

Research Phase

Research Phase

Our initial meeting with our client gave us a sense of the scope of the project, as well as areas that they’d like to see improved. Their primary concern was making the resources and training section more streamlined and appealing to legal attorneys. 

To familiarize ourselves with the website and identify potential issues, we started with a heuristic evaluation (an evaluation based on general rules-of-thumb for UX) through the website. This gave our team ideas of potential success and failure points within the website. We also did a competitive analysis with other legal websites such as Shriver Center on Poverty Law, Western Center on Poverty Law, Michigan Legal Help and Bet Tzedek. This analysis showed us ways we could potentially organize information on the website, such as through a tagging system and more clearly visible sub-sections. 

This research gave us an idea on how to improve the website, but to create a truly useful experience, we needed to know what MPLP’s attorneys wanted from the website. We connected with attorneys affiliated with MPLP and asked them about their work needs and their habits when using the website. We also looked at Google Analytics to understand the website’s current performance and user behavioral patterns.

Analysis Phase

Analysis Phase

After recording our research, we organized our findings into individual sticky notes. We created an affinity board where sticky notes grouped together based on a shared theme. This grouping helped us identify common threads in our research, which in turn helped us target areas in the web design that we needed to improve. We then organized these improvement areas into an effort-impact matrix, so we could determine our design priorities.

Insights

Lack of Content Visibility

Attorneys were uncertain what the website provided outside of links to training, and as such they chose to rely on the listserv for their information. This reliance forced them to organize information on their own, or risk having the information buried in their emails.

The reason attorneys were uncertain of the value was because the existing resources were either hidden in blog articles and training or lacked strong visual cues. As such, attorneys were unaware that certain resources existed.


Cumbersome Log-In

Users needed to log-in to access materials, yet they were not allowed to have individual accounts. Instead, they were given a shared account with other attorneys; however, these shared accounts only applied to specific legal categories. If an attorney covered multiple fields, they would have to remember multiple passwords to access different parts of the site (and these were passwords they couldn’t control). This process made attorneys reluctant to use the website and burdened staff with repeat password requests.


Limited Organization

Even when users knew the site had the content they were looking for, they had difficulty finding that content. All content was organized chronologically, with no additional means of sorting results or refining searches. 


Desire for Time-Saving Resources 

Research was a core part of MPLP user workloads. Multiple users reported wanting a hub for information retrieval. According to Google Analytics data, one of the most high-traffic pages was a blog article about Snap Benefit updates; which suggested that users are interested in receiving urgent updates through the website. If the website could readily provide pertinent legal information and tools to simplify the work for attorneys, then it will become an asset for our users.


delUX Process

Design Phase

Design Phase

For the design phase, we split the workload by sections. I was responsible primarily for the resources and search sections. 

Resources Page

The most difficult part about building the resources section was figuring out how to display the breadth of content options without overwhelming the user. For the ‘resources’ master page, I focused on only the legal categories that were available. I turned the links into large boxes with icons so they were easier to click and distinguish apart. I also converted a couple extraneous pages (which were additional websites that were absorbed by the organization) into resource sections so that they were easily visible.

The individual resource pages were the trickiest to organize. Each page had at least five types of information: documents, articles, trainings, associated staff, and external links. I initially tried to display all of this information at the same time using sections; however, that overcrowded the page. I then attempted to minimize the items on the page by giving each section its own subpage, but that approach buried content. I finally settled on using a tab system. This system would allow users to see all of the available categories of content, while allowing them to focus on one category at a time without leaving the page. 

Unlike the other tabs, the documents section was not based on an existing page or section on the website. I proposed this section to house tools that could help attorneys complete their work faster, such as templates and checklists. Since the materials in this section could vary, I decided to replace the standard filters with selectable tags, which would allow for more flexibility in filtering as more document types were added.

Search Page

The biggest issue with the search process was visibility. Multiple users had difficulty noticing the search bar during the search-based tasks (which may have been partially due to the lack of coloring). Users also struggled to differentiate the search results, often missing the categorization tags. While users would click on the filter bar, they didn’t understand the categories, suggesting the titles are not as clear as they should be.

It was clear that the search page needed a clear filtering system and visible tagging.  I added filters for the type of resource - i.e articles, trainings, etc - as well as the legal category that resource was part of, such as Elder or Consumer Law. I also included a sort feature which could organize results by search term relevance, date of posting, and topic – categories that reflected how our attorneys typically searched for information.

Streamlined Log-In

I was not primarily responsible for the new log-in flow, but the approach to the design was a collaborative decision. We decided to design for a new log-in system, where users have individual accounts with unique permissions. Attorneys could specify their field of practice and provide their bar information for verification, making it easy for the system to verify their identity and tailor their experience.

delUX Challenges
delUX hero1
delUX hero2

For the design phase, we split the workload by sections. I was responsible primarily for the resources and search sections. 

Resources Page

The most difficult part about building the resources section was figuring out how to display the breadth of content options without overwhelming the user. For the ‘resources’ master page, I focused on only the legal categories that were available. I turned the links into large boxes with icons so they were easier to click and distinguish apart. I also converted a couple extraneous pages (which were additional websites that were absorbed by the organization) into resource sections so that they were easily visible.

The individual resource pages were the trickiest to organize. Each page had at least five types of information: documents, articles, trainings, associated staff, and external links. I initially tried to display all of this information at the same time using sections; however, that overcrowded the page. I then attempted to minimize the items on the page by giving each section its own subpage, but that approach buried content. I finally settled on using a tab system. This system would allow users to see all of the available categories of content, while allowing them to focus on one category at a time without leaving the page. 

Unlike the other tabs, the documents section was not based on an existing page or section on the website. I proposed this section to house tools that could help attorneys complete their work faster, such as templates and checklists. Since the materials in this section could vary, I decided to replace the standard filters with selectable tags, which would allow for more flexibility in filtering as more document types were added.

Search Page

The biggest issue with the search process was visibility. Multiple users had difficulty noticing the search bar during the search-based tasks (which may have been partially due to the lack of coloring). Users also struggled to differentiate the search results, often missing the categorization tags. While users would click on the filter bar, they didn’t understand the categories, suggesting the titles are not as clear as they should be.

It was clear that the search page needed a clear filtering system and visible tagging.  I added filters for the type of resource - i.e articles, trainings, etc - as well as the legal category that resource was part of, such as Elder or Consumer Law. I also included a sort feature which could organize results by search term relevance, date of posting, and topic – categories that reflected how our attorneys typically searched for information.

Streamlined Log-In

I was not primarily responsible for the new log-in flow, but the approach to the design was a collaborative decision. We decided to design for a new log-in system, where users have individual accounts with unique permissions. Attorneys could specify their field of practice and provide their bar information for verification, making it easy for the system to verify their identity and tailor their experience.

Refinement Phase

Refinement Phase

Usability Testing

Before we could recommend our design to our client, we needed to verify that it was effective. We decided to do a usability test with users and non-users to see if the website was easy to learn and appropriate for attorney needs. I conducted tests with three of the 7 participants.

We asked them to complete the following tasks:

  1. Create an account

  2. Locate information about MPLP’s mission and impact

  3. Register for a Racial Justice Collaborative training

  4. Find a template for a Consumer Law complaint form

  5. Locate the article on noncitizen access to public benefits in Michigan

  6. Download the video recording of the last consumer law meeting

Refinements

Based on the testing feedback, I made the following refinements to my pages. 

Resources Page:

  • Instead of a drop-down for ‘upcoming’ and ‘past’ filters, I instead used a ‘pill filter’ approach for better visibility.  

  • To accommodate the potentially high volume of documents, I replaced the collapsible menus within the documents tab with pill filter buttons to save space.

Search Page:

  • Rather than emphasizing the word ‘search’ on the top bar, a magnifying glass should be leveraged for better user recognition of the function.

  • We also need to improve the contrast of the labels, either through scale, bolding, and/or coloring, so that they become noticeable.

Outcome

Outcome

The MPLP team praised our work and said that they would move forward with our design and recommendations, and that they would expand their developer team to get the work done.

Overall, this project was If time permitted, I would have liked to have conducted more tests with attorneys, with multiple tests involving the mobile version of the website. 

Create a free website with Framer, the website builder loved by startups, designers and agencies.