My Role
User Experience (UX) Design Intern
Product Design, User Interviews, Usability Testing, Prototyping, Wireframing
Timeline
June 2024 - August 2024 (12 weeks, remote)
ResourceFull is a product created by AnnieCannons dedicated to empowering survivors of human trafficking by providing access to vital resources, tools, and information - connecting users to a interactive digital platform with local services, educational materials, and support networks to help them navigate life’s challenges.
During my 12-week internship at AnnieCannons, I was responsible for expanding ResourceFull through redesigning the Services screen, organizing program information based on color coded filter tags, and most importantly, implementing a new feature called MyMatches that allows survivors to find resources faster by building out their profile details.
The Problem
People who are survivors of human trafficking in need of resources can find it challenging and frustrating to constantly reach out to providers and see if they are eligible for the programs that they desperately need. How can we help them easily locate the resources that they need, so that they can feel less anxious and frustrated?
Validating the Problem
To validate this problem, I interviewed six people who were survivors of human trafficking and encouraged them to express their thoughts towards the general process of finding resources on a day-to-day basis.
Typically, a survivor would find out about an organization through word of mouth, find the organization's contact information, and contact them via phone call or email to see if they are eligible. While this encourages community building and trust, survivors who are potentially more disconnected from the community may feel dejected and wary to connect with services that they actually need.
“It is physically and mentally exhausting to locate resources...”
“I would rather know why I wasn’t accepted [to a service] rather than just a flat no...”
"Submitting an online form takes weeks to hear back from, which feels frustrating and anxiety-inducing...”
“From my experience, LGBTQ+ individuals are often discriminated by faith-based agencies”
Some survivors also shared apps that they have been using in order to make their search process easier, such as Google and ChatGPT. These show that there is a need in making sure that ResourceFull reduces survivors' overall cognitive load.
Building MyMatches
After interviewing survivors of human trafficking and establishing key design goals, potential constraints, and trauma-informed design principles, ResourceFull went through the following journey path:
Early Iterations
I made analog sketches of what MyMatches could look like as well as redesigning services in a way that reinforces the community's needs and further improves user interaction. In collaboration with the ResourceFull product manager, I was able to gather additional feedback, which I carried into the Figma wireframing phase.
Above: Simplified user journey flow for redesigned ResourceFull app (2024)
Above: A two-page spread containing low fidelity wireframe sketc for the following: compact & expanded program cards, filter tags, and Program Details.
User Testing
I coordinated two separate rounds of remote user testing via Figma and Zoom. The first round of user testing had six participants, where I gained valuable feedback towards user interaction and behavior that I took note of in preparation for the second round of user testing.
During the second round of user testing, I instructed three participants to navigate into a redesigned Figma prototype and share their insights on what could be further improved based on their personal needs and experiences as survivors.
Services
Job Story: I need to easily find a program based on types of services
In ResourceFull, one of the primary tasks survivors makes is to locate the programs that they need based on their current living situation. Based on trauma-informed design principles, the main user experience should feel safe and open no matter where the user is on the app. Thus, I wanted the UI to feel more calm and inviting, so that the user can feel relaxed as they navigate through the app. While the Figma prototype is only accounted for authenticated users, the redesign would also be valuable for new and unauthenticated users.
Inside the program card, I wanted users to be able to extract more information about the eligibility details of a program without making it too overwhelming, so I decided to add filter tags that gives the following information: Types of Service, Age Requirements, and Gender Requirements. The main reason why these show up in the program cards is because some of the common criteria that can make or break a survivor's eligibility are Age Requirements and Gender.
Program Cards and Filter Tags
The program card is an important source of information for survivors because from the Services page, they are more interested in seeing if there are any programs that they are eligible for. This is where the program card redesign and implementation of filter tags come in - with a new method of organizing information, the redesign reduces the user's overall cognitive load as they scroll through tens of hundreds of programs.
Above: Program card with filter tags
Filters Tab
In the original ResourceFull UI design, the Filters button is located right below the Sign Out/Exit button. To improve interactive access for users, I moved the Filters button below the Search bar. In addition, I wanted MyMatches and various Filter options to be accessible as they explore various types of programs that may or may not match their personal details or preferences.
Above: Redesigned ResourceFull UI - zoom in detail on Filters Bar
Above: Various UI states of Filters Tab component when tapped
Explore Services
Below the filter settings tab, the user can explore programs based on the types of services. During the interviewing phase, participants shared most common resources that a survivor may need to look for while navigating through the app. By having this feature, the user can easily browse through the categories and find the resource that they need more efficiently.
Program Details
Job Story: I need to figure out if I am eligible for this program.
When a user clicks on a program card, they are directed into Program Details page for that program. In this page, I designed accordion UI interfaces for four main sections of the program details that the user can easily show and hide. In addition, the user is also able to access information in the Provider Profile, where they are able to see details about the organization or provider who posted the program.
Integrating Filter Tags into Overview
From my personal experience in using information-heavy interfaces, it can easily be overwhelming and frustrating to have to read through everything and make sure the information is accurate. For survivors of human trafficking, the anxiety can feel more intense especially when after time has passed and everything has been checked, survivors still face countless rejections from agencies and providers without being provided an explanation.
One solution that I felt would alleviate the user's anxiety is adding the Overview section. In this section, users can swiftly read through the information given by the filter tags without having to scroll all the way down to see if they are eligible for a program. In addition, if a user is authenticated and completes their profile, the cognitive load is significantly reduced as they are able to quickly make the judgement for themselves just by looking at the filter tag colors.
MyMatches
Job Story: I want to get matched with programs without constantly using the Filters and/or Search Bar.
Once a user logs in or signs up in the app, they are able to use ResourceFull's new feature "MyMatches". With this feature, they are able to get matched with programs and services without having to constantly use the filters/search bar. MyMatches' results are based on the profile details that a user inputs in the Profile tab. In addition, the results on MyMatches vary based on which details are inputted by the user.
Above: Filters Tab states with the following interactions "MyMatches OFF" (top) and "MyMatches ON" (bottom)
One detail that I wanted to implement is that when the user toggles MyMatches ON, other filters "disappear". This is a deliberate design choice - when the user is already logged in and have sufficient information in their profile, I concluded that showing other types of filters may not be necessary during this part of the user journey.
Above: Various visual states for profile details completion
Above: Various visual states for MyMatches (toggle ON), depending on profile details completion
MyMatches ON Categories
When MyMatches is toggled on and the user has completed their profile details, the program cards are arranged based on the following categories:
- Based on Your Preferences
- Programs You May Be Eligible For
- Programs Near You
- Ideal Accommodations Provided
- New Programs
Above: Categories shown when MyMatches is ON
Feedback
Throughout the usability testing session, participants had an overall positive feedback and reception towards the main UX redesigns within ResourceFull:
“I like the typography of the i icon [on the emergency call text] as well as where it's now placed in the app...”
“[This app] looks very warm and clean, and information is organized in a way that doesn't feel distracting...”
"It's really helpful to see filter tags and extra details while you're scrolling, so you don't have to click on a [program] card all the time...”
“The new layout is really good and well-organized for someone who is more visual...”
Reflection
On usability testing
While conducting usability test sessions in the last four weeks of my internship, I was starting to get interesting feedback and insights from the participants. However, I was not able to conduct as much user testing sessions as I wanted due to time constraints. If I had the time, I would have put more effort into conducting more user tests and making sure that the ResourceFull team had enough information in order to move forward to developing MyMatches.
On execution
I spent a lot of time going back to the drawing board during early user tests because after getting feedback from participants, I would often think of a new design approach that could be closer to the ideal solution. I learned that getting feedback early and often was important because it guided me toward simpler implementations; that by the final Figma prototype was presented, felt more comforting and warm to the participants. Despite the struggles, I am happy with my contributions as I’ve gained new confidence in following the UX process and implementing my research into execution.
Potential Next Steps
If I had more time as a UX Design Intern at ResourceFull/AnnieCannons, these would be my potential next steps:
> Create more complex interactions on Figma prototype for unauthenticated users
> Implement visual icons within filter tags in order to account for red-green colorblind users
> Redesign program cards based on feedback - adding new interactive accordion for additional program details/filter tags
> Coordinate more usability testing sessions based on insights and feedback gathered
> Communicate with ResourceFull engineers and developers to anticipate issues or concerns in adding features based on the redesigns.
Key Takeaways
> Designed a new feature within ResourceFull called MyMatches witihin 12 weeks, allowing survivors to find resources faster by filling out their profile details.
> Built an interactive Figma prototype with expected user actions and behaviors.
> Redesigned Services and Program Details page to organize information effectively for survivors of human trafficking.
> Planned and conducted two separate rounds of usability testing to inform future product and design decisions.
> Provided a detailed hand-off documentation at the end of the internship, providing links to key insights and sketches made throughout the internship.
