SIREN Case Management
SIREN Case Management
a mobile and web app digitizing and centralizing case management to better help low-income immigrants and refugees
a mobile and web app digitizing and centralizing case management to better help low-income immigrants and refugees
Role
Role
Sole product designer
Sole product designer
Timeline
Timeline
8 months
8 months
Tools
Tools
Figma, Figjam
Figma, Figjam
Team
1 project manager + 5 developers
1 project manager + 5 developers
Summary
Summary
The problem
The problem
SIREN staff struggle with juggling many different technologies to manage client cases.
SIREN clients are not the most technologically-savvy, but can’t waste time visiting the office for short visits.
SIREN staff struggle with juggling many different technologies to manage client cases.
SIREN clients are not the most technologically-savvy, but can’t waste time visiting the office for short visits.
The solution
The solution
A centralized web dashboard will help SIREN staff manage their cases more efficiently and quickly.
A mobile app that allows SIREN clients to complete onboarding and track their cases remotely will save them precious time.
A centralized web dashboard will help SIREN staff manage their cases more efficiently and quickly.
A mobile app that allows SIREN clients to complete onboarding and track their cases remotely will save them precious time.
Background
Background
Helping immigrants & refugees in the Bay Area
Helping immigrants & refugees in the Bay Area
SIREN (Services, Immigrant Rights, & Education Network) is a nonprofit based in San Jose that provides legal aid to low-income immigrants and refugees and community education to propel policy advocacy and civic engagement.
SIREN (Services, Immigrant Rights, & Education Network) is a nonprofit based in San Jose that provides legal aid to low-income immigrants and refugees and community education to propel policy advocacy and civic engagement.
However, they were struggling with their workload and connecting with their community remotely.
The staff approached my team at Blueprint to help solve this problem. They were using multiple platforms to manage cases and didn't have direct, virtual access to their clients. All of this minimized their efficiency and took time away from actually helping their clients.
The staff approached my team at Blueprint to help solve this problem. They were using multiple platforms to manage cases and didn't have direct, virtual access to their clients. All of this minimized their efficiency and took time away from actually helping their clients.
How might we create digital solutions that streamline case management for both SIREN staff and clients?
How might we create digital solutions that streamline case management for both SIREN staff and clients?
User research
User research
Understanding the users & problem space
Understanding the users & problem space
Based on their own experiences and complaints received from clients, SIREN conducted their own research and presented the pain points to us.
For SIREN staff, they had a few challenges with the current technologies they were using the manage client cases.
Based on their own experiences and complaints received from clients, SIREN conducted their own research and presented the pain points to us.
For SIREN staff, they had a few challenges with the current technologies they were using the manage client cases.
Maintaining many different platforms (Microsoft 365, INSZoom, Jotform) since none completely fulfilled their needs.
Maintaining many different platforms (Microsoft 365, INSZoom, Jotform) since none completely fulfilled their needs.
Additionally, these platforms lacked integration with one another as well, which could lead to potential information loss.
Additionally, these platforms lacked integration with one another as well, which could lead to potential information loss.
For SIREN clients, their pain points laid in not having certain luxuries many of us may be used to.
For SIREN clients, their pain points laid in not having certain luxuries many of us may be used to.
For SIREN clients, their pain points laid in not having certain luxuries many of us may be used to.
Do not have the time and resources to drive to the office for several short visits as they cannot take time off work and need to take care of family.
Do not have the time and resources to drive to the office for several short visits as they cannot take time off work and need to take care of family.
80% of clients only have access to a mobile device, so interacting with multiple web-forward apps can be a confusing and disjointed experience.
80% of clients only have access to a mobile device, so interacting with multiple web-forward apps can be a confusing and disjointed experience.
This suggests building a mobile platform for clients is the most useful since they have access to that resource.
Since I would be working with two different user types, I created two personas to help me put myself in the shoes of my users and guide my design decisions better.
This suggests building a mobile platform for clients is the most useful since they have access to that resource.
Since I would be working with two different user types, I created two personas to help me put myself in the shoes of my users and guide my design decisions better.
Logistical Lawyer user persona
Logistical Lawyer user persona
Concerned Client user persona
Concerned Client user persona
Define
Define
Identifying key features
Identifying key features
To help me, my team, and the nonprofit get a clearer picture of how the client-facing mobile app would work, how the staff-facing web app would work, and how they relate to one another, I created 2 user flows.
To help me, my team, and the nonprofit get a clearer picture of how the client-facing mobile app would work, how the staff-facing web app would work, and how they relate to one another, I created 2 user flows.
To help me, my team, and the nonprofit get a clearer picture of how the client-facing mobile app would work, how the staff-facing web app would work, and how they relate to one another, I created 2 user flows.
Client-facing mobile app user flow
Client-facing mobile app user flow
Staff-facing web app user flow
Staff-facing web app user flow
These helped us determine the MVP features for both apps as well.
For the client-facing mobile app, the core features would be:
These helped us determine the MVP features for both apps as well.
For the client-facing mobile app, the core features would be:
Submit intake form
Submit intake form
This is what clients must fill out so SIREN can have their basic and case-specific information.
This is what clients must fill out so SIREN can have their basic and case-specific information.
Upload legal documents
Upload legal documents
Clients need to upload their legal documents so attorneys can holistically review their case.
Clients need to upload their legal documents so attorneys can holistically review their case.
Receive status updates
Receive status updates
SIREN staff will notify clients on the status of their case and send any reminders needed.
SIREN staff will notify clients on the status of their case and send any reminders needed.
Schedule consultations
Schedule consultations
If clients are approved, they will be able to schedule an attorney appointment through a Calendly integration.
If clients are approved, they will be able to schedule an attorney appointment through a Calendly integration.
Language preference
Language preference
SIREN’s main client demographic are English-speaking, Spanish-speaking, and Vietnamese-speaking.
SIREN’s main client demographic are English-speaking, Spanish-speaking, and Vietnamese-speaking.
These features would digitize the onboarding process for clients and allow them to complete it remotely on their mobile devices, saving their time and energy.
For the staff-facing web app, the core features would be:
These features would digitize the onboarding process for clients and allow them to complete it remotely on their mobile devices, saving their time and energy.
For the staff-facing web app, the core features would be:
View/edit intake responses
View/edit intake responses
This allows admin to review a client’s information and see if they can help their case.
This allows admin to review a client’s information and see if they can help their case.
Send updates to clients
Send updates to clients
This allows staff to send any necessary reminders and increases transparency with clients.
This allows staff to send any necessary reminders and increases transparency with clients.
Organize attorney appointments
Organize attorney appointments
Through a direct link to the nonprofit's Calendly account, SIREN staff can adjust appointments easily.
Through a direct link to the nonprofit's Calendly account, SIREN staff can adjust appointments easily.
Form builder
Form builder
As policies and requirements change, SIREN staff may need to update their intake forms to reflect those changes.
As policies and requirements change, SIREN staff may need to update their intake forms to reflect those changes.
Account approvals & permissions
Account approvals & permissions
With the several different employees at SIREN, there needs to be various access levels to avoid chaos and confusion.
With the several different employees at SIREN, there needs to be various access levels to avoid chaos and confusion.
Having all of these functionalities be centralized in one dashboard would prevent SIREN staff from having their cases be scattered across multiple platforms and allow them to work more efficiently.
Having all of these functionalities be centralized in one dashboard would prevent SIREN staff from having their cases be scattered across multiple platforms and allow them to work more efficiently.
Ideation
Ideation
Making our vision come to life
Making our vision come to life
Now that my team and the nonprofit were on the same page about what the features would be, I started sketching and creating mid-fidelity wireframes.
Now that my team and the nonprofit were on the same page about what the features would be, I started sketching and creating mid-fidelity wireframes.
Mid-fidelity iterations of components in the mobile and web app
Mid-fidelity iterations of components in the mobile and web app
I went went through many iterations during the mid-fidelity stage since there are many ways to present certain UI patterns. I wanted to have options to get feedback on what would be the most intuitive for my users. I presented these during designer critiques and stakeholder meetings to determine what to move forward with.
For example, we went forward with something similar to the first version of the case tracker card since it was expressed by designers and the stakeholder that it was easy to follow and gave just the right amount of context to each step in the onboarding process.
After receiving this feedback, I moved onto high-fidelity mockups. I received SIREN’s branding colors and made adjustments as necessary to increase contrast.
I went went through many iterations during the mid-fidelity stage since there are many ways to present certain UI patterns. I wanted to have options to get feedback on what would be the most intuitive for my users. I presented these during designer critiques and stakeholder meetings to determine what to move forward with.
For example, we went forward with something similar to the first version of the case tracker card since it was expressed by designers and the stakeholder that it was easy to follow and gave just the right amount of context to each step in the onboarding process.
After receiving this feedback, I moved onto high-fidelity mockups. I received SIREN’s branding colors and made adjustments as necessary to increase contrast.
Usability testing
Usability testing
Learning from our users
Learning from our users
For the client-facing mobile app, the 3 tasks I tested were:
Submitting another intake form
Uploading a document
Scheduling an appointment
Unfortunately, I wasn’t able to test of clients themselves due to privacy issues. However, I was able to test on staff, who were the closest stakeholders as they deeply understand what clients need and struggle with.
I used a feedback capture grid to summarize the insights from these testing sessions and any insight that was echoed by multiple participants is indicated by a +1 sticker.
For the client-facing mobile app, the 3 tasks I tested were:
Submitting another intake form
Uploading a document
Scheduling an appointment
Unfortunately, I wasn’t able to test of clients themselves due to privacy issues. However, I was able to test on staff, who were the closest stakeholders as they deeply understand what clients need and struggle with.
I used a feedback capture grid to summarize the insights from these testing sessions and any insight that was echoed by multiple participants is indicated by a +1 sticker.
Mobile usability testing feedback capture grid
Mobile usability testing feedback capture grid
Based on the +1 stickers, the key pain points were:
Based on the +1 stickers, the key pain points were:
Unclear icons
Unclear icons
There was confusion on where to go on the navbar since the icons for “Intake” and “Upload” looked super similar.
There was confusion on where to go on the navbar since the icons for “Intake” and “Upload” looked super similar.
Too much margin space
Too much margin space
The components and text felt too small due to the large margins, making it difficult to digest all the info.
The components and text felt too small due to the large margins, making it difficult to digest all the info.
More instructions needed
More instructions needed
SIREN clients are not tech-savvy, so they’re not familiar with how to use certain features without some direction.
SIREN clients are not tech-savvy, so they’re not familiar with how to use certain features without some direction.
For the staff-facing web app, the 4 tasks I tested were:
Viewing and editing client intake form responses
Sending a reminder to a client
Editing a form
Approving and adjusting permissions for an employee's account
I tested on staff and again used a feedback capture grid to compile my insights.
For the staff-facing web app, the 4 tasks I tested were:
Viewing and editing client intake form responses
Sending a reminder to a client
Editing a form
Approving and adjusting permissions for an employee's account
I tested on staff and again used a feedback capture grid to compile my insights.
Web usability testing feedback capture grid
Web usability testing feedback capture grid
Again, according to the +1 stickers, the key revisions needed were:
Again, according to the +1 stickers, the key revisions needed were:
Visual indication for edit
Visual indication for edit
Many users wanted a visual indication that they were in editing mode to know which state they're in.
Many users wanted a visual indication that they were in editing mode to know which state they're in.
Unclear icons
Unclear icons
It would be helpful to add labels to certain icons to definitively indicate the action that would be taken and avoid any uncertainty.
It would be helpful to add labels to certain icons to definitively indicate the action that would be taken and avoid any uncertainty.
Success indicators
Success indicators
An oversight on my part, but users weren’t sure if their changes in the form builder were being updated in the backend.
An oversight on my part, but users weren’t sure if their changes in the form builder were being updated in the backend.
Iteration
Iteration
Addressing user feedback
Addressing user feedback
Here are some before and afters of the major priority revisions I made for the client-facing mobile app.
Here are some before and afters of the major priority revisions I made for the client-facing mobile app.
1. Unclear icons
1. Unclear icons
To clarify the icons in the navbar:
To clarify the icons in the navbar:
Added labels in the navbar
Added labels in the navbar
1
Changed the icons for “Intake” and “Upload”
Changed the icons for “Intake” and “Upload”
2
2. Too much margin space
2. Too much margin space
To make elements on the mobile app more digestible:
To make elements on the mobile app more digestible:
Decreased the margin space by enlarging the components
Decreased the margin space by enlarging the components
1
Increased the font size
Increased the font size
2
3. Need for more instructions
3. Need for more instructions
To help clients understand how to use certain features:
To help clients understand how to use certain features:
Added a landing page for uploading a specific document with more instruction
Added a landing page for uploading a specific document with more instruction
1
Added a tooltip, as suggest by SIREN staff
Added a tooltip, as suggest by SIREN staff
2
Here are some before and afters of the major priority revisions I made for the staff-facing web app.
Here are some before and afters of the major priority revisions I made for the staff-facing web app.
1. Visual indication for editing + unclear icons
1. Visual indication for editing + unclear icons
To make editing and icons more distinct:
To make editing and icons more distinct:
Had text field outlines appear immediately when edit is pressed
Had text field outlines appear immediately when edit is pressed
1
Added labels to icons
Added labels to icons
2
2. Success indicators
2. Success indicators
To reassure users their changes were saved/published:
To reassure users their changes were saved/published:
Added success indicators
Added success indicators
1
Final solution
Final solution
Introducing SIREN the apps
Introducing SIREN the apps
Below is a video of the mobile prototype.
And below here is a video of the web prototype.
Client-facing mobile app
Client-facing mobile app
Language selection + homepage
Language selection + homepage
Clients will be able to select their language preference as soon as they open the app for the first time. On their homepage, they’ll see reminders of any actions they need to take and their case tracker card that lets them know where they are in the process. There are contact buttons to reach SIREN in case of any questions or concerns as well.
Clients will be able to select their language preference as soon as they open the app for the first time. On their homepage, they’ll see reminders of any actions they need to take and their case tracker card that lets them know where they are in the process. There are contact buttons to reach SIREN in case of any questions or concerns as well.
Intake form
Intake form
The first step in SIREN’s onboarding is filling out an intake form. The form will log a client’s basic information, immigration information, and most importantly, what type of case they’re seeking help for.
The first step in SIREN’s onboarding is filling out an intake form. The form will log a client’s basic information, immigration information, and most importantly, what type of case they’re seeking help for.
Document upload
Document upload
After submitting an intake form, clients need to upload any necessary legal documents. Clients can either take photos of the documents in app or upload the photos from their camera roll.
After submitting an intake form, clients need to upload any necessary legal documents. Clients can either take photos of the documents in app or upload the photos from their camera roll.
Schedule attorney appointments
Schedule attorney appointments
If a client is approved for consultation with SIREN, they’ll be able to schedule an appointment with their attorney through a Calendly integration. An in-app browser will open when scheduling a new appointment and clients will be able to view upcoming appointments as well.
If a client is approved for consultation with SIREN, they’ll be able to schedule an appointment with their attorney through a Calendly integration. An in-app browser will open when scheduling a new appointment and clients will be able to view upcoming appointments as well.
Staff-facing web app
Staff-facing web app
Dashboard homepage
Dashboard homepage
When staff signs in, they’ll see a table of clients with their unique IDs. The staff will be able to search for a specific client and filter/sort through the table. Additionally, the top navbar includes a link to the Calendly site to make any adjustments to attorney appointments.
When staff signs in, they’ll see a table of clients with their unique IDs. The staff will be able to search for a specific client and filter/sort through the table. Additionally, the top navbar includes a link to the Calendly site to make any adjustments to attorney appointments.
Client information + actions
Client information + actions
By clicking on a client’s row in the table, staff will be able to see an overview of their intake form responses and legal documents. Client responses are also editable in case of any mistakes or if any of their information has changed. To populate the client’s mobile homepage with reminders and update their case tracker card, the staff can take client actions here as well.
By clicking on a client’s row in the table, staff will be able to see an overview of their intake form responses and legal documents. Client responses are also editable in case of any mistakes or if any of their information has changed. To populate the client’s mobile homepage with reminders and update their case tracker card, the staff can take client actions here as well.
Form builder
Form builder
As policies and requirements change, SIREN staff can create a new form or edit, preview, or delete a previous ones in the form builder to receive the necessary information needed to help their clients.
As policies and requirements change, SIREN staff can create a new form or edit, preview, or delete a previous ones in the form builder to receive the necessary information needed to help their clients.
As policies and requirements change, SIREN staff can create a new form or edit, preview, or delete a previous ones in the form builder to receive the necessary information needed to help their clients.
Account settings + permissions
Account settings + permissions
There are 3 levels of access in the dashboard. A Viewer can only view the elements of the dashboard, while an Editor can edit intake form responses and the forms themselves. An Admin can do everything an Editor can do, and also approve staff accounts, delete client accounts, and change staff permissions.
There are 3 levels of access in the dashboard. A Viewer can only view the elements of the dashboard, while an Editor can edit intake form responses and the forms themselves. An Admin can do everything an Editor can do, and also approve staff accounts, delete client accounts, and change staff permissions.
Success metrics
Success metrics
Making an impact on the community
Making an impact on the community
With the mobile app, clients can manage their case remotely, saving them time and resources. And with having everything accessible on their mobile devices, they’ll have more transparency in their legal processing and feel more empowered and supported.
With a centralized dashboard, SIREN staff will have a more efficient, productive case management process, which will allow them to better focus on helping their clients. While these apps were in development, SIREN mentioned this project in a grant application and was able to receive the grant, being able to take on more clients and case types in the future.
With the mobile app, clients can manage their case remotely, saving them time and resources. And with having everything accessible on their mobile devices, they’ll have more transparency in their legal processing and feel more empowered and supported.
With a centralized dashboard, SIREN staff will have a more efficient, productive case management process, which will allow them to better focus on helping their clients. While these apps were in development, SIREN mentioned this project in a grant application and was able to receive the grant, being able to take on more clients and case types in the future.
Reflection
Reflection
My takeaways
What could’ve been improved?
What could’ve been improved?
Designer-development collaboration is always a point of contention on any project or team, so there was some friction during handoff. I think giving more frequent design updates could’ve allowed for a smoother development cycle. Also, as a team, we could’ve been more transparent on what we could handle and emphasize that we would deliver on MVP features to better manage stakeholder expectations.
Designer-development collaboration is always a point of contention on any project or team, so there was some friction during handoff. I think giving more frequent design updates could’ve allowed for a smoother development cycle. Also, as a team, we could’ve been more transparent on what we could handle and emphasize that we would deliver on MVP features to better manage stakeholder expectations.
What did I learn?
What did I learn?
I learned the incredible value you can get from usability testing and frequent critique sessions. SIREN’s clients are a demographic I don’t interact with often and it was eye-opening to see how given certain circumstances, how you interact the digital world is very different from how others do. It made me challenge my own biases and this is a lesson I carry with me whenever I design now.
I’ve always wanted to see firsthand how tech can be leveraged for social impact, and I was able to achieve that goal with this project. Working on these apps that could affect my own team members’ families was an extremely humbling experience and I look forward to utilizing my design skills to empower more communities.
I learned the incredible value you can get from usability testing and frequent critique sessions. SIREN’s clients are a demographic I don’t interact with often and it was eye-opening to see how given certain circumstances, how you interact the digital world is very different from how others do. It made me challenge my own biases and this is a lesson I carry with me whenever I design now.
I’ve always wanted to see firsthand how tech can be leveraged for social impact, and I was able to achieve that goal with this project. Working on these apps that could affect my own team members’ families was an extremely humbling experience and I look forward to utilizing my design skills to empower more communities.