Safe Haven is a digital volunteer board application situated at a bus stop shelter. It aims to bridge the disconnect between local opportunities available to support Afghan refugees and individuals who want to help them.
This case study is a team-based project I worked on in the User-Centered Design course at the University of Washington. I demonstrated the application of the end-to-end design thinking process to design a new product.
UX Design Lead, UX Researcher
aaa
aaa
aaa
aaa
aaa
10 Weeks (Sep 2021 - Dec 2021)
2 UX Researchers, UX Designer
Figma, Illustrator, Procreate, Adobe Premiere Pro
The political takeover in Afghanistan and the evacuation of American troops in 2021 have contributed to a growing global refugee crisis. With tens of thousands of displaced Afghans arriving in the United States, there was a major opportunity for Seattle communities to work alongside local refugee relief organizations to support and welcome resettled individuals and families.
Initial Design Question
How might we help Afghan refugee resettlement in Washington state?
We applied the iterative design thinking process to tackle this complex problem.
Due to proximity, lack of a language barrier, and ease of access within our 10-week timeline, we decided against targeting the refugees themselves and opted to target people who want to help incoming refugees. We used 3 research methods to collect both quantitative and qualitative data.
Interviewed with 6 administrative staff and volunteer program coordinators from local refugee relief organizations in Seattle.
Sent out survey forms to 30 individuals in Seattle communities
Reviewed and walked through the online volunteer application processes of 8 resettlement agencies and general social service organizations.
While 88% of survey respondents showed strong interest in volunteering, 66% of them had low to moderate familiarity with the Afghan refugee crisis. Not getting enough information about the available opportunities and the ambiguity of how they could start searching seemed to be one of the major obstacles to volunteering.
Given how sudden the Afghanistan evacuation was, refugee relief organizations and government agencies were overwhelmed and their administrative capacity was also limited. As there was a small amount of staff to handle volunteer intake, many volunteers had to get by with the minimal amount of training necessary to do the job.
“[I] want to make sure volunteers are well onboarded to build up understanding of organization and mission, and don’t want to cause harm”
From the competitive analysis, we found the application processes are more likely to be traditional (online form, email, etc.) and most organizations were working individually to collect their volunteer applicants. This seemed to be fairly burdensome for people to complete each application from websites.
After synthesizing the research findings, we aimed to lower the barriers to volunteering for community individuals and make the application process easier. Moving forward, we refined our initial design question and specified our target users. While we recognized 3 different user archetypes, we decided to focus on younger demographics who seemed to have more availability to volunteer and were easier for us to reach out to.
How might we help Afghan refugee resettlement in Washington State?
How might we enable interested individuals to easily access available volunteer opportunities, while increasing awareness of the Afghan refugee crisis?
"People are in need. I want to offer my time to support them."
Age: 21
Occupation: College Student
Location: Seattle, WA
Status: Single, living with 3 college students
David is a full-time college student at the University of Washington majoring in business. He recently saw the news about the Afghan refugee crisis and learned that many refugees were arriving in the U.S. including Seattle. As he's been interested in doing some volunteer work, he thought this would be a great opportunity to help those refugees and their families using their free time. However, since he's worried about his low cultural awareness and doesn't know where to start, he hasn't been able to take any action.
We generated 24 design ideas during a rapid sketch session, discussed each idea's feasibility and challenges, and decided to move forward with the digital volunteer board idea. While this idea could be implemented in a wide range of settings, the team identified a bus stop as a quintessential public space that many people pass in their daily routine. Our design aims to turn the time spent waiting at a bus stop into an opportunity to learn about the Afghan refugee crisis and get involved in addressing it.
The average amount of time people wait at a bus stop in the Seattle area on a weekday was 15 mins. We set the following design requirements by ensuring that we meet users' needs and goals in time.
Draw attention in a highly trafficked space for impact reach
Information-rich but minimalistic to prioritize the most important content to educate bystanders
Make it easy to find volunteer opportunities that meet users' preference
Facilitates easy access to additional resources and clear, specific next steps to take action
I created a high-level storyboard to visualize the user experience in the specific scenario at a bus stop. This helped us imagine and explore the limited-time experience at a bus stop and empathize with users more easily.
After we created a lo-fi wireframe, we conducted concept testing and usability testing to evaluate our designs.
A monetary donation was initially placed under the money filter on the action page, but we found some participants felt insecure to click the "money" button at a public bus stop. We also learned that monetary donation should be simpler and easier action as it was one of the vital elements that refugee relief organizations heavily rely on. We decided to remove the money filter from the action low and placed a donate CTA on the home screen as its own pathway.
The filter design was unclear to some users and the search function in the filter was not useful during a short interaction. I removed the search bar and limited users to choose one filter at a time to reduce the complexity. I also made the icons more descriptive to help users visually understand what each label refers to.
We learned most of the user testing participants liked the idea of QR code, but they preferred more seamless cross-device interactions. I changed the text from "Share with my phone" to "Continue with my phone" for more clarity and exposed a QR code on a menu bar for a quicker cross-device interaction and information exchange.
The way images and texts were combined in the initial design was causing accessibility issues and making it hard for users to quickly digest information. I employed a consistent caption design to improve users' learnability.
I led the design process as a design lead and created the hi-fi prototype with Figma. I was also responsible for the visual design, including icons and graphics.
Try Figma PrototypeProvides two educational paths to increase their understanding of the issue locally and globally through
- 10 Facts about the Afghan Refugee Crisis
- Story of the first 90 days
Users can easily discover available opportunities to support Afghan refugee resettlement that match their preferences, time commitment and experience using the one-click filters.
Due to the time constraints at a bus stop, we decided to make it one filter category with three filter values to make the interaction simple.
The expanded card allows users to find more information about the opportunity details.
Users can scan the QR code to continue information exploration and complete the application process on their phones.
A bus notification allows users to have enough time to scan the QR code.
The QR code is exposed on every screen to allow users to quickly scan the code to continue information exploration when they have to leave.
Although it was an academic case study project, we saw the potential that Safe Haven could increase a sense of community and drive individuals' action towards volunteering from feedback we received.
Kudos to this team for pushing us towards new designed interactions that foster community.
Love working in those micro moments.
I also like that there's a 'Learn' button there because I don't know much about the Afghan Refugee Crisis.
What my teammates say about me
I really appreciated Tomomi's flexibility, thoughtfulness, and positivity. Tomomi was fun and easy to work with. This project would not have been the same without Tomomi; not only did she put together an amazing final visual design, she made critical contributions throughout every phase of the project, including research, ideation, and user testing. Tomomi's dedication and work ethic did not go unnoticed or unappreciated by her team members.
Tomomi went above and beyond for the team and ran the show for the entire prototyping session.
If I had more time, I would explore how we can craft story-driven content for the Learn pathway that successfully grabs users’ emotions and drives their actions toward volunteering. I’d examine how we can incorporate CTA in the stories to lead them to the Get Involved pathway.
In the concept testing, we found some people might hesitate to give monetary donations using their credit cards at a public bus station. However, since donations are vital for the refugee relief organizations, I’d like to further explore how we can achieve safer and easier donation process design to solve this challenge.
I learned designing an application for a kiosk in a public place required careful considerations of the user's environment and interaction constraint that are specific to the context. Narrative prototyping, role play, and iterative user testing would help discover those useful insights and make design decisions accordingly.
Having clear design goals and requirements was key to keeping ourselves aligned with what we needed to achieve while making design changes through the iterative design process. Frequently going back to the user personas also helped remind me of who we're designing for during the design process.
if you want to learn more about my projects, give feedback, or work on an exciting project together!
©2023 | TOMOMI MATSUZAKI