My Role Desktop-mobile redesign
Interaction Design
User Testing
Hi-Fi Prototyping
Team 12-people team including 3 UX designers
Keywords NGO
Single-hand Interaction
Duration Mar 2018 - ongoing

" Connecting survivors to suitable resources "

When human-trafficking survivors try to seek help, they neither know what available resources are out there, nor which organizations can serve them the best. Also, googling available options could take a long time. Our mobile-friendly platform provides those vulnerable and sensitive survivors the starting point to get adequate help. Users will need to finish a short survey to identify their conditions and needs, and then get customized NGO recommendation lists and seek help.

This is an ongoing project, and the iterated designs are currently under development. If you are interested, please take a look at our initial minimal viable product to get a general idea:


/ Understanding the Problem /

Human-trafficking issue is a completely new field for most of the team members. Before deciding what to do, the research team has interviewed people from different groups to form a hoslitic view. Let's first look at the typical journey of a trafficking survivor:

Tons of interview notes were converted to insights through affinity mapping. Potential solutions were brainstormed afterwards.

/ Understanding users /

Survivors are vulneralbe, sensitive and often have limited access to communication tools if they are still under control of criminals. To better describe the particular needs of our primary users, I created two personas to depict typical users and their using scenarios.

Considering feasibility and approachability, an online platform that provides a collection of organizations based on specific users' needs became our main concept.


NO.1 HMW make the design as inclusive as possible?

What if the survivor has drug issues ?
What if the survivor has vision disability?
What if the survivor is using the platform in darkness?
What if the survivor has low level of literacy?

NO.2 HMW enable safer browsing to avoid potential danger?

Scenario: She was secretly browsing the intercept platform at night. Suddenly, she heard a door opening and somebody was approaching her room. She needs to quickly exit the platform.

For trafficking survivors who are still controlled by criminals, their usage of mobile phone might be supervised. They don’t want others know that they are seeking help. Therefore, it is important to have a quick exit on the web page for them to eliminate the browsing record within seconds. Where shall I put the "panic button"? To make the button easily touched. I brainstormed multiple design alternatives, and then referenced Scott Hurf’s study about thumb interaction zone to justify the approachability.

We finally decided on the fourth option considering it’s reachability and flexibility:

NO.3 HMW present search results better?

Scenario: He finished the survey and got the search results.
However, there were just too much information to digest.

For every NGO, there’s a whole bunch of information that would probably influence whether a survivor can get help from it. However, pouring all those info directly to users really reduce the efficiency. I started with exploring potential interaction models on the result page. Although horizontal scroll could make the interface cleaner and keep users focused on details of one organization, we finally chose vertical scroll to speed up the experience.




After deciding the main format, I dived deeper into the card information design. I keep asking myself: what's the most important information for survivors when they are browsing the searching results? They need to (1) know the contact information and to (2) understanding if they can receive help from certain organization.

I tried different layout, and finally selected plan B because the "call-to-action" design can guide users to take actions.

Wait, what if there more than one suitable options? When users are making decisions, they will have preference first and might go back to compare two available options later. How could we save their preference? I also drafted two design alternatives to solve this problem.

Plan A

Plan B

While plan A seems to be more convenient for users to compare between two options, it doesn't make sense when users try to save more than one organizations ———— the frozen area will take up the full screen and users could no longer scroll it. As a compromise, I selected plan B, in which users can access saved items through the drop-down menu. The final result page looks like this:


We've now finished the design flow for our minimal viable product (see the chart below), however, there are still many problems to be solved and improvments to be made. Stay tunned!

• • • Explore more projects • • •