Earlier this year we at Pro Bono Net launched JusticeImpactNetwork.org , a project of the Justice Impact Alliance co-designed with Pro Bono Net. The Justice Impact Network brings together justice-impacted individuals and families, students, and advocates to help impacted individuals and families find and utilize the resources they need to navigate the system, access the full power of the law, and unlock justice.

The homepage of JusticeImpactNetwork.org
  1. Justice-impacted individuals: People who have been impacted by the justice system either directly themselves or indirectly as a family member or friend. This includes being arrested, awaiting trial, or being currently or formerly incarcerated.
  2. Students: Graduates and undergraduates studying a range of legal-related areas.
  3. Advocates: Legal professionals such as paralegals and attorneys.

Who are our users?

The first step to designing for this project was to workshop what kinds of users we were building for in the first place. At the outset, we had a good idea that this would include multiple user groups but it wasn’t entirely clear yet just how many user types there were and how we should organize them into umbrella groups.

  • Demographics: What’s relevant to knowing the basic demographics of our users? Age, location, occupation, ethnicity, income background, etc. It’s easy to get hung up here on minor details. The goal is a broad understanding of what kind of demographics you are serving, not a singular and highly detailed person.
  • History and story: What led them to this point in their life? What has been their experience with the justice system? What is motivating them right now? This is all about origin stories and knowing the state your user is in today as they become introduced to your product.
  • Role: What role do they play? Who do they serve and does anyone serve them? Who do they work with? The concept of a role needs to be flexible. For attorneys this is more straightforward but for impacted individuals it’s more complex. For the directly impacted individuals, the question of role is more about who they work with and who they have access to. For the families/friends of impacted people, it’s more about how they offer support and who they work with.
  • Mindsets and behaviors: What emotions is this person experiencing? How do they approach the situation? Are they emotionally heightened and stressed? Are they calm? Are the advocates overloaded with work and if so, what are the consequences of that? This section is critical when it comes to designing the user experience (or “UX”, this is the overall vibe of the site). Knowing what emotions you are dealing with will help you design an experience to balance that out.
  • Pain points and barriers: What roadblocks do they face? Where do they get stuck and blocked? What’s frustrating? What problems, and even solutions, have they already identified? Here we start with the presenting problems and then dig deeper to get at the root. Think of a plant, what’s above ground is the presenting problem, the obvious and apparent issues. Below ground is a root system that represents the deeper diagnosis of the pain point and barrier.
  • Comfort with digital technology: How comfortable are your users with apps, websites, computers, smartphones, tablets, kiosks, etc? What devices do they have access to? At this point in the process, you are just guessing. Once you begin signing real-life users up for interviews or testing, you can include this as a survey question on the signup form. Use a numerical scale to track this 1–10. A 10 being technically fluent and 1 being totally unsure how to use the tool.
  • Value of our product: What can we offer? How would our users see us as helpful? Think big and then drill down from there. This is about casting a wide net of possible value propositions that you can continue to refine and reiterate on. The final set of value propositions will be much more narrow which is good. You can’t do it all so do a few things well and build from there over time.
An example Miro board from the user persona workshops.

What are the existing workflows?

The next step was to identify the existing workflows of our various user groups. We created a flow chart template, using Miro.com, where our workshop participants could fill in sticky notes of what actions occur in their work. We used this to cover user groups but also to dig into the work of an actual team doing work to support justice-impacted individuals, the Jailhouse Lawyers Initiative (JLI) led by founder and legal empowerment leader Jhody Polk.

An example user workflow chart using characters from The Office as an example.

Finalizing our target personas

Once we had an idea of who our users were, their various related current workflows, and the roles our partner organization played, we took all of that information and developed some personas and stories to present to our designer.

In Part II…

We then went through the design process, iterating over and over to get the workflows to fit these three very different user groups. We developed a working beta site of the design and began preparing for usability testing. That’s next in Part II.


This blog was originally published by Ariadne Brazo on Medium. You can view the original post, here.

Immigration Advocates Network (IAN), a Pro Bono Net project, is excited to launch the 2022 edition of “Remote Legal Support: A Post-Pandemic Guide to Nonprofit and Pro Bono Innovation.” The guide features profiles of nonprofit legal organizations that are leveraging technology and working remotely with volunteers and the community. It includes findings from IAN’s 2021 national survey on strategies, tools, and challenges for immigration legal service delivery during the pandemic. 

Early in the pandemic, service providers were forced to become experts at working with clients and the community remotely. “We wanted to take a closer look at organizations that not only were adapting well to remote services, but were also integrating pro bono lawyers into their model.” says Pat Malone, Associate Director at IAN. “The partner profiles offer wisdom and perspective. Our hope is that the information shared in this guide will help other non-profit organizations meet the challenges.

International Rescue Committee (IRC) Deputy Director of Immigration, Amber Mull and her team have contributed to the guide since the first edition, published in March of 2020.  Mull said, “The RLS guide is a great tool for organizations interested in starting, expanding, or improving remote legal services. The information from practitioners on what has and what hasn’t worked well is incredibly valuable in an environment where in-person services may be limited and innovation can be costly.  Remote services offer a great opportunity to reach new geographic areas and to streamline services for those who have digital literacy and access.” Mull added, “It can be challenging for those who are not comfortable with or have access to technology. Learning how to support people where they are and offering options has been critical to ensuring more people can access services.”  

Access the new guide on the Immigration Advocates Network at https://www.immigrationadvocates.org/remotelegal/   

Pro Bono Net and the American Bar Association (ABA) Young Lawyers Division (YLD)  Disaster Legal Services Program are pleased to announce the Spanish version of a self-help disaster recovery tool (www.FEMAAppeals.org) that allows disaster survivors to create an appeal letter to the Federal Emergency Management Agency (FEMA). The tool, “Carta de apelación a la Agencia Federal de Manejo de Emergencias (FEMA, por sus siglas en inglés),” can be found here. Frequently Asked Questions about the FEMA appeals process can be found here

The frequency, intensity, and aftermath of climate disasters continue to impact communities across the country, and the National Oceanic and Atmospheric Administration once again predicts an above-normal hurricane season for 2022. As we have learned from past disaster responses, survivors who speak languages other than English face more barriers in receiving critical information from authorities or accessing disaster assistance that can help them recover and rebuild. 

When Hurricane Ida devastated communities in 2021 across the eastern coast, officials in New York called for improved language access measures to alert individuals who spoke languages other than English and Spanish. After Hurricane Florence hit North Carolina in 2018, over 150,000 individuals who speak a language other than English lived in disaster-impacted areas. Just a year before, the response to Hurricanes Harvey, Irma, Maria, and the California wildfires brought a number of language access issues that were well-documented by groups on the ground. 

One of the main federal assistance programs to aid survivors after a major disaster comes from FEMA. Individuals can apply for federal disaster assistance, and if they are denied assistance or awarded less than they need to cover for damages, survivors can appeal FEMA’s determination. Many survivors apply to FEMA but are often denied for reasons that can be explained through an appeal letter with additional documentation. 

Pro Bono Net’s FEMA appeals interactive interview, powered by LawHelp Interactive, enables survivors to create and generate an appeal letter they can print or download to file directly with FEMA. It was initially developed with the City Bar Justice Center in the aftermath of Superstorm Sandy in 2012 and has helped over 14,000 survivors impacted by multiple major disasters. It has also been updated over time to reflect changes in the application and appeals process, including in 2021 to incorporate questions that address the needs of survivors with disabilities. These updates come at a time when federal agencies, including FEMA, are reexamining their policies and practices to eliminate barriers that have historically prevented people from accessing federal disaster assistance. 

“Language access is a critical component of equitable disaster recovery,” said Linda Anderson Stanley, Special Advisor of the ABA YLD DLS program. “The additions to this tool come at a key time as the Atlantic hurricane season is upon us. We are lucky to work with Pro Bono Net on such an important project.” 

“We are pleased to work with the ABA YLD Disaster Legal Services Program to make our tool accessible to Spanish-speaking survivors,” said Jeanne Ortiz-Ortiz, Pro Bono & Strategic Initiatives Manager at Pro Bono Net. “With Spanish being the second most spoken language in the U.S., this is an important step toward more equitable responses after disasters. We hope to reach more people seeking federal assistance to recover.”

Survivors can access the Spanish version of the FEMA appeals interactive interview by clicking here: https://lawhelpinteractive.org/Interview/GenerateInterview/8187/engine  

To see this post in Spanish, please click here. Para ver este comunicado en español, por favor oprima aquí.

Special thanks to Servicios Legales de Puerto Rico (Legal Services of Puerto Rico), Morrison & Foerster, the Louisiana State Bar Association, the New Mexico Immigrant Law Center, and Nicole del Rio (former member of the ABA-YLD Disaster Legal Services) for their invaluable feedback as part of the review and testing process. 


About Pro Bono Net 

Pro Bono Net is a nonprofit leader in increasing access to justice, transforming the way legal help reaches the underserved through innovative technology and collaboration. To learn more about Pro Bono Net’s programs, click here. For more information about Pro Bono Net’s disaster recovery efforts, click here

About the ABA Young Lawyers Division Disaster Legal Services Program 

Through the Disaster Legal Services Program, the ABA Young Lawyers Division (YLD) and the Federal Emergency Management Agency provide immediate temporary legal assistance to disaster survivors at no charge. Since September 2007, the ABA YLD has responded to over 200 major disasters across the U.S. To learn more about the program, please click here

Pro Bono Net y el Programa de Servicios Legales por Desastre de la División de Jóvenes Abogados (Young Lawyers Division, YLD por sus siglas en  inglés) del Colegio de Abogados de Estados Unidos (American Bar Association, ABA por sus siglas en inglés) se complacen en anunciar la versión en español de FEMAAppeals.org, un programa interactivo que permite a los sobrevivientes de desastres crear una carta de apelación a la Agencia Federal para el Manejo de Emergencias (FEMA, por sus siglas en inglés) si se les ha denegado la asistencia o si quisieran apelar la asistencia otorgada. El programa se puede encontrar aquí.

La frecuencia, la intensidad y las consecuencias de los desastres climáticos siguen afectando a las comunidades de todo el país, y la Oficina Nacional de Administración Oceánica y Atmosférica vuelve a predecir una temporada de huracanes superior a la normal para 2022. Como hemos aprendido de las respuestas a desastres anteriores, las personas sobrevivientes que hablan idiomas distintos del inglés se enfrentan a más obstáculos a la hora de recibir información esencial de las autoridades o de acceder a la asistencia en caso de desastre.

Cuando en 2021 el huracán Ida impactó comunidades a lo largo de la costa Este de los Estados Unidos, los funcionarios de Nueva York pidieron que se mejoraran las medidas de acceso lingüístico para poder alertar a las personas que hablan otros idiomas distintos del inglés y el español. Tras el paso del huracán Florence por Carolina del Norte en 2018, más de 150 000 personas que hablan un idioma distinto al inglés vivían en zonas afectadas por el desastre. Justo un año antes, la respuesta a los huracanes Harvey, Irma, María y los incendios forestales de California trajo aparejada una serie de problemas de acceso al idioma  que fueron bien documentados por los grupos que se encontraban trabajando en el lugar.

Uno de los principales programas federales de asistencia para ayudar a los sobrevivientes después de un gran desastre es el que ofrece FEMA. Las personas pueden solicitar la ayuda federal en caso de desastre y, si se les niega la ayuda o se les concede menos de lo que necesitan para cubrir los daños, los sobrevivientes pueden apelar la decisión de FEMA. Muchos sobrevivientes presentan su solicitud a FEMA, pero a menudo se la rechazan por razones que pueden explicarse a través de una carta de apelación con documentación adicional.

Este programa interactivo fue creado por Pro Bono Net con tecnología de LawHelp Interactive y permite a los sobrevivientes crear y generar una carta de apelación que pueden imprimir o descargar para presentarla directamente ante FEMA. Se desarrolló inicialmente en colaboración con el Centro de Justicia del Colegio de Abogados de la Ciudad de Nueva York tras la supertormenta Sandy en 2012 y ha ayudado a más de 14, 000 sobrevivientes afectados por varios desastres. También se ha actualizado a lo largo del tiempo para reflejar los cambios en el proceso de solicitud y apelación de FEMA como en 2021, que se incorporaron preguntas que abordan las necesidades de los sobrevivientes con discapacidades. Estas actualizaciones llegan en un momento en que las agencias federales, incluyendo a FEMA, están reconsiderando sus políticas y prácticas para eliminar los obstáculos que históricamente han impedido a las personas acceder a la asistencia federal en caso de desastre.

“Los servicios accesibles son un componente fundamental para una recuperación equitativa en caso de desastre”, dijo Linda Anderson Stanley, asesora especial del Programa de Servicios Legales por Desastre de la División de Jóvenes Abogados del Colegio de Abogados de Estados Unidos. “Las actualizaciones de esta herramienta llegan en un momento clave, ya que estamos en plena temporada de huracanes en el Atlántico. Tenemos la suerte de colaborar con Pro Bono Net en este proyecto tan importante”.

“Nos complace trabajar con el Programa de Servicios Legales por Desastre de la División de Jóvenes Abogados del Colegio de Abogados de Estados Unidos para hacer disponible nuestra herramienta a las personas sobrevivientes que hablan español”, comentó Jeanne Ortiz-Ortiz, gerenta de iniciativas estratégicas y pro bono de Pro Bono Net. “Dado que el español es el segundo idioma más hablado en Estados Unidos, se trata de un paso importante hacia una respuesta más equitativa tras los desastres. Esperamos llegar así a más personas que buscan asistencia federal para recuperarse de un desastre”.

Los sobrevivientes pueden acceder a la versión en español del programa interactivo para apelaciones ante FEMA haciendo clic aquí: https://lawhelpinteractive.org/Interview/GenerateInterview/8187/engine 

Un agradecimiento especial a Servicios Legales de Puerto Rico, Morrison & Foerster, el Colegio de Abogados de Louisiana, el Centro Jurídico para Inmigrantes de Nuevo México y Nicole del Rio (ex miembro del Programa de Servicios Legales por Desastre de la División de Jóvenes Abogados del Colegio de Abogados de Estados Unidos) por sus valiosos comentarios como parte del proceso de revisión.


Acerca de Pro Bono Net

Pro Bono Net es una organización sin fines de lucro, líder en la ampliación del acceso a la justicia, que transforma el modo en que la ayuda legal llega a las personas con bajos ingresos a través de la colaboración y la tecnología innovadora. Para obtener más información sobre los programas de Pro Bono Net, haga clic aquí. Para obtener más información sobre las iniciativas de recuperación en caso de desastre de Pro Bono Net, haga clic aquí.

Acerca del Programa de Servicios Jurídicos en Caso de Desastre de la División de Jóvenes Abogados del Colegio de Abogados de Estados Unidos 

A través del Programa de Servicios Legales por Desastre, la División de Jóvenes Abogados del Colegio de Abogados de Estados Unidos y la Agencia Federal de Manejo de Emergencias ofrecen asistencia legal temporal inmediata y gratuita para los sobrevivientes de desastres. Desde septiembre de 2007, la División de Jóvenes Abogados del Colegio de Abogados de Estados Unidos ha respondido a más de 200 desastres en todo Estados Unidos. Para obtener más información sobre el programa, haga clic aquí.

Revamped site features expanded referral tools and Legal Help Guides on essential topics

Pro Bono Net is pleased to announce the launch of the redesigned and expanded LawHelp.org, the national gateway to nonprofit legal aid resources and referrals in the U.S. This inviting and inclusive redesign allows users to more easily find and access help for fundamental legal  needs.

LawHelp.org was created to help people without lawyers understand their rights, make informed decisions, and connect to help in their local community. This national platform provides referrals to trusted civil legal aid resources in every U.S. state and territory, including a network of 20 statewide legal information portals developed using the LawHelp platform. 

LawHelp.org features basic Legal Help Guides that answer common questions about navigating the legal system and finding free and low cost legal help. The Guides also help people understand their rights and options on pressing national issues such as eviction, reproductive health care rights, and COVID-19. 

The redesigned LawHelp also offers links to helpful legal tools, including: 

  • A national Legal Help Finder for nonprofit civil legal aid and immigration legal services providers across the country. 
  • LawHelp Interactive: A platform that provides free online legal forms with easy-to-follow instructions that empower individuals without a lawyer to create legal documents on their own.
  • Immigration Legal Help: A portal that connects people to help for immigration legal issues, including an affordable path to citizenship.
  • Disaster Legal Help: A resource that connects people impacted by climate-related emergencies to legal support and self-advocacy tools, including for FEMA applications and appeals.

“Millions of people start their search for legal help online, but finding trustworthy information and nonprofit legal services can be hard on the Internet,” said Liz Keith, Program Director at Pro Bono Net. “The new LawHelp.org combines basic legal rights guides with better referral tools to connect people to trusted, community-based help for issues such as family safety, food security, housing stability, and recovery from climate-driven disasters.”

The national LawHelp redesign was developed in collaboration with Pro Bono Net’s design partner, Ideal Design Co, and comes on the heels of a recent redesign of the state LawHelp platform. “The new LawHelp.org was designed the same way we redesigned the state LawHelp platform, employing a human-centered design process with an emphasis on mobile optimization,” said Ariadne Brazo, Product Manager at Pro Bono Net. “From the illustrations, to the map layout, to the way we display our Legal Help Guides, we focused on ensuring users can find a calming yet informative hub of information to help with their legal situation.”

The Spanish language version of LawHelp.org will relaunch this fall. 

Please visit LawHelp.org for more information, or contact Liz Keith, Pro Bono Net’s State and National Programs Director, at lkeith@probono.net.   

To read our three-part blog series on the redesign of the state LawHelp platform, visit: Designing and Testing the New LawHelp

For more information on Pro Bono Net and our programs, visit: https://www.probono.net/programs/

Pro Bono Net, in partnership with LawNY and with funding from the Legal Services Corporation, is excited to announce the relaunch of LawHelpNY.org in the open source framework, Drupal. The LawHelpNY rebuild project is set to launch on July 27, 2022.

Pro Bono Net engaged a design agency to complete a human-centered design review process to evaluate and incorporate the lived experiences and perspectives of the people that LawHelpNY serves. The results of the process provided us with design and technical recommendations for a reimagined, elevated user experience. The new site reflects our vision of creating a mobile-first, inclusive, and easily accessible experience for LawHelpNY users to quickly find the help they need. In addition, the new LawhelpNY.org is defined by streamlined workflows that enable content creators and managers to keep information current and accessible.

Through LawHelpNY.org, we provide individuals with know-your-rights resources, self-help tools, court information, and attorney referral information. LawHelpNY also provides rapid access to resources for intake workers, hotline staff, and community organizations. Additionally, LawHelpNY’s referral directory is now available via API to make it accessible on other websites that individuals visit for legal help.

A central goal of LawHelpNY is to serve as an essential hub of important legal information and resources that maximize the ability of legal service providers to connect with people in need. LawHelpNY’s role as a necessary element of wrap-around legal services enhances access to these critical resources for the general public and reduces the likelihood of unintended duplication of efforts among the statewide legal services community. 

Veronica Dunlap, Director of New York Programs at Pro Bono Net, is leading the team on the relaunch of LawHelpNY.org. She shared, “[W]e are excited to show our legal service partners and the New Yorkers who rely on LawHelpNY that we have heard their feedback and will deliver  a more intuitive, streamlined experience that takes into account the culturally unique community of New York State. We are grateful for their input and support.”

Learn more about the LawHelpNY Advisory Committee Organizations:

For more information, comments, or questions about LawHelpNY.org, please contact Veronica Dunlap, New York Program Director at Pro Bono Net, at vdunlap@probono.net.

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.orgWashingtonLawHelp.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.

AlabamaLawHelp.org’s improved homepage design. When users hover over a topic card, it becomes highlighted.

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!”

The old LawHelp design

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.

The FAQ module in action on LouisianaLawHelp.org

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.

OregonLawHelp.org utilizes the Quick Exit feature

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.

The Other Problems dropdown feature on GeorgiaLegalAid.org

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.

Two resource cards from LawHelpNC.org

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.

Welcome to Part II of how we at Pro Bono Net designed and tested the new LawHelp Refresh design. Check out AlaskaLawHelp.orgMontanaLawHelp.org, and AlabamaLegalHelp.org (among many others) to see it in action. Back in Part I, I discussed how we handled the design process itself and the kinds of lessons we learned. In Part II, we will now look at how we structured usability testing including how we recruited participants.

A special thanks to Lagniappe Law Lab who maintains the content on LouisianaLawHelp.org, our pilot partner for this project. We not only launched with them first but Lagniappe Law Lab was a huge help in recruiting participants so that we could test that site with local users.

Part II

Usability test structure

Once the design process was over and a pilot site design had been completed, we began usability testing. Usability testing simply tests how intuitive a design is. Can users easily navigate the site? Are they using our intended workflows? Where do they get stuck or lost? And what surprises are there? If you are curious to learn more about why we usability test, check out the Connecting Justice Communities blog where I wrote last summer about our usability testing process, why you should embrace being proven wrong, and how to quickly reiterate post-testing.

Our usability test structure can be boiled down to a few key components:

  1. Real-life scenarios
  2. Organic interaction
  3. Avoiding leading the user
  4. Standardized scripts & recordings
  5. Recruitment

Real-life scenarios

Usability testing is exactly what it sounds like, it’s testing how usable a site is. This is done with real users, using real life scenarios as a backdrop for finding critical resources on LawHelp.org sites. When the user cannot complete the task we gave them or is confused by something, that means the design has failed the test (not the user).

To test this new design, we developed a beta version of LouisianaLawHelp.org in the new design where all the components of the site were functional. Using a possible eviction as the scenario, we explained to each participant that they should pretend that they live in an apartment, their landlord is considering selling the building, and that they are worried about being evicted. We then walked them through a process of finding information on eviction, landlord negligence on repairs relating to a recent hurricane, and more.

Here is the exact prompt we used:

“Let’s say you rent an apartment and found out your landlord is considering selling the building. You did a web search for ‘Louisiana eviction’ and clicked on a link that sent you here.

When planning this scenario, we considered a few things:

  1. Is this scenario clear, common, and relatable?
  2. Will this scenario be nuanced enough that the user will need to visit several areas of the site?
  3. Will the user be able to hold this in their mind the entire time, simulating a realistic search session?

Organic Interaction

When picking a scenario for usability testing, you want to ensure that you can hold off on leading the user as much as possible. Organic interaction is the most ideal testing ground to see how your design will hold up in the wild. This is tricky because you do need to test a number of components and thus, without leading them too much, you need to structure it so that they will likely interact with the components you are testing.

Here’s an example of how we struck that balance. Most LawHelp users arrive at a LawHelp page having done a web search for a legal issue such as “eviction Louisiana” or “divorce NYC.” They then click a link to a LawHelp site directly into a resource page. This means they visit LawHelp first by going about 3 pages deep immediately, bypassing the homepage.

So where did we start our testers? On a resource page! We gave them a link and then simply said “take a look through this page and tell me what you see.” This kept things open but gave us a ton of information. We observed what they found in the content, how they navigated that content, how they interacted with the navigation bar and footer areas, etc. By keeping the prompt so open-ended, we also found out what things grab the user’s attention as well as what they completely ignore.

Tip: Be prepared to see some of your most beloved design choices be totally ignored. This is good because again, it’s best to be proven wrong early rather than later!

Avoiding leading the user

We then wanted to see, could the user find other resources on a related topic (a common existing LawHelp user path). We asked them,

“Now after reading this, let’s say your landlord has failed to make some necessary repairs. Where would you go now to find help on this?”

This was an organic question within the scenario but this pushed the user to find primary navigation tools, navigate information hierarchy, interpret labels and calls to action, etc.

Don’t ask questions like, “find the navigation bar” or “can you find the filter for other topics?” These are extremely specific and don’t capture the way an average person would approach the site. As a user, you are thinking about your eviction issue, not site components.

The only exception is if you feel a major component, such as the search bar, is not being noticed at all even after several scenarios that would likely lead to organic interaction with it. At that point, you could break and ask “do you see a place to search by keywords?” This is a helpful last result. I have had to do this on previous projects and it proved that certain components were totally undiscoverable.

I want to underline that this is a last resort. It is essentially a post-mortem question. During analysis, you’ll have to acknowledge that they did not find it until you pointed it out. It’s helpful to ask but can only be used to prove that they couldn’t find it on their own.

Standardized scripts

A key aspect of reliable results is conducting the tests in a standardized way. Use the same script, say the same words, and record the session. The more you deviate from the initial structure, the more likely it is you will get different results which muddies the waters when it comes time for analysis.

Usability testing is (most of the time) not “pure” research. Pure research is rigorous, highly scientific, and undergoes peer review (as Erika Hall explains in Just Enough Research which I highly recommend). Most tech teams won’t have the luxury of such a slow and rigorous process. However, the more control you can keep over the consistency of testing experience between participants the better.

Recordings

Record your sessions! This is crucial. You will not remember everything and taking verbatim notes during the session is both difficult and pulls you out of what’s happening. Plus, recordings allow colleagues to review the session too and provide alternate interpretations and perspectives. At the end of testing, you will definitely need to refer back to a recording. Keep them clearly labeled and organized in your drive for easy reference.

A note on ethics: Your participants should know well before the session begins that you are recording the session. They should also know exactly what you will do with the recordings, whether they will be published/quoted in any way, who will have access to them, etc. We inform our participants that we will never publish recordings without their permission and that if we quote them in publications, we will do so in an anonymous manner. Recording requires strong ethics so get your policy straight before even inviting people to sign up.

Recruitment

We recruited carefully, attempting to reach a diverse set of users that would give us the varied perspectives and experiences we needed. We did this both alongside Lagniappe Law Lab, our pilot partner, and via our larger LawHelp network channels. We attempted to find a diverse grouping around:

  • Income
  • Race/ethnicity
  • Age
  • Gender
  • Occupation and familiarity with the legal system

The latter point was to try and get users who are both self helpers and professional helpers. The self helpers are users who come to LawHelp looking for help for themselves or a loved one. Professional helpers tend to be paralegals, social workers, or even attorneys who are trying to refer clients to helpful resources and services.

Tip: When creating a sign-up form, don’t forget to ask basic questions like “Do you have a reliable internet connection? What devices do you have access to? Do your devices have a working webcam?” These may seem obvious to you but they aren’t to everyone.

We utilized web forms and spreadsheets to get people recruited and then review the pool of respondents. We disqualified anyone without internet access or without necessary devices, these were non-starters in our ability to include them. We then sorted the data by the various demographics and began segmenting them into mobile and desktop, targeting our demographic ratio goals.

Tip: Wondering how many users to test? The rule of thumb is 5 users for mobile, 5 users for desktop. Scale that up if you have several highly distinct user groups.

Recruitment is tricky because in the end, you are reliant upon whether your participants decide to show up to the session or not. You can do things to increase your chances of success like including financial incentives (we paid our participants in Visa gift cards), flexible available hours, session reminders day before and day of, etc. However, when testing with the general public, you should expect about half or more of your scheduled sessions will be either re-scheduled or completely abandoned.

This meant that our careful targeting of a diverse group across those five demographics had varying success rates. We did land a good balance on age, occupation/subject matter familiarity (the range was 2–6 on a scale of 1–10), and income.

Race and gender ended up being more lopsided though. Our participants were 20% Multi-racial, 10% Hispanic, 10% African American, and 60% Caucasian. We feel this doesn’t accurately represent the demographics of who the justice system impacts the most.

Gender ended up being 100% binary-identified users, 80% female and 20% male. Additionally, none of our survey respondents who identified as non-binary or transgender responded to session invites.

Testing begins in Part III…

Ultimately though, we did find highly insightful results that facilitated impactful reiteration. Because the scale of this redesign was so large, I went into the testing process expecting a laundry list of usability issues to arise. It’s just a natural part of the design process when making such global changes. What we found surprised us all. That’s all in Part III.

“The change that I’ve seen and the growth that I’ve seen in pro bono departments has been so inspiring to me. But that also means that there is always efficiency that is required because they are in charge of pro bono matters for the entire law firm, and so it’s really important for them to have access to their information easily.” – Jessica Stuart

Pro Bono Net’s Senior Product Manager, Jessica Stuart, recently was interviewed on the Pioneers and Pathfinders Podcast, hosted by J. Stephen Poor, chair emeritus of Seyfarth Shaw. Pioneers and Pathfinders is a podcast about the people driving change in the legal industry.¹

In this episode of Pioneers and Pathfinders, Jessica discusses how she transitioned from doing marketing in the entertainment industry to working her way to her current position of Senior Product Manager at Pro Bono Net. Jessica also discusses the growth and evolution of Pro Bono Net, the power of virtual courtrooms to increase access to justice, pro bono workflow analysis, and how SeyfarthLean was an early inspiration.²

Jessica is passionate about access to justice, and her motivation has fueled the development of Pro Bono Net’s Pro Bono Manager. For over 10 years, law firms have been using Pro Bono Manager to help them be more effective and increase the impact of their pro bono programs. With a centralized pro bono database at their fingertips, pro bono teams have easy access to the data they need no matter where they are, helping them support the attorneys who conduct valuable pro bono work for communities in need. 

Jessica has also helped lead the platform development and product strategy for Pro Bono Net’s Remote Legal Connect platform. Our Remote Legal Connect technology allows legal services providers, pro bono initiatives, courts, and community partners to rapidly build and manage a legal support program regardless of location. The platform enabled legal services organizations to transform their operations during unprecedented shelter-in-place orders, and stand up new models for statewide assistance. Jessica has been crucial in implementing the development strategy for partnerships with Atlanta Legal Aid Society (Georgia Legal Connect) and Legal Aid of Nebraska (Nebraska Legal Aid Connect).

For more information and to listen to this podcast, visit Seyfarth’s website. For more information on Pro Bono Manager, visit: probono.net/our-work/advocates/pbm and to learn more about Remote Legal Connect, visit: probono.net/programs/rlc.


¹ https://podcasts.apple.com/us/podcast/pioneers-and-pathfinders/id1558294456 

² https://www.seyfarth.com/news-insights/pioneers-and-pathfinders-jessica-stuart.html

We recently launched a new design of the LawHelp platform (managed by Pro Bono Net) to make major improvements to the aesthetic design as well as the overall user interface (UI) and user experience (UX). We first launched the new design on LouisianaLawHelp.org with our pilot partner Lagniappe Law Lab. Since then we have implemented the new design on just about every LawHelp site across the country. You can see other examples at AyudaLegalPR.orgOKLaw.orgLawHelp.org/DC among many others. We call it the LawHelp Refresh.

The new homepage of LouisianaLawHelp.org

When we set out to re-design LawHelp, we wanted to meet four main design goals:

  1. Mobile-optimized design — A strong mobile design that isn’t an afterthought to the desktop design but rather a primary focus.
  2. Refreshed aesthetic — An overall improved aesthetic to bring LawHelp into the realm of contemporary web design including a wider range of color palettes available, all that meet WCAG 2.0 AA guidelines.
  3. Decreased reliance on text — Reducing the need for explainer text through intuitive and accessible design.
  4. Improved calls to action (CTA’s) — Making it much clearer to users where to go and how to get there.

We have learned a ton during this project across the board and I want to share some of the key things we learned all the way from design through usability testing. In this three-part series, I’ll first describe a bit about our design process. This was a big project spanning more than 20 websites and we learned a lot through it. In Part II I’ll share how we recruited for and structured our usability testing. We’ll dig into what usability testing is, how to structure a usability test script, and pitfalls to avoid. Finally, in Part III, I’ll outline what our results were, how the design succeeded and failed, and what we did next.

Part I

Our design process, with our longtime design partner Ideal Design Co., was rigorous and included extensive input from our LawHelp team, the wider Pro Bono Net team, and of course our state partners across the country. We pored through numerous design iterations and explored several avenues for how to improve the LawHelp design. I can’t count how many rounds of revisions we had but I know it was more than enough! A few things that helped us succeed in the design process:

  1. Tiered feedback
  2. Centralizing documentation and discussion
  3. Folding in technical input
  4. Frequent communication with design

Tiered feedback

The LawHelp platform supports over 20 websites across the country and meets the needs of numerous user types and civil legal aid organizations. This means we have numerous stakeholders which makes design difficult! In the past I have worked on platforms where our stakeholders were much more centralized and our user types were more focused which made for a simpler design process.

 

 

A map of the areas LawHelp is active

We needed to get feedback from the internal LawHelp team at PBN, staff in the wider Pro Bono Net organization with experience developing legal information websites and self-advocacy tools, our state civil legal aid organization partners, and our users. That’s a lot of cooks and our kitchen can’t fit them all. So we set up a tiered system of feedback. The LawHelp team was at the center, spending the most time and going through all of the details, big and small. We would then post our design notes and documents to the wider Pro Bono Net organization for feedback and input.

Then, at regular intervals in the design process, we sent out announcements to all of our LawHelp state partners to review and submit feedback. This included an open invitation for emails but also some drop-in sessions where we presented our progress and opened the mic up for feedback. We also drew on findings from past usability testing on LawHelp sites and other legal resource sites such as TenantHelpNY.org to inform our design process. This process struck a good balance between efficiently progressing on the designs while including valuable feedback and perspectives from outside the team.

This diagram shows how we set this up. The white triangle to the left shows the practices we used to ensure that the perspectives and experiences of each group were able to cut all the way through directly to our product team.

The communication structure used to make feedback and input efficient

Centralizing documentation and discussion

A key ingredient to any effective tech team is strong project organization and communication. It’s so important that in the past, at every tech company/organization I have worked at, we have taken time out specifically to redesign our file structure in Google Drive. This was key during our design process because we were able to easily store the numerous versions of design files. We used clear labeling systems for each design file so you knew which was the most recent. Those file names then corresponded to a single design review document that we used for documenting discussion.

Let’s say you were on the LawHelp team and on a Wednesday morning, you had set aside time to review the most recent designs. Instead of digging through emails or Slack, you had one Drive folder bookmarked. In this you could find the design review document. At the top of the document was a header “Wireframes V6 (current).” That header hyperlinked to the design file so you could easily pull it up. A week later, when V7 came out, you’d see that header change to drop the “(current)” part of the title and simply say “Wireframes V6” and above that is a fresh new area for discussion called “Wireframes V7 (current).”

Below is a screenshot directly from our review document.

Screenshot of a section of the design review document

Folding in technical input

A big stumbling block in the software development process can be failing to include the engineering team early on. We included our developers and QA team in the design review process and utilized our project management tool, Jira, to keep track of various discussion points. This was especially helpful when considering new features or major changes to existing ones. This helped prevent some surprises down the road when it came time to code (although you simply cannot prevent all surprises).

Jira is a great tool for software project management. It’s a very powerful tool and requires a large amount of investment in setting up. Its numerous features for organizing projects were a huge help in keeping track of numerous discussion points big and small such as a new Google Maps integration and what dependencies there would be. You may not need a tool as powerful as Jira though depending on the nature of your projects.

Frequent communication with design

Never let design become a game of telephone! It’s tempting to do especially when your designer is not in-house. You hear something from your developer, pass it to your project manager, who then pings the product manager, who then drops a comment in the Google Doc to the designer. This inevitably leads to information loss and your designer then moves forward with only half (or less) of the story.

Since our designer for this project was not in-house, we kept a clear open line of communication. We would easily jump into a video chat if anything was too complex or nuanced to outline in a document. As the product manager for this project, I made sure to utilize active listening skills when centralizing feedback. The key skill here is repeating back to people what you think they are saying and allowing them to correct you. This made sure I was getting it right and allowed for less meetings. It meant I didn’t need to have seven+ people on a call with our designer while still avoiding the game of telephone.

A good phrase to get comfortable using is, “Let me make sure I’ve got this right. What I hear you saying is [X,Y,Z]” That phrase has saved me more time and trouble than I can quantify. I know that because in the times I didn’t exercise that skill, things went in circles.

This lesson on active listening skills applies pretty much everywhere in our lives though, not just work. It’s amazing how much we assume and get wrong. Plus, everyone appreciates knowing that the person they are speaking to is actively working to hear them.

In Part II…

That’s how we structured the design process. Eventually we finished up, went through the development process, and then prepared to usability test as soon as the beta site was complete. Exactly how we usability tested is all in Part II.