Maintaining community involvement through volunteer support and donations while engaging refugee support.
A quick RIT world tour...
Refugee Immigration Transactions  (RIT) has been assisting the refugee community in the Bay Area to adjust to American society, culture, and higher education. Volunteers provide those in need of support and donations. 
The current site has too much information, and the donation and volunteer sign-up forms had to be simplified.
We partnered with RIT's senior communications & coordinator. Their site is built with Squarespace, so we had to design within its limitations. Our designs were then passed on to a developer to implement. 
 A quick recap of updates.
The updated landing page was simpler to navigate. By simplifying both the donation and volunteer process, the users were less overwhelmed by the length and amount of questions. 
• Landing page
• Donation process
• Volunteer sign-up
 Addressing the users' empathy
We addressed the need to streamline the donation and volunteer sign-up process through user interviews, card sorting, and usability testing. The research showed the unsatisfying experiences of fishing through redundant CTA buttons and lengthy text.
More supportive research

“I would like it to be clear and easy for me to make a donation.”
Throughout the process of making a donation and volunteering, we discovered a need for simplification. The donation task was straightforward for donors, but it needed a cohesiveness with the rest of the brand.
Sort it out

“I would like it to be clear and easy for me to make a donation.”
Users found several duplicated & floating links overwhelming and confusing. Our research aimed at making data-informed decisions over data-driven. The client's needs led us to create more subsections, which led to expanding the IA.
Business needs & persona

“What matters most: Privacy / Community engagement / Support”
Digital users abandoned the RIT's site because of the amount of text, images, and duplicated CTA buttons. Though the amount of questions in the forms were essential, volunteers appreciated a more streamlined approach. The donation process needed to be in line with the website's design to maintain consistency.
Evaluating the efficiency & memorability

“I would really appreciate an easier volunteer sign-up process.”​​​​​​​​​​​​​
Efficiency (1)
Digital users struggled with the volunteer sign-up and donation processes. They were overwhelmed by duplicate CTA buttons and tabs. 
• A minimal redesign improved the user experience ​​​​​​​​​​​​​​
Memorability (2)
The refugee community crusader's goal is to make a positive impact. They want to see their contributions as an investment in their community. 
• An easier online donation and volunteer experience
The Refugee Community Crusader 
The refugee community crusader's goal is to make a positive impact on their local non-profit. They expect an easy online donation and volunteer experience. These individuals see their contributions as an investment in their community.
A world journey 
When signing up, digital users were overwhelmed by the amount of text and links contained within the page. They found the application to be lengthy. Despite being essential, the process seemed endless to complete.
Doctor Without Borders allows donors to easily choose between different donation options. UNICEF has a minimal design process.
Digital readers of the New York Times can manage their reading with divided tabs based on interests. 
The problem...
“At this point I would like to see where I can type in my name, I keep looking for a form.” 
The refugee community crusader struggled to get past the amount of text, color, images, and the number of duplicated CTA buttons. A minimal design experience was essential.
The donation forms were simple to use, but the volunteer sign-up sheet was immensely overwhelming. Because of the amount of duplicated CTA buttons, the crusader couldn’t figure out the level of importance.
The hypothesis...
Proposed updates;
Combine the amount of CTA buttons and use color as a level of importance
 • A straightforward donation process
Smoother volunteer sign-up
How's the foundation architecture?
“There’s a need to re-shift things around-give me the content I need to know about.”
The current architecture was confusing because of duplicate CTA buttons/links. Card sorting exercise helped simplify the informational architecture. The client requested that "RIT at a glance" be its own link, not on main navigation.
Pen to paper
We developed some low-fidelity options. We tested both options in order to align with one.
Iterate based on users' needs
Testing results found the volunteer and donation sign-up pages overwhelming. We addressed these pain points by breaking up the process with separate tabs. Testers felt there were too many questions, yet the client still insisted they were necessary.
Before committing to high fidelity
“I think B does a better job presenting the important information.”
A/B test results aligned with our final direction. The client felt the landing page should resemble their existing site. This contradicted results gathered by users.
The results are in​​​​​​​
Testing led to 80% in favor of option "B", where “A” tested at 8%.
I explored different options for the forms. Below is my process:
"The filing system" (1)
• Forms had the affordance to select multiple options, which could have been updated to be drop-down
• Though the questions were broken down by tabs, there was no way for users to be notified of their progress
• An unhappy edge case would be for users to accidentally skip questions and retrace their steps, or abandon the forms entirely
"What should I focus on?"
We'll call this guy "The picture show" (2)
• This iteration loaded slowly due to heavy images
• It violated minimalism design and testers struggled with the level of importance
“I’d like to see how you worked through all the options.”
Last but not least, "The featured attraction" (3)
• The final design had a good balance of images to text
• Users could view what was important to them
• Each card has product information, reviews, and images
Mid-level wireframes
At our client check-in, the feedback focused on addressing key information missing from the volunteer application; 
Have more drop-downs on the navigation bar
Users felt the landing page did not take a significant departure from the existing site, but were pleased with the new sign-up process and donation process
Design System
It was important to maintain the brand's original aesthetics and look. The result was cohesive branding, which was lacking in the original site.
The journey is complete
“It seems this is necessary since you are helping refugees.”
Final testing determined there were too many CTA buttons. Despite being easier to navigate, testers still expressed that the forms were too long. Unfortunately, all the information was requested by the client.
View the prototype
Through extensive research, we identified two MVPs: 
Simplify the donation process 
• Streamline the volunteer sign-up
Next steps
The final round of testing, users asked how they could tell if there was an error in the donation process. For both the donation and sign-up forms, we would add an error recognition message. 
My teammate and I are both immigrants and we felt that this was our opportunity to give back to the community!!!
Our first proposal had a more engaging landing page, but the client requested we create something closer to the current site. Our research involved making several updates, but we made sure the business and the client's needs were taken into account.
• Landing page
• Donation process
• Volunteer sign-up
Back to Top