.png)
Bonofide is a website that takes the frustration and overwhelming stress out of applying for pro bono legal services, resources, and advice.
Experience It!
Bonofide is a website that takes the frustration and overwhelming stress out of applying for pro bono legal services, resources, and advice.
Experience It!Project Overview
I wanted to create a solution that ultimately streamlined the process of finding legal aid. Like all my designs, I wanted it to be effective, intuitive, and of course backed by research. Having never been in the situation where I needed any kind of legal assistance, I took this as a personal challenge. I wanted to expand my skills and prove that as a good designer, I could design an effective product within a field I knew nothing about and had no prior experience. The idea for this project came after watching a documentary where one of the characters needed to find legal assistance, but struggled to do so.
The goals for this project were to create a website that allowed users to search for pro bono legal services, resources, and advice. In addition, it would allow users to apply for, or register to provide pro bono legal services, resources, and advice within their state.
For this project, my roles included user research, user flows, wireframing, visual design, interactive prototyping, and usability testing.
Design Process
Research & Discovery
I started my research off with a user survey. By conducting the user survey, I was really looking to understand who the users are and their experiences. I was looking for Quantitative data, so I wanted to know Who, What, When, Where, How often, How many, etc. For example, I asked questions about their age, who they were trying to find resources for, and how often they searched for them.In addition to quantitative data, I needed Qualitative data, I wanted to know How and Why as well. So, I asked users to relay details about their specific experiences, like how they felt about it, and why they went through the experience. By asking demographic questions as well as personal experience questions I was really able to get an idea of who are users really are as a whole.
What I discovered was that the majority of users are actually women. Women made up 74% of users, specifically women between the ages of 30-59 years old. Interestingly enough, 65% of those women were looking for resources for their son specifically. I also found that the vast majority earn less than $50,000 a year, which is significantly less than the national average household income of about $68,000 a year.Some other key findings that came out of my audience analysis through the user survey showed that 45% of user were initially unsure how to even inquire about pro bono services, and 90% found the process rather difficult and time consuming. I also discovered that the majority of users found technology and interpreting legal information to be challenging, but also that they hold strong family values.
Part of my research included looking into competitors and completing a competitive analysis. There are a lot of different versions of sites out there for some type of legal aid, so I chose a few of the main ones. I looked at LawHelp.org, CommunityLegalAid.org (CLA), and Probono.net.
1. LawHelp - Provides legal resources and info based on your state. Liked: Able to Apply for free legal help, easy to see option. Disliked: Old school feel, convoluted, poorly organized, no whitespace, multiple task bars.
2. CLA - Same concept as LawHelp, it provides legal resources and info based on your state. Liked: Better layout, more organized, less convoluted, more whitespace. Disliked: Categories are stacked as buttons vs block layout, long survey style application.
3. Probono - Provide legal info like the other two sites, but they actually advocate more for groups and develop projects or teams. Liked: Best design out of the three I examined, simple, more modern layout, strong visual hierarchy. Disliked: Different fonts, mixing good design (frame for content) with poor design (content).
Based on the analysis, I knew I needed make sure my site was very simple, well organized, easy to use, and ease to understand. Basically, I wanted to capitalize on the all the UX that isn’t prevalent in my competitor’s sites.
I needed to find concepts and ideas for the project based on my research and analysis, concepts that I thought would have the most effective impact for the product. So a couple things that I really like and wanted to incorporate were a large hero block, similar to the one shown here for Nest. Incorporating a large hero image, catchy phrase, and call to action button. This a popular pattern because it is simple, clean, and effective. Next, I thought that showing a how it works section would help alleviate confusion and make it easier to understand the process, so I liked Upwork’s concept here, it’s super simple and straight forward. Lastly, I was looking for well organized search results. After looking at my competitors, I didn’t really like the way information was laid out, so I knew I wanted to make it simpler. And since I learned from my audience analysis that most users found the process to be difficult, I really wanted to make sure that once they were given the information, they could find the details they needed easily. So I wanted to mimic a well organized layout, and this is a good pattern example from LinkedIn.
Information Architecture
Based on the audience analysis I created personas to represent the user type and paint a picture of who the user really is. These personas are based off of research, so by designing for my personas I’m designing for my actual users. As you can see here, this is Kim. She’s one of my archetypes or personas for the project. She’s a 44 year old Secretary from Tucson, Arizona. Kim is a divorced single mother of three boys, one of which unfortunately got into some trouble with the law recently. Kim wants to be able to help her son, but she can’t afford an attorney. She’s frustrated by the time and effort it takes to find legal information, resources, and advice, especially since she’s not very tech savvy. She would love to find a site where she could actually search for resources and apply for legal aid easily. Kim represents my user type that this product will be built for.
Once I created my personas, I needed to figure out the path the user will take to accomplish a task, and break that down into specific tasks, also known as user stories. I start with a problem statement describing WHO, WHAT, and WHY. For example, “Kim needs to find available pro bono legal services in order to help her son with his case.” I then break that down into relevant tasks allowing me to see pathways, or what Kim needs to be able to do with the product like, “Kim needs to find available pro bono legal services.”
These tasks can then be broken down even further into sub-actions thru the whole process like, “Kim needs to go to the website,” then “Kim needs to select her state.” and so forth.
There were a lot of different paths I could’ve designed for, like a lot of the competitor sites have different legal articles, but I wanted to make sure I was keeping the MVP in mind and just sticking to the goals and not over designing. So these user stories and pathways that I felt did just that.
In order to understand the path users take to accomplish a task, I needed to create a user flow. This flow allows me to see how the app will operate and help me find the most efficient way to map out the options and pathways for the product. For this project, I knew I needed to keep it simple, so there are only four main pages or options from the home screen, Apply, Search Resources, Register, and About.
If the user were to select Search Resources, first the user would select their state, then they would either use the search bar or select a category to search. The Apply page would allow the user to do just that, apply for legal services. The page is a simple application form that reiterates how the process works before diving in to the application itself. Originally, I just assumed that I could use the application form to apply and register all in one, but when I was testing out this concept with friends and family, I realized that there’s a divide there. People don’t associate them in the same way and it was hard for them to understand what it was meant to do. So, in addition to applying for services, the user would also be able to register to provide services separately. For this option the user would select the Register page and would simply fill out the application form to provide pro bono services.
Sketching is a great way to get the ideas down on paper and really see what it looks like, luckily with sketching, editing is very easy and fast. I sketched out some ideas incorporating the ideas I pulled from my generative research.
For my sketches, I replicated a hero block similar to Nest on the home page, I added a How it Works section similar to the Upwork pattern, and I stacked my search results in pattern similar to LinkedIn. After several iterations, I was ready to turn my ideas into digital versions.
These are the first digital versions of my sketches and the layout for the design, they’re the low fidelity wireframes. Considered low fidelity because they are meant to be very basic, not a lot of color or visual design elements, strictly layout. For the most part, my wireframes resemble my sketches almost exactly as I had pictured. I didn’t go through a ton of iterations on this, it was meant to be very simple and straight forward.
When I started thinking about names for the product, I really liked the term Pro bono, since its universal for free legal services. I knew I wanted to make sure the name was simple and catchy, so when thinking about words similar sounding to pro bono, I landed on Bonafide. I thought that this worked great because it means sincere and genuine. Ultimately, I just combined the two into Bonofide.
For the logo I just outlined the name in Montserrat, the font that I already decided on for the rest of the product. It turned out very simple and clean. It matched well with the rest of the product since it was the same font, but set itself apart as the logo since it was outlined.
The color I originally chose was like a yellowing gold just because it reminded me of law offices and I noticed a lot of it being used, generally against a dark background, generally like a navy, maroon, or hunter green. Ultimately I didn’t care for it, so I went with this purple color instead. I chose the purple for the main color, because it’s very modern and trendy right now, but it also symbolizes royalty, justice, and wisdom when looking at color theory, all associations that fit with the feel my product is aiming to express.
In order to test and make sure the product was aesthetically pleasing and understandable, I added the visual design elements like branding, color, and illustrations. I still made sure to keep my MVP in mind and keep it basic and simple throughout the process.
I chose to do Guerrilla testing, basically in-person random testing for visual appeal and ease of use. So I started by testing random users at my work. I created a scenario and gave them 2 task to accomplish that related to the project goals, by asking them to search and apply. The tasks were followed by two open ended questions asking about the overall impression of the product and what features they liked or disliked and why. It also asked what testers thought would improve the experience. After answering the questions, testers were asked to rate the overall appearance of the product on a scale from 1 to 10, also to rate how easy they thought the product was to use.
Overall Experiences
Through a couple of rounds of testing and iterations, results improved. By the final round, 100% of testers completed the first and second tasks directly, as in following the set pathway. The visual design rating averaged a score of 9 out of 10, while the ease of use rating averaged a score of 8 out of 10. The keywords used for testers overall impression feedback included, simple, useful, easy to understand, well organized, and clean. Overall testing results improved after resolving pain points through iteration.
Interactive Prototype
Final Thoughts
Successes & Learning Opportunities
I discovered a couple pain points that needed to be addressed, the testing results only improved after these pain points were addressed and resolved.
Testers were initially confused by…
1. The term pro-bono. Interestingly, all of the users that were confused thought they knew what it meant, but needed it validated. All were initially correct.
I went ahead and validated the definition for them by adding a simple card that defined the word for them. None of the testers admitted confusion after this card was added.
2. The success popup. I noticed that users found the success popup on the completed application a bit too awkward with small writing.
I remedied this by making the popup smaller, adjusting the layout, and using a larger font for instant recognition.
Some of the positive feedback I received for the product, highlighted several key features. Testers really liked the simple How it Works section that greatly added to their understanding. They also appreciated how simple and easy to fill out the application form was.
Next Steps
The product itself is still not complete, there are still a few more steps. First, there needs to be more testing to address any pain points within the product. Second, further iterations based on discovered pain points. Lastly, a plan needs to be created to prep for front-end development in order to launch the product.
Conclusions
I created an effective and intuitive website that is backed by user research, providing a solution that streamlines the process of finding legal aid. Also meeting the outlined goals, by allowing users to search for pro bono legal services, resources, and advice and to apply for, or register to provide pro bono legal services, resources, and advice within their state.
In the end I learned so much, all about pro bono volunteer work and legal firms. All about the different customers and types of users involved. But, most importantly, how to effectively understand and address their needs and concerns.