Moving People
with Purpose

Reimaging Immigration

Client:
B A L | Berry Appleman & Leiden LLP
New Feature for Cobalt
Internal & External Facing Application

2020 - 2021

Contribution:
User Experience Design
User Interface Design
Presentation & Communication
User Testing

THE CHALLENGE

Prior to submitting an immigration case to the US government, a BAL paralegal used to send a PDF to the beneficiary listing the legal documents needed to work on their case. The beneficiaries would then upload their files to the “Documents” page on Cobalt but did not know whether the files were the correct ones nor were they able to track the true progression of their document list. Beneficiaries were frustrated with the lack of visibility concerning their case's progress and paralegals felt bogged down by the frequency of communication concerning this step.

Prior to submitting an immigration case to the US government, a BAL paralegal used to send a PDF to the beneficiary listing the legal documents needed to work on their case. The beneficiaries would then upload their files to the “Documents” page on Cobalt but did not know whether the files were the correct ones nor were they able to track the true progression of their document list. Beneficiaries were frustrated with the lack of visibility concerning their case's progress and paralegals felt bogged down by the frequency of communication concerning this step.

Prior to submitting an immigration case to the US government, a BAL paralegal used to send a PDF to the beneficiary listing the legal documents needed to work on their case. The beneficiaries would then upload their files to the “Documents” page on Cobalt but did not know whether the files were the correct ones nor were they able to track the true progression of their document list. Beneficiaries were frustrated with the lack of visibility concerning their case's progress and paralegals felt bogged down by the frequency of communication concerning this step.

Prior to submitting an immigration case to the US government, a BAL paralegal used to send a PDF to the beneficiary listing the legal documents needed to work on their case. The beneficiaries would then upload their files to the “Documents” page on Cobalt but did not know whether the files were the correct ones nor were they able to track the true progression of their document list. Beneficiaries were frustrated with the lack of visibility concerning their case's progress and paralegals felt bogged down by the frequency of communication concerning this step.

Prior to submitting an immigration case to the US government, a BAL paralegal used to send a PDF to the beneficiary listing the legal documents needed to work on their case. The beneficiaries would then upload their files to the “Documents” page on Cobalt but did not know whether the files were the correct ones nor were they able to track the true progression of their document list. Beneficiaries were frustrated with the lack of visibility concerning their case's progress and paralegals felt bogged down by the frequency of communication concerning this step.

The high-level goal was to create an interactive Document Checklist that would keep beneficiaries and legal assistants up to date on the progress of their case. The designs would address the following issues:

The high-level goal was to create an interactive Document Checklist that would keep beneficiaries and legal assistants up to date on the progress of their case. The designs would address the following issues:

The high-level goal was to create an interactive Document Checklist that would keep beneficiaries and legal assistants up to date on the progress of their case. The designs would address the following issues:

The high-level goal was to create an interactive Document Checklist that would keep beneficiaries and legal assistants up to date on the progress of their case. The designs would address the following issues:

The high-level goal was to create an interactive Document Checklist that would keep beneficiaries and legal assistants up to date on the progress of their case. The designs would address the following issues:

  1. • A list that would give users the ability to see the list of documents needed.
  2. • The list would always show both users the exact progress.
  3. • The Document Checklist would be interactive where either user could add, edit, delete the files.
  4. • The interactive document checklist would integrate into the existing Documents page in Cobalt for both users.
  5. • Create new upload modals to improve the process of add files documents.
  1. • A list that would give users the ability to see the list of documents needed.
    • The list would always show both users the exact progress.
    • The Document Checklist would be interactive allowing the user to add, edit, delete the files.
    • The interactive Document Checklist would integrate into the existing Documents page in Cobalt for both users.
    • New upload modals would improve the process of adding files to immigration documents.

• A list that would give users the ability to see the list of documents needed.
• The list would always show both users the exact progress.
• The Document Checklist would be interactive allowing the user to add, edit, delete the files.
• The interactive Document Checklist would integrate into the existing Documents page in Cobalt for both users.
• New upload modals would improve the process of adding files to immigration documents.

• A list that would give users the ability to see the list of documents needed.
• The list would always show both users the exact progress.
• The Document Checklist would be interactive allowing the user to add, edit, delete the files.
• The interactive Document Checklist would integrate into the existing Documents page in Cobalt for both users.
• New upload modals would improve the process of adding files to immigration documents.

• A list that would give users the ability to see the list of documents needed.
• The list would always show both users the exact progress.
• The Document Checklist would be interactive allowing the user to add, edit, delete the files.
• The interactive Document Checklist would integrate into the existing Documents page in Cobalt for both users.
• New upload modals would improve the process of adding files to immigration documents.

doc_checklist
Original PDF that Beneficaries Received
org-doc-pg-1
Original View for Beneficiary’s Documents Page
org-doc-upld-modal-1
Original View for Document Upload Modal
cobalt-hero4

THE DESIGN

The Document Checklist’s was combined with the document repository to centralize all the functionalty associated to the user's files. I added small elements to both designs like the progress bar to the header to help create awareness about the progression of the checklist. The Upload Document modals were completely overhauled to accomodate their expanded functionalty and to clean up the previous UI's shortcomings.

Throughout the design process I was prototyping and iterating my designs based off the feed back that I received from users and the stakeholders. I conducted 14 user-testing sessions for clients of BAL and represented the Beneficiary’s perspective. Also, I lead 8 user-testing sessions with BAL paralegals.

Key takeaways:

The Document Checklist’s was combined with the document repository to centralize all the functionalty associated to the user's files. I added small elements to both designs like the progress bar to the header to help create awareness about the progression of the checklist. The Upload Document modals were completely overhauled to accomodate their expanded functionalty and to clean up the previous UI's shortcomings.

Throughout the design process I was prototyping and iterating my designs based off the feed back that I received from users and the stakeholders. I conducted 14 user-testing sessions for clients of BAL and represented the Beneficiary’s perspective. Also, I lead 8 user-testing sessions with BAL paralegals.

Key takeaways:

The Document Checklist’s was combined with the document repository to centralize all the functionalty associated to the user's files. I added small elements to both designs like the progress bar to the header to help create awareness about the progression of the checklist. The Upload Document modals were completely overhauled to accomodate their expanded functionalty and to clean up the previous UI's shortcomings.

Throughout the design process I was prototyping and iterating my designs based off the feed back that I received from users and the stakeholders. I conducted 14 user-testing sessions for clients of BAL and represented the Beneficiary’s perspective. Also, I lead 8 user-testing sessions with BAL paralegals.

Key takeaways:

The Document Checklist’s was combined with the document repository to centralize all the functionalty associated to the user's files. I added small elements to both designs like the progress bar to the header to help create awareness about the progression of the checklist. The Upload Document modals were completely overhauled to accomodate their expanded functionalty and to clean up the previous UI's shortcomings.

Throughout the design process I was prototyping and iterating my designs based off the feed back that I received from users and the stakeholders. I conducted 14 user-testing sessions for clients of BAL and represented the Beneficiary’s perspective. Also, I lead 8 user-testing sessions with BAL paralegals.

Key takeaways:

Combined the Document Checklist with the document repository to centralize all the functionality associated to the user's files. Added small elements to both designs like the progress bar to the header to help create awareness about the progression of the checklist. Overhauled the upload document modals to accommodate their expanded functionality and to clean up the previous UI's shortcomings.

Prototyped and iterated designs based off the feedback received from users and the stakeholders. Conducted 14 user-testing sessions for clients of BAL and represented the beneficiary’s perspective, and also led 8 user-testing sessions with BAL paralegals.

Key Takeaways:

  • The combination of the elements at the top of the table pushed the checklist down and the primary focus of the page was to interact with the area. The solution was to combine the table header with the progress bar, completely drop the “Help” widget and move the upload button down to the Document Repository table.
  • Users kept trying to click on the empty circle icon to the left of the row. This was fixed by converting those icons into an interactive element that would allow users to upload files in addition to the upload cloud icon on the right side of the row.
  • I simplify the icons on the right side of the rows by condensing all the actions into a drop-down menu. This helped visually declutter that area and allowed users to focus on the documents that were needed.
  • The combination of the elements at the top of the table pushed the checklist down and the primary focus of the page was to interact with the area. The solution was to combine the table header with the progress bar, completely drop the “Help” widget and move the upload button down to the Document Repository table.
  • Users kept trying to click on the empty circle icon to the left of the row. This was fixed by converting those icons into an interactive element that would allow users to upload files in addition to the upload cloud icon on the right side of the row.
  • I simplify the icons on the right side of the rows by condensing all the actions into a drop-down menu. This helped visually declutter that area and allowed users to focus on the documents that were needed.
  • The combination of the elements at the top of the table pushed the checklist down and the primary focus of the page was to interact with the area. The solution was to combine the table header with the progress bar, completely drop the “Help” widget and move the upload button down to the Document Repository table.
  • Users kept trying to click on the empty circle icon to the left of the row. This was fixed by converting those icons into an interactive element that would allow users to upload files in addition to the upload cloud icon on the right side of the row.
  • I simplify the icons on the right side of the rows by condensing all the actions into a drop-down menu. This helped visually declutter that area and allowed users to focus on the documents that were needed.
  • The combination of the elements at the top of the table pushed the checklist down and the primary focus of the page was to interact with the area. The solution was to combine the table header with the progress bar, completely drop the “Help” widget and move the upload button down to the Document Repository table.
  • Users kept trying to click on the empty circle icon to the left of the row. This was fixed by converting those icons into an interactive element that would allow users to upload files in addition to the upload cloud icon on the right side of the row.
  • I simplify the icons on the right side of the rows by condensing all the actions into a drop-down menu. This helped visually declutter that area and allowed users to focus on the documents that were needed.
  • The combination of the elements at the top of the table pushed the checklist down and the primary focus of the page was to interact with the area. The solution was to combine the table header with the progress bar, completely drop the “Help” widget and move the upload button down to the Document Repository table.
  • Users kept trying to click on the empty circle icon to the left of the row. This was fixed by converting those icons into an interactive element that would allow users to upload files in addition to the upload cloud icon on the right side of the row.
  • I was able to simplify the icons on the right side of the rows by condensing all the actions into a drop-down menu. This helped visually declutter that area and allowed users to focus on the documents that were needed.

BENEFICIARY'S REDESIGNED JOURNEY - UPLOAD DOCUMENTS

PARALEGAL'S DOCUMENTS PAGE

paralegal-screen-1
Document Checklist
paralegal-screen-3
Edit Document Checklist
cobalt-modal-hero4

THE MODALS

After the first iteration of the designs, the stakeholders expanded the functionality that the modals needed to cover. This offered a fantastic opportunity to update the UX & UI standards for the modals. I designed new guidelines that addressed the visual inconsistencies in how the elements were positioned, updated the font usage, created inline notifications, and established standards for using different colors based on the interactive features. I used alternative language for the user-client side users which differed from the one internal users would see, which was more relevant in an enterprise application.

After the first iteration of the designs, the stakeholders expanded the functionality that the modals needed to cover. This offered a fantastic opportunity to update the UX & UI standards for the modals. I designed new guidelines that addressed the visual inconsistencies in how the elements were positioned, updated the font usage, created inline notifications, and established standards for using different colors based on the interactive features. I used alternative language for the user-client side users which differed from the one internal users would see, which was more relevant in an enterprise application.

After the first iteration of the designs, the stakeholders expanded the functionality that the modals needed to cover. This offered a fantastic opportunity to update the UX & UI standards for the modals. I designed new guidelines that addressed the visual inconsistencies in how the elements were positioned, updated the font usage, created inline notifications, and established standards for using different colors based on the interactive features. I used alternative language for the user-client side users which differed from the one internal users would see, which was more relevant in an enterprise application.

After the first iteration of the designs, the stakeholders expanded the functionality that the modals needed to cover. This offered a fantastic opportunity to update the UX & UI standards for the modals. I designed new guidelines that addressed the visual inconsistencies in how the elements were positioned, updated the font usage, created inline notifications, and established standards for using different colors based on the interactive features. I used alternative language for the user-client side users which differed from the one internal users would see, which was more relevant in an enterprise application.

After the first iteration of the designs, the stakeholders expanded the functionality that the modals needed to cover. This offered a fantastic opportunity to update the UX & UI standards for the modals. I designed new guidelines that addressed the visual inconsistencies in how the elements were positioned, updated the font usage, created inline notifications, and established standards for using different colors based on the interactive features. I used alternative language for the user-client side users which differed from the one internal users would see, which was more relevant in an enterprise application.

OLD VERSION

Old-Document-Upload-2

REDESIGNED VERSION

modal-update

NEW STYLE STANDARDS

Group-82

THE IMPACT

This feature not only allowed users to be aware of the documents that were uploaded and the ones that were needed, but also improved efficiency among the paralegals, by cutting back the time spent responding to inquiries pertaining to the document Checklist.

My contribution improved the overall UI of Cobalt by redesigning the modals which became the new standard going forward. Also, my team’s recommendation to add AWS Image Recognition Services helped identify and spot potential errors during the scanning process.

This feature not only allowed users to be aware of the documents that were uploaded and the ones that were needed, but also improved efficiency among the paralegals, by cutting back the time spent responding to inquiries pertaining to the document Checklist.

My contribution improved the overall UI of Cobalt by redesigning the modals which became the new standard going forward. Also, my team’s recommendation to add AWS Image Recognition Services helped identify and spot potential errors during the scanning process.

This feature not only allowed users to be aware of the documents that were uploaded and the ones that were needed, but also improved efficiency among the paralegals, by cutting back the time spent responding to inquiries pertaining to the document Checklist.

My contribution improved the overall UI of Cobalt by redesigning the modals which became the new standard going forward. Also, my team’s recommendation to add AWS Image Recognition Services helped identify and spot potential errors during the scanning process.

This feature not only allowed users to be aware of the documents that were uploaded and the ones that were needed, but also improved efficiency among the paralegals, by cutting back the time spent responding to inquiries pertaining to the document Checklist.

My contribution improved the overall UI of Cobalt by redesigning the modals which became the new standard going forward. Also, my team’s recommendation to add AWS Image Recognition Services helped identify and spot potential errors during the scanning process.

This feature not only allowed users to be aware of the documents that were uploaded and the ones that were needed, but also improved efficiency among the paralegals, by cutting back the time spent responding to inquiries pertaining to the document Checklist.

My contribution improved the overall UI of Cobalt by redesigning the modals which became the new standard going forward. Also, my team’s recommendation to add AWS Image Recognition Services helped identify and spot potential errors during the scanning process.

Credits:
Product Manager: Diego Casillas
Principal Product Manager: Lindsey Holtgraves

Credits:
Product Manager: Diego Casillas
Principal Product Manager: Lindsey Holtgraves

Credits:
Product Manager: Diego Casillas
Principal Product Manager: Lindsey Holtgraves

Credits:
Product Manager: Diego Casillas
Principal Product Manager: Lindsey Holtgraves

Credits:
Product Manager: Diego Casillas
Principal Product Manager: Lindsey Holtgraves

© Copyright Phillip Retay 2022. All rights reserved.