Overview

Case Form Assistant is a web application designed for Fragomen case workers in order for them to locate data quickly, view data digitally and fill out government visa application forms efficiently. It also allows case workers to assemble petition packages for client review and final case filing. The business drive of the application is efficiency and lower print cost.

• Role: Researcher, UX Designer, Visual Designer

• Tool: Paper & Pen, Figma, Photoshop

• Duration: 3 months

• UX Methods: Primary Research, Secondary Research, Stakeholder Interviews, Wireframing, Userbility Testing

Challenges

Like any project there are challenges to the Case Form Assistant:

• The project started with a lot of ambiguity.

• There was no defined stories and requirements.

• The business requirements and directions changed several times during the project.

• The application is supposed to be part of bigger case worker portal, but the vision of that is unclear, so it is hard to imagine if it is going to fit into the bigger picture.

• It was hard to access users directly for user research.

Research

Due to the challenges and constraints I decided to start the project by understanding what the current case drafting process is by talking to stakeholders and subject matter experts. I learned that different office has different process, but in general the process is as depicted below. It is obvious that caseworkers play very important role in the whole petition process and there are a lot of micro tasks involved in almost every task they touch.

Current Case Drafting Process

Although I was not able to access users for interviews I learned general user’s needs, pains, and goals through talking to experts and studying existing caseworker personas.

Define Problems 

After the initial research I was able to define the general problems for government case form completion:

• Currently Fragomen stores its data collected from employers and foreign nationals (visa applicants) in several locations. There is no central place to locate data.

• Fragomen case workers fill out government visa application forms manually. The form can not be repopulated from data selected. It is time consuming and is more prone to human error.

• Case workers print out a significant amount of paper when drafting cases which is costly and is not environmental friendly.

Define Goals & Functionalities

Defining the problems helped me to set project goals and decide needed functionalities.

Goals

• Provide a central place for Fragomen case workers to locate data and complete government forms.

• Provide an easy way to view data digitally to reduce printing.

• Allow collected data to be pre-populated into government forms to reduce manual work.

• Help case workers to double check answers by suggesting relevant data automatically.

• Reduce error entry.

Needed Functionalities

Keeping the research findings and business goals in mind I defined the below functionalities needed for the application:

• Data panel for user to locate data

• Editable Fragomen version of form with error message and review funtionality

• Editable Government form

• User can decide to edit Fragomen form or government form and the data will be available on both when any edit is made

• Progress indicator to show progress

Initial Concepts

Lo-fi Wireframes

Keeping the business goals and needed functionalities in mind I started sketching wireframe ideas on paper.

Feedback

I presented the wireframes to the stakeholders and learned that:

• It will be too much technical lift to make editable Frogmen version and government version forms and have the data reflected in both form instantly.

• Have a progress bar is also hard to achieve because it is hard to define the logic for required fields for different scenarios.

Mid-fi Wireframes

I took the feedback and revised my design and come up with 3 digital wireframe concepts:

Assumptions

Due to lack of initial research about users needs I ran into several decision points and realized that there are many assumptions that needed to be validated:

1. Case workers would prefer to work on the government PDF format forms over a clean version that look different because they are familiar with the government PDF formats.

2. Most of the questions in the forms can be pre-populated but the system can add value by suggesting related data to human judgement questions.

3. Case workers would want to maximize the screens to better view data when working on the forms.

User Feedback

I showed the wireframes to 5 caseworkers in order to test my assumptions before moving forward. The results are:

Assumption 1: Case Workers prefer government form format

Findings - Users like the clean version form better

In order to test this assumption I created 4 versions of form layouts ranging from mimicking government form format to a clean and simple version. Surprisingly, 3 out of 5 users liked D, the liberal version. 1 liked C-moderate version and only 1 preferred A-mimic version.

Assumption 3: Case Worker User Full Screen

Findings: Case workers usually have several windows open, so they rarely use the full screen.

I discovered that most Fragomen case workers have 2 monitors in size of 2560px x 1440px each. But they usually have several windows open such as emails etc. so they rarely use full screen on one application. That means having the data panel open in a separate window will be the best way to maximize readability.

Prototyping & User Testing

I revised the wireframes based on the feedback received and created clickable prototypes in Figma for user testing. Below is example of the prototype used for the 1st round of user testing.

Prototype for User Test Round 1

Revisions

I did 2 rounds of user testing on 5 users and went through 6 iterations on the design. The main design changes and decisions are:

1. Making “Relevant Info” button more noticeable.

2. Get rid of the expand tab on the data panel because users don’s notice it.

3. Making “Questions” and “View PDF” tab more pronounced.

4. Revising the content and categories on the data panel to reflect correct content.

5. Adding LCA and Support Letter to the application, so the application includes almost all forms and documents needed for one case. In this case it is for H-1B.

6. Adding review session.

7. Adding petition assembly functionality.

Final Design

Visual Design

After finalizing the wireframes, I created visual mockups. The goal of the visual design is to be clean, and easy to navigate while holding maximum information.

Final Prototype

Next Steps

The application was presented in several internal and client meetings. It received great feedback and stakeholders wanted to see it built. Currently the product team is in the process finalizing the MVP for development in the 1st quarter of 2020.

After the application is developed the follow metrics can be used for measuring success:

• Time-on-task

• Task success rate

• User error rate

• User satisfaction

• Company print out reduction rate

Take Away

1. Finding the sweet spots of business needs and users needs is the key to a successful product.

2. Quick feedback from users and stakeholders is an efficient way to gain insights and help move project forward.

3. Business requirements could be changeable. Being flexible, but finding validation from the users is important.

4. Assumptions spark ideas and excitement, but assumptions proven to be wrong are inevitable and even more exciting.

   Check out my other UX design works, or back to the beginning of the project.