Pro Bono Partnership Atlanta Website Redesign

A responsive redesign of the Pro Bono Partnership Atlanta website with added communication and networking functionality.

About the Project

My Role: UX/UI Designer
Duration: 1 month
Tools: Adobe XD, Miro, Trello My Team: John O’Neil (UX/UI Design), Di’Nasia Berry (UX/UI Design)

This project was completed as part of the Georgia Tech UX/UI Design Bootcamp. The assigned task was to redesign the website of an Atlanta or Georgia-based nonprofit. After researching our options, my team chose the Pro Bono Partnership Atlanta website. We appreciated the mission of the organization: to provide pro bono legal services to Atlanta nonprofits that couldn’t afford them. Going into the project, we did not have existing knowledge of what kind of legal services nonprofits might need, but we imagined that providing those services pro bono (free) would allow those nonprofits to better serve the community. Although we attempted to make contact with the organization many times, we were unable to reach them during the course of the project, so we had to make inferences about our user groups and organization goals. Partially inspired by our own struggles, we defined our problem as a lack of contact functionality for users of the website. To address this problem, we designed a networking feature that would allow nonprofits and volunteer attorneys to find and contact each other more efficiently. We had many constraints on this project, including a 4-week timeline and limited resources for our research.

Conducting the Research

The first task my team attempted to accomplish in the research phase was contact with our nonprofit organization. As stated in the previous section, we were unsuccessful within the timeframe of the project. Because we couldn’t discuss the target user base with a representative of Pro Bono Partnership Atlanta (PBPA), we had to make an educated guess based on information from the website. We determined that we had two main user groups: nonprofits in need of legal aid and attorneys willing to volunteer for those nonprofits.

We were able to complete 5 user interviews of attorneys who had participated pro bono work and 1 user interview with a managing partner of a nonprofit. From the attorney interviews, we gained valuable information about why and how attorneys pursue pro bono cases. We grouped our interview facts in the affinity diagram below so we could get a clear picture of the motivations and desires of volunteer attorneys.

Figure 1. Affinity diagram of insights from interviews with attorneys.

Because we were only able to get in touch with one manager of a nonprofit, and this interview occurred much later in the project, we did not do an affinity diagram for that user group. However, we did learn that most nonprofits do not have in-house legal staff because it is too expensive, but many nonprofits do require frequent legal services depending on their mission. These two facts were instrumental in our understanding of PBPA’s mission and to driving our design decisions for their website.

Based on our interview data, we defined the following user insight for our volunteer attorney user group:

Attorneys are motivated to take on pro bono clients because they can choose to work in areas of personal interest and they can give back to the community. They feel good about helping people and improving their professional skills.

Our next step was to evaluate the existing website based on common UI Heuristics and Usability/Accessibility standards.

Figure 2. Audit of the existing UI for the Pro Bono Partnership Atlanta website.

We observed that the current site did not have a clear hierarchy for the content, and it wasn’t immediately obvious what a user may do on the site. When we had attempted to use their contact form, we had received an error message, and most prompts for getting help or getting involved with the organization led to email addresses. In short, there was nothing a user could do on the site to interact with the PBPA organization besides find an email address. All other pages contained informational material in long form. We suspected there was room to create a more impactful web presence.

Defining the Problem

After completing our research and evaluation of the current website, we moved into defining our problem. We started from the following How Might We question:

How might we improve Pro Bono Partnership Atlanta’s web presence so that their core mission is more successful based on enhanced connections between lawyers and nonprofits and increased return visits of clients and volunteers to Pro Bono Partnership Atlanta?

We decided to concentrate on improving the connection rate between the two user groups with the desired outcome being more efficient matching between nonprofits in need and qualified volunteers.

Settling on Solutions

When we began ideating on potential ways to solve our defined problem, we looked to several other websites for inspiration. We imagined this website as similar to any other that is trying to connect a customer to a service. Based on this functionality, we looked at websites like HomeAdvisor:

Figure 3. Annotated screenshot of the HomeAdvisor homepage.

Similar to our design goal, home advisor allows users to search for assistance with a home-improvement project based on keyword searches, but also has shortcuts to common categories of projects. We felt this structure could work well for legal help as well. Nonprofits representatives could come to the website knowing their legal problem and use the search bar to look for appropriate services, or they want more guidance and scan common categories of legal services looking for what they need.

For our other user group, we imagined lawyers coming to the website looking for volunteer opportunities. In this scenario, the user probably doesn’t have a specific legal need in mind. They know what their areas of expertise are, and possibly they know what types of nonprofits they want to help. This user can use the search bar to enter keywords that align with their legal skills or for nonprofit missions that inspire them.

Once we ideated on homepage layout, we realized that we needed to construct how search results would appear. For this page we looked to websites such as LinkedIn, which is a great example of searching for job postings.

Figure 4. Annotated screenshot of the LinkedIn homepage.

To help us understand what our design needed to accomplish, we defined two basic task flows for each user group. We used these task flows to help us iterate between our initial ideas about design to more concrete wireframes.

Figure 5. Task flow for a nonprofit user.

Figure 6. Task flow for an attorney user.

After brainstorming and sketching out some ideas, we moved on to defining the information architecture. To accommodate our ideas about searching for projects, we knew we would need to add new pages to the navigation. We decided it made sense for users to be able to create accounts, and through those accounts nonprofits could post projects about their needs, similar to a job posting. Attorneys would be able to use their accounts to create profiles about their interests and professional experience. This way both sets of users could gain valuable information about the other. To help us define the navigation of the site, we created a sitemap of our information architecture. On the site map shown below the new pages for our project boards and profiles are shown.

Figure 6. Site map for the redesign of the Pro Bono Partnership Atlanta website.

Combining all our ideation tools and information architecture, we defined the solution to the problem as creating a professional network between nonprofits and volunteers within the PBPA website. From this point, we moved on to making our first round of wire frames.

Implementing the Ideas

We first created wireframes for our homepage and our search results page, as these are the ones that incorporated the main new feature of searchable projects and profiles. Both pages have many components that are designed to improve the user experience of the website.

This case study has been abbreviated because the author has more interesting projects occupying her brain space at the mo.

Below is a mockup of the home page. The team also made a mobile version of the website.