Problem

The COVID-19 outbreak within migrant worker dormitories in Singapore resulted in a government-ordered quarantine. Migrant workers were unable to go out to work and battled boredom and anxiety. It's Raining Raincoats (IRR), a non-profit helping migrant workers in Singapore, wanted to substitute this frustration with education by matching migrant workers with volunteers to teach them English during quarantine. The high influx of requests made the manual process of using 16 excel sheets to match potential students arduous and inefficient, resulting in only 30% of the students to be matched.

User Research Insights

"There are multiple excel sheets with different color codes that makes things confusing for volunteers"

"Our matching sheet needs to be constantly updated and checked"

"We don't keep a history of the matches"

"There are multiple sheets to reassign students and volunteers"

"Often having to refer to 2 or more sheets during the matching process which is tedious and time consuming"

Tackling the multiple excel sheets
(Making the screening, matching and follow up process clear)

After identifying the main processes undertaken at IRR into four parts: Screening, matching, notifying and following up with matches, dropped out. I used these steps to flesh out the main pages of the internal management system and explored the information architecture and placement of the navigation bar.

Above, I explored the layout of the main processes and how these processes may differ for students and teachers.

During our user interviews, we noticed that there some cases needed urgent following up and IRR team would have trouble keeping track of teachers and students. Thus A, made sense as red notifications would alert the user on the urgency of individuals that needed following up with. However, the navigation bar felt overwhelming and repetitive with some processes that were similar for both teachers and students. Additionally, as IRR have separate teams that manage students and teachers, it seemed more appropriate to go for B so each communication team would not be confused by tasks needed to be done by the other team. Though it made the process easier for each communication team, it still was repetitive.

Thus, I explored creating a simpler tab bar that highlighted the main processes and only showed students or teachers within the tabs in C. This design highlights the 4 main processes, and since only students are screened and only teachers need following up, separating the categories by teachers and students seemed redundant. C was beneficial as it took up less space, and allowed for more fields within tables if needed.

We finalized on D which combined the simple processes but added a section for profiles of students and teachers, which enabled users to have an overview of the statuses of all students and teachers instead of going into separate tabs. The "dropped out" tab was removed as no actions needed to be undertaken when either a student or teacher has dropped out and users were still able to view anyone who dropped out within the profiles tabs. D helped reduced the amount of tabs being toggled between and made the processes clear.

Simplify the screening process

Simplify – I explored several interfaces to speed up and ease the screening process. Its Raining Raincoats screeners make about more than 30 calls a day and this process needed to be quick. After narrowing down the key details needed for screening such as (interest to learn english and english proficiency), I analyzed which features would allow IRR to screen students in bulk.

While As drag and drop feature would have helped screeners create a visual on who is left to screen. Since this process is usually done in bulk simultaneously by a few screeners, only viewing 5 students could get confusing and does not make get use of the screen. Thus I stuck with a table showcasing all students that had to be screen, shown in B and C. While B allows users to focus on selecting a proficiency, it prevented screeners from double checking other important details with students. Substituting a modal pop up for a in-line drop down, in C helped screeners double check other details.

Applying to context and removing redundancy – After testing, users gave feedback about the after selection box that the description is cut off and does not improve readability when double-checking. I realized the description was slightly redundant and only needed to maintain consistency amongst screeners on the proficiency of students and iterated it from A to B.

Ensuring students are matched properly.

To replace the manual process of referring to 2 excel sheets and matching students. We ideated an automated process that would generate a few matches based on a student and teacher's native language, english proficiency and any second languages that a teacher might have.

Upon reviewing with the IRR team, we were given feedback that it would be ideal to have slightly more options as well as the option to search by company of volunteers. Modal pop up A did not provide context to why an "80% match" is good and would be hard to differentiate which volunteer is best suited if there are similar matches.

I ideated options C and D to see how the search bar option would pan out.

Consistency – D's search bar is consistent with the existing search bar that we use to search within the table. To reduce confusion the CTA button was taken away and users were either able to select a teacher to match directly or close the pop up.

Solution

Creating an internal management system that streamlined the screening, matching and follow up processes so the IRR team could have an updated details of each migrant worker and volunteer that is waiting to be paired up.

Screening Final Prototype

Matching Final Prototype