Lending hand to refugees & immigrants

Overview: 

Refugee & Immigrant Transitions is a nonprofit located in the San Francisco Bay area that focuses on welcoming new immigrants & refugees, Helping out with their education (on different levels & age groups) to ease their integration into the community.

Challenges: RIT was facing hardship attracting people to their website & getting people to navigate their website to find the information they were looking for. That included finding ways to help & donate and finishing the onboarding for new volunteers.

Our goal was to redesign their website to help attract more community members to participate and engage with the organization.

restructure their website through a new information architecture & a site map. And refining the donation & volunteer process to be more seamless.

My role: Lead product designer - Person of contact with RIT - Creating donation & volunteer pages & forms.

Team: 2 Product designers. Duration: 7 weeks. Tools used: Miro - figma - google docs, sheets & slides - zoom.

The process: Site analysis - Meet with RIT’s rep (agreed on the MVP) - Understanding the constraints - Research (user interviews & testing - Heuristic evaluation - Competitive & Comparative analysis) - User Persona - Meet with RIT’s rep - Card sorting exercise - Ideation (Problem & Hypothesis) - Initial Sketching - Prototyping - Meet with RIT’s rep - User testing - Iterations & Hi-fidelity - Handoff.

Where to start?

To understand what RIT is dealing with we needed to gather all the information we can by conducting user interviews & tests on their current website, heuristic evaluation & competitive & comparative analysis.

After our first meeting with RIT we understood which pages/tasks they need help with the most. That was:

  1. Landing page 

  2. Donation page & form

  3. Volunteer page & application

We also knew they were building Squarespace to build their website, which meant we’ll have to abide by Squarespace constraints & limitations when working on our design. 

After reviewing & trying their website ourselves, we moved on to user interviews & tests.

Our goal was to:

  • Understand what matters most to users when visiting a non-profit’s website for the first time.

  • Observe how they navigate the website to find the information they want.

  • Highlight all pain points they face while completing asked tasks.

I was able to put all our findings from 6 user interviews & tests onto this affinity map.

(Affinity map highlighting insights from interviews/tests)

 Having knowledge from the users’ side I wanted to dive deep to analyze all the aspects of the website. 


Heuristic analysis

A one really interesting finding was how much their information architecture needed some rework to enhance the user’s interaction, so we built a card sorting exercise to know how’d the users allocate the information they’re looking for on their website.

New site map with redesigned Information Architecture

New site map with redesigned Information Architecture

 Who’s the user?!

Now that we understand our user we were able to create a Persona.

(Persona diagram)

(Persona diagram)

Studying all this information, I knew what problem we were facing.

 

The problem

Having too many texts and hyperlinks is making it harder for the cautious giver to find the content they want, especially with volunteering and donating. 

Our solution

Which meant the need to have a clear hierarchy and visualized data, to help the cautious giver find the content they’re looking for and make quicker decisions to volunteer and/or donate.

MVP

Taking RIT’s request along with our findings from the research:

  1. Information architecture & site map

  2. Landing page

  3. Donation page & form

  4. Volunteer page & application

Sketching the design

I was responsible for creating the donation page & form and the volunteer page & application.

Taking all the information I had and knowing the design constraints that Squarespace has having worked with it before, I had a clear understanding of what needs to be done.

But before I started sketching I had to study all the information they have on those pages and break it down in terms of importance to the user to decide what to keep and what to take out.

Also by doing a thoroughly competitive analysis I knew what were the industry standards for nonprofits.

Mid-fid wireframes

Initial proposed home page

Initial proposed home page

Initial proposed home page

Initial proposed donation page

RIT-Give page.png

Initial proposed volunteer page

Initial proposed volunteer page

Testing my design

I wanted to make sure I was on the right path to creating the new design.

So I tested it to see:

  • How users go find the pages they’re looking for.

  • Observe how users finish donating money & filling out the volunteer application.

Taking all the insights from the tests into consideration, I was able to move forward to the hi-fid wireframes.

Off to the final stage

Home page

Initial proposed home page

Initial proposed home page

Donation page

RIT-Give page.png

Volunteer page

RIT-Volunteer page.png

Designing the forms

That also meant I designed the volunteer & donation forms to be more user-friendly.

Here’s the final version of the donation form.

1- Choosing donation amount & setting a 1-time or recurring payment.

1- Choosing donation amount & setting a 1-time or recurring payment.

 
 
2- Providing donor’s personal information.

2- Providing donor’s personal information.

3- Selecting payment method & adding information.

3- Selecting payment method & adding information.

 
 
4- Confirmation of payment.

4- Confirmation of payment.