Pro Bono Portal,
Progressive Web App Case Study
UI | UX (Capstone Project)
Project Duration: 3 weeks
@ General Assembly User Experience Design Immersive
Project Overview
Pro Bono Singapore is a registered charity who provides free legal services to citizens who are underprivileged. This one-stop portal is created for users to seek legal information. Since legal jargons is hard to grasp to individuals, this portal is also made to make law more accessible and understandable to the general public.
This app serves is where you can find free legal resources and also apply for free legal aid.
Role
UI/UX Designer
Teammates
Jonathan Zhu, Project Lead, UI/UX Designer
Jeannie Tan, UI Lead, UX Designer
Leonard Lim, UI/UX Designer
User Research
To understand the pain points and frustrations of the users, we did guerrilla interviews in the State Courts where the free legal clinic is located.
Guerrilla Interviews
Because it is not an easy topic to discuss, we were rejected umpteenth times. We camped at the site for 2 days to interview a total of 10 people.
Our objective of the research is to
1) understand the experiences of users who require legal assistance
2) Uncover any challenges and issues that users face when seeking legal information and/or legal assistance
Key Insights
Through affinity mapping, there were 4 main findings that we discovered when synthesising the interviews.
Accessibility of Information
1) Users want the legal terms to be simple and easy to understand
2) Users want the information to be in multiple languages
Research
1) Users tried searching online but were still unsure
2) Users need to find information quickly
Process
Users are unsure and need clarifications with legal processes
Service
Users find it challenging to get a queue number on-site
Defining the Problem
Problem Statements
User needs to know about applying for legal assistance because they are unsure about the legal process
User needs to access concise legal information easily so that they would not be confused when facing a legal problem
A user persona is developed to address the need and frustrations of the users of the ProBono app.
User Persona
Based on our research, Alex Pang is our user who needs to seek legal assistance but is unsure what to do. With the lack of resources, he wants to find relevant information that could help him.
Even though he did some research online, he was more confused as the information online is too extensive and convoluted.
He clarified his issue by going to legal clinic for a short consultation with a Pro Bono lawyer but left the session with more queries.
Developing
As we analysed the challenges that users face, we came out with some "How might we" to start solutioning.
"How might we"
"How might make legal information easy for all users?"
"How might we guide users towards applying for legal assistance so that they know what steps to take in their legal issue?"
"How might we present the extensive legal information in a way that is clear and easy to understand?"
Ultimately, the apps has 2 main purposes
Resource Hub
Where users can access legal information easily
Legal Help Application
To apply for legal help and with clear indication of which part of the process they are at
User flow
We carefully created user flows so that the issues of the users are addressed.
Design System
The colours and fonts were based on Pro Bono SG rebranding that was being done concurrently during this project.
Wireframing
Homepage
From HOME, users will already be able to access both the resource hub and application form for legal help.
Feature #1
The first feature is a resource hub. Where users can access legal information easily. By presenting information that is clearly categorised, it will allow users to easily search for the right information that they need
For the resource hub, the different topics were broken down to different sections.
Key iterations
During our usability test, generally there were not any issues regarding the user's journey to find for relevant information. However, users had commented regarding the language of use on the copy. User's felt that it was targeted towards men regarding the issue of divorce. Therefore, we changed the language to a gender neutral one.
Feature #2
The second feature is a legal help application. By providing an application form that is easy to access and submit, it will allow users to know how to apply for assistance when they need to.
The forms that given by Pro Bono initially were all different forms for different schemes that users were applying form. To avoid confusion to users, the form that is created is now a single form for all users. Pro Bono SG will then inform the users which scheme that they are illegible for. This way, it is easier to access and submit their information to Pro Bono SG.
Once their information has been submitted, the users will be able to see their application status in their profile. But what happens after their application requires certain document or when it is approved?
Users will be notified if they have a message in their inbox. The status bar was grey previously, so we had colour coordinated the different statuses. Orange being that an action is needed on the users part, green indicating that their application is successful and red indicating that the user did not get the scheme.
Key iteration 1
During our usability test, users had issues accessing the applications. They were not certain of where to click when tasked to upload documents. The labels were changed to a card style look to address this issue.
The intensity of the colour used has been reduced because users have mentioned that it is harsh on their eyes.
In terms of copy, microcopies were added and the scheme names were spelled out because we cannot assume that all users know the name of the schemes.
Key iteration 2
To facilitate another flow of uploading documents, we added another way to upload which is via the inbox message.
The layout of the inbox is changed to add some microcopies to indicate the time and the category of the message.
Key iteration 3
To standardise the colour from the previous screen, the banner colour changed as welll. More micro copies were added in this section to facilitate the users further.
Content Style Guide
One of the main issues that was faced by our users is that legal jargons are sometimes had to comprehend. Therefore, we created a content style guide so that the users will be able to read the information with ease.
View content style guide here
Final Prototype
Click through to view full prototype
Reflection and Testimonial
The process
In the beginning of this capstone project, we really struggled to get users to interview. Despite camping at the centre, we faced many rejections because users were not comfortable talking after speaking to the pro bono lawyers. Even when we tried to assure that we will not pry into their legal issues.
Despite rejections, in both our interview and user tests, we managed to concur it.
As a whole in a team, our dynamics matched really well and we helped each other to build each other weaknesses. We criticised and questioned assumptions in order to propose the most ideal solution for our client.
Testimonial from Client
The client was satisfied with our prototype and have decided to implement our proposal to production. We also received a testimonial from our client.
Here's a snippet of it:
"During this time, the team proved to be diligent, competent, pro-active and self-motivated.
We were impressed by both the team’s industry as well as their ability to grasp the mission of PBSG and the needs of applicants needing legal assistance. Despite tight timelines, the team took the time and effort to speak with various PBSG departments to understand our priorities, as well as pain points on the operational level. In addition, the team also came down to the State Courts on multiple occasions to conduct market surveys and test the prototype they had developed with PBSG’s target clientele (individuals facing legal crises).
This thorough and thoughtful process bore fruit in a final proposed app design that we find to align closely with our needs and goals, backed up by data from user-testing done by the team. As such, we are likely to incorporate their proposed design features and elements into the first version of our web-app.
Jonathan, Jeannie, Nadira and Leonard exhibited strong teamwork and problem-solving ability as well as a heart for the community. We would be happy to work with this team again. We are proud of what they have already achieved, and wish them all the best in their future projects and engagements."