Safe Haven

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.

My Role

UX Design Lead, UX Researcher

User research, storyboard, user-flow, usability test, lo/hi-fi prototype, UI design, video prototype

Team

2 UX Researchers, UX Designer

Timeline

10 Weeks (Sep 2021 - Dec 2021)

Tools

Figma, Illustrator, Procreate, Adobe Premiere Pro

The Problem Space

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?

The Process

We applied the iterative design thinking process to tackle this complex problem.

Discovery Research

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.

Interviews with refugee relief organizations

Interviewed with 6 administrative staff and volunteer program coordinators from local refugee relief organizations in Seattle.

Goals
  • Understand their goals, needs, and pain points in supporting the refugee resettlement process

Surveys with community individuals

Sent out survey forms to 30 individuals in Seattle communities

Goals
  • Understand individuals' awareness levels
  • Assess individuals' interest in volunteering
  • Identify barriers to volunteering

Competitive Analysis

Reviewed and walked through the online volunteer application processes of 8 resettlement agencies and general social service organizations.

Goals
  • Learn the process by which refugee relief organizations coordinate volunteers
  • Identify strengths and areas of friction in the process

Key Findings

1. Low cultural awareness and difficulty to access needed information kept community individuals from taking action.

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.

2. The administrative capacity at the organization was very limited.

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”

3. Volunteer applications can be fairly burdensome.

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.

Define and narrow down the scope.

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.

Refined Design Question

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?

User Personas

David Wang

"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

Bio

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.

Goals

  • Be familiar with Afghanistan culture and the Afghan refugee crisis
  • Find the volunteering opportunities that meet his schedules and preferences
  • Find an easy way to search and apply for volunteering

Frustrations

  • Feels a little embarrassing that I know little about the crisis and their cultures
  • I don't know what types of volunteer work is available and whether I am qualified for it
  • All the online resources are overwhelming. Going through each organization's website feels burdensome.

Ideation

Design Concept: Digital volunteer board at a bus stop

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.

Bus stop mock up image

Design Requirements

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.

eye emoji

High Visibility

Draw attention in a highly trafficked space for impact reach

emoji

Digestible Information

Information-rich but minimalistic to prioritize the most important content to educate bystanders

emoji

Flexible Opportunity Search

Make it easy to find volunteer opportunities that meet users' preference

emoji

Seamless Activation

Facilitates easy access to additional resources and clear, specific next steps to take action

Storyboard

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.

storyboard

User Flows

user flows

Test & Evaluation

After we created a lo-fi wireframe, we conducted concept testing and usability testing to evaluate our designs.

emoji

Concept Testing

  • Learn users' screen-to-screen experience from the Home page to the Learn and Action page
  • Collect impressions and feedback on each page
emoji

Usability Testing

  • Evaluate the ease of use of the touch screen navigation and identify usability issues
  • Understand the learnability and understandability of the interface and users' satisfaction with the content

Design Improvements

1. Reduced insecure feelings of clicking the "Money" filter by switching to a "Donate" CTA button.

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.

2. Improved filter design to a more intuitive, one-click filter

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.

3. More seamless cross device interactions and information exchange

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.

4. Increased consistency in design to improve users' learnability

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.

Final Designs

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 Prototype

Learn Pathway

Provides 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

Get Involved Pathway

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.

Expanded Opportunity Card

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.

Smooth Cross-Device Interaction and info exchange

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.

UI Design Kit

The Impact

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.

Next Step

Story-driven & action-oriented content creation

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.

Secure donation process exploration

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.

Takeaways

Know the user's environment - it's not just about what’s on a screen

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.

How to stay aligned

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.

Next Project >

Let's connect