Helping Refugees Settle — a UX case study

Martha McNamara
Martha McNamara
Published in
8 min readMay 20, 2019

Introduction

1 out of 110 people is displaced and The United States resettlement program is the largest in the world. The US has been the global leader in resettling refugees since the 1970s. Through resettlement and integration, refugees become contributing members to their community.

These facts made this project option really interesting to our team, so we chose to create a website that would help refugees settle when relocating to the United States.

The number of refugees in the world has reached the highest level ever recorded, according to figures published by the United Nations.

The Process

My team and I used the Design Thinking 5 Step Process to guide us through the project.

Empathizing with Our User

We began our research online. We tried to clarify our understanding of what exactly defines a refugee. We also researched what resources are currently available to them in our community.

We assumed that refugees were in serious need of help and lacked many resources. Our research showed that there is still a large need in the refugee community, but they have more resources available than we assumed. We also assumed that though we didn’t know a whole lot about the refugees in our community, that the general public did. Our survey opened our eyes to the what the actual awareness is in our community.

We had 64 people take part in our survey. We found that the general public doesn’t know much about refugees in their community, yet they are willing to help.

53% had never had an experience with a refugee and 67% had never volunteered their time to help refugees. But when we asked who they believed was responsible to aid the refugees, 32% said the community, 26% said the government, and 40% put other writing in both the government and community.

Interviews

From there we began interviewing local experts on the refugee process and how they aid the process. We also interviewed refugees who have resettled in our community. This helped us better understand their experience.

One of the most enlightening parts of our research was when I interviewed the Director of Refugee services as Catholic Community Services. He came to the US as a refugee in the early 90’s. He has a huge appreciation for the people who helped him with his transition. He has since dedicated his life to doing the same for individuals coming here as refugees. Through the interview with him we learned about the process and requirements to come here as a refugee. We also learned about the resources available to refugees. We learned that though there is still a need for resources, there are more available than we assumed. When I asked him what he believed is the most effective way the community could help refugees settle, he said:

Defining the Persona

We found some key pain points through our research:

•A lack of information about local refugees

•Media coverage of refugees feels politically biased

Based on our prompt, our original persona was a refugee who had recently arrived in the United States. After doing research we realized that there was actually another persona. The secondary persona was the community member who knew little about refugees, but was interested in learning more and getting involved. We added a secondary persona and began creating tasks based on their goals. Once we got into the tasks for the user story-map, we found that our two personas were quite conflicting with their goals and point of view. We reviewed our interviews and did more research. Our research confirmed that the refugee process gives good access to all the information and resources we were planning to include. The local community had far less access to information about refugees and how they could help. We decided to go with a single persona being the under-informed community member.

Final persona

Based on our new persona’s goals we again began our user story map. We created tasks, grouped into like items, organized into priority, and created user stories for each task. This process was hard to get our team on the same page and took extensive discussing and iterating.

We went through all tasks to find which were necessary for our minimum viable product. We took out tasks that were not essential to the user reaching their goals.

User story map

Ideating Flow and Layout

We went through the user flow process to help us understand how a user would interact on our website. This showed us some missing tasks as well as some redundant tasks and we were able to adjust our user story map from there.

I created a site map in sketch to show the overall view of website and figure out what pages were needed to start our wireframing.

Site map

Card Sorting

Next we did open and closed card sorts. We used people who were unfamiliar with our project to get fresh eyes. We used this process to see if the tasks and naming we had been using in the nav bar would make sense to a user. We tried switching around get involved, how can I help, and volunteer. We found that get involved seemed to make the most sense for people. Donating money and donating goods were confusing for a lot of people. We changed the donate page to give. Then included both, money and goods on that page.We made sure that they were clear and easily accessible.

Prototyping with Wireframes

We started with pen and paper wireframes for mobile design first. Focusing on mobile first made the product scaleable and forced us to remove anything that was not essential. Once we got to desktop wireframes we were very clear on what needed to be there. Our user is busy and isn’t coming to this site to hang out, but to gather information then go out and get involved in the community.

Mobile wireframes

Feedback on the Wireframes

We presented our desktop wireframes in a design review and got feedback in a few areas:

•Adding more detail on our home page of what the other pages had

•Adding information on our donate page where the donations go

•Separating money from goods on the donate page

•Removing video page and video header

We also decided to remove the back button to make all main pages accessible via the nav bar, and the user can simply go back with the back button built into the browser. And we took out the hamburger button since the nav bar now accesses every page that had been in the hamburger button before.

Wireframes version 1, 2, and 3

After a second design review I got feedback on simplifying the nav bar and making better use of the locus of control.

High Fidelity Designs

Based on that feedback, we split up to start our high fidelity designs solo. During this I made a lot of quick changes on the home page to get the right feel before moving on. I focused on adding white space, reducing distractions and unnecessary color. I also made changes to the spacing giving each item room to breathe.

Link to high fidelity prototype

Working on my high fidelity design, I continued to refer back to our persona and his goals to keep me on track. When it came to the forum page I realized that this wasn’t in alignment with our persona goals. His goals are to be informed, find ways to get involved, and feel like he’s making a difference. After bringing this up at a design review to get feedback, I decided to take the forum page out. The user is able to reach his goals without this page. As a busy person, he is less likely to spend time talking on a forum and more interested in actually getting involved in the community.

It was also during this phase that I decided to change the facts page and FAQ page. I changed these to global crisis and local impact. FAQ isn’t compelling enough to read unless faced with a technical problem, and it doesn’t actually represent the content on the page. The facts about refugees seemed to fall into two main categories. The global refugee crisis and how that impacts individual communities.

Testing the Designs

After finishing my high fidelity designs, I created a prototype to have users test. I tried to find users who were as close as possible to our persona. I got a lot of positive feedback during the testing, but looking back I wish I had given my testers specific tasks rather than just letting them browse through the site. Once I started creating a video of my prototype, I found that I hadn’t included a home button in my design. Once you left the home page, the only way to get back is the back button. I think that if I had given users specific tasks to complete during the user testing, I would have found this issue earlier on. After finding this, I added a home button to the nav bar to stay consistent with the navigation for the other pages.

Conclusion

The number of refugees in the world has reached the highest level ever recorded, according to figures published by the United Nations. Though there are some resources available to resettled refugees, there is still a huge missing link. In their resettlement process, integration is key. Support after those initial three months is critical. This is when they need to integrate and make meaningful connections. Many community members are unaware of the refugees in their communities, though they are willing to help. My website accomplishes our persona’s goals by educating community members on the global crisis, what that impact is in their community, and how they can get involved to make a difference.

If I had more time for this project I would put a lot of focus on sharing even more of the facts and stories of local refugees. Our research found that education is the key to getting people to take action. Once they have that knowledge, community change is possible.

--

--