People who are forced to stay in immigration detention in Colorado because they cannot afford to pay a bond need access to service providers to request that their bond be paid. Then, they can leave detention and continue their immigration cases at home.
Donors who want to support the work of the Immigrant Freedom Fund need to feel a sense of trust in the organization to provide material support to pay immigration bonds.
My role: Design a solution at the intersection of both problems.
People held by ICE are in civil immigration proceedings - not criminal proceedings. Yet, the law says that many people can be held for months, even years - until they can pay a cash bond.
I assumed the user I was designing for was the detained person - but interviews with the organization leaders and immigration professionals illuminated that my users were actually the people advocating for their detained loved ones or clients.
So, my problem statement evolved:
People advocating for the release of someone in ICE detention in Colorado need to connect with the Immigrant Freedom Fund so they can be released and return home to their families.
I continued my design process with two users in mind:
My first challenge was to understand how users perceive and group information about immigration bonds.
I asked four users who were unfamiliar with the immigration bond system to group various pieces of information, and then name the categories they chose.
These tests highlighted that the bond fund application must stand alone, as it is the primary way that users will "request help" from the organization.
I distilled the categories into four groups to use for the top navigation menu, to adhere to common design conventions.
I audited other immigration bond fund sites to understand how they were organizing information. I called this step "collaborative analysis" - as ultimately these orgs are working towards the same goal.
Because the application for bond funds is so key to the work of these orgs, I wanted to understand where the application appeared in their menus, and if users found the journey there navigable.
I had six users navigate to the bond fund application on each of these sites.
I recorded their observations and how long it took them to find the application -
both in seconds and clicks.
The images below show the time it took for users to complete the task scenario. The accompanying site map shows in purple where the bond fund application is located on the organization's website.
Task scenario test results using other bond fund website:
"The amount of dropdown items make me feel overwhelmed.
It's probably there, but I can't find the application."
"I was surprised to find the application listed under 'Contact.'
That wasn't intuitive for me."
"Indicating the bond fund [loan] application with a Call to Action was clear and easy to navigate."
Combined with these user observations, I noted key takeaways in my version of a SWAT analysis for each sister bond fund organization.
This analysis, coupled with usability testing, highlighted that the bond fund application for the Immigrant Freedom Fund must be the primary CTA. As the sustainability of the organization relies on donations, the donation link must appear as a secondary CTA. A functional design would make both of these easy to find, to serve both the user and the organization, without creating confusion for either.
The level of stress and overwhelm that many users feel while interacting with this system means that the navigation menu must be straightforward and clear - and avoid inundating users with options and links. Because of the time sensitivity associated with immigration detention, ensuring that someone could submit one - or many - bond fund requests quickly and easily is also of primary importance.
After a series of sketches (including tracing those of other bond fund sites), I created a mid-fidelity wireframe for additional user testing. My goal was to design a user journey that reduced stress and made the bond application easy to find - regardless of the user's language.
I tested this prototype with 8 users - 4 from the previous test and 4 new users. I provided the same task scenario as above.
On average, users were able to find the bond fund application with the new design in only 15 seconds - 65 seconds less than with the best performing of the other bond sites.
This prototype incorporated the insights gained from my research so far:
✅ Translation toggle
✅ Standard icons to accompany menu items
✅ Limit menu items to combat overwhelm
✅ Bond application is primary CTA, above the fold
✅ Multiple avenues towards bond fund application, all indicated in bright pink
✅ CTA is in action-oriented language, agnostic of who executing the task
✅ Donation link is secondary CTA, indicated by color and button signifier
"The application was easy to find. I didn't have to wonder where it was."
"The icons helped clarify menu items - even when I tried to find the application in a different language."
"I felt at ease knowing that the bond fund application was open and available."
The final design of the Immigrant Freedom Fund homepage is navigable and clear. Leveraging the principles of Jakob's Law, a header navigation menu and descending heading classes, followed by a prominent Call to Action all present information in a way that is predictable and efficient: thereby reducing the cognitive load for users - whether they are fighting for their loved one or their client.
I leveraged Google Lighthouse and WCAG standards to ensure comprehensive accessibility.
Research from IFF website analytics showed that 85% of users are accessing the site on a mobile device. Considering a global population of users advocating for their loved ones in immigration detention, ensuring mobile operability was key.
I designed the home page and first contentful paint to load even with a weak internet connection. I avoided using high definition photos above the fold to ensure that the key information would populate regardless of bandwidth.
The built-in language toggle ensures that the site is fully translated (including the bond fund application) into Spanish and English, with more languages to come. Eighty-four percent of people assisted by the fund speak Spanish as their best language. Other languages include Russian, Ukrainian, English and French.
The site is optimized for screen-reader compatibility, including menu placement (left aligned), paragraph punctuation, and alt-text included for all images. The site has at least AA compliance for all text contrast, in accordance with WCAG standards.
HTTPS is required to ensure security of sensitive personal information submitted through the bond fund application.
The guiding principle of my UI design was to inspire trust in the Immigrant Freedom Fund and to reduce cognitive load and stress for the user.
The color palette is calming and evokes a sense of freedom of movement. It is modern without being inaccessible, and uses bright colors to guide users to the most vital information.
Design is an iterative process.
Being receptive to redirections illuminated by research was key to my design.
My problem statement and users changed once I had a better understanding of the immigration detention system and the goals of the Immigrant Freedom Fund. This pivot served as an opportunity for me to engage more deeply with other sister organizations and with the diverse user group I was designing for.
Ultimately, I created a design that incorporates the complex intersection of needs of people facing one of the most stressful and traumatic situations possible - and the needs of the organization trying to serve them.
Further research is the name of the game - and I can't wait to do more. The questions I am asking now include:
1. Do the translations of content on the page translate accurately to the other target languages (requiring input from professionals in localization)?
2. What is the value of building the site to allow the IFF to communicate status updates more fully to users. ie. as the bond application is received, in process, and approved or denied?
3. What SEO optimizations will drive both advocates and potential donors to the site?
Designing digital solutions to real-world problems
.png)
