Quick Nav

Empathize
Define
Ideate
Prototype
Test
Final Design
Safe Haven

Safe Haven

A digital volunteer board application that aims to bridge the disconnect between local opportunities available to support Afghan refugees and individuals who want to help them.

Safe Haven

App Design
Case Study
  • Duration: 10 weeks (Sep-Dec 2021)
  • Project Type: Course Project (Group of 4)
  • Role: UX Design Lead (user flow, sketching, wireframe, lo-fi/hi-fi prototyping, usability test, visual design, video prototyping)
  • Tools: Figma, Illustrator, Premirer Pro

Background

Decades of conflict in Afghanistan, including the recent political takeover of the country and 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 this year, there exists a major opportunity for communities to work alongside local refugee relief organizations to support and welcome resettled individuals and families.

We wanted to help them and we were also hesitant to pursue this project because of the potential difficulty of engaging stakeholders and the uncertainty over what a possible design solution might look like. But when it came time to choose, we were unanimous: we all wanted to pursue a purposeful, impact-driven project.

Initial Design Question

Our project started with this simple design question:


How might we help Afghan refugee resettlement in Washington state?

Design Thinking Process

To tackle complex problems, we applied the iterative design thinking process.

Design Thinking

Empathize

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.
Our primary target users are:
1) Afghan refugee relief organizations
2) individuals in the Seattle Communities.

1. User Survey with Community Individuals

Our group implemented an online survey aimed at understanding individuals' awareness levels, assessing interest, and identifying barriers to volunteering in Seattle communities. We chose to use this method to gather data quickly and flexibly from a large population of users through remote-friendly convenience sampling. We collected 30 responses.

Key Findings

Motivation - High Interest Level

88% of survey respondents are interested in volunteering or offering support for refugees.

empathy personal reward & value social responsibility

Empathy

Personal Reward or Value

Social Responsibility

“Because I'm an immigrant and I can empathize with the pain of leaving your country and going to a foreign one.”

“Gives me Happiness.” “I love helping people in any way I can.” “Feel good knowing I contributed to helping someone.”

“Social justice and general sense of responsibility for humanity.”

Pain Points - Low Awareness & Barriers

66% of respondents have low to moderate familarity of the Afghan refugee crisis.


Major concerns & obstacles

Pain Point Pain Point Pain Point Pain Point

Time

Don't know where to start

Language barrier

Cultural awareness / knowledge of the Afghan refugee crisis

2. User Interviews with Refugee Relief Organizations

We recruited administrative staff and volunteer program coordinators from local refugee relief organizations in Seattle, including the International Rescue Committee (IRC) and Jewish Family Services (JFS), to participate in discovery interviews. These individuals have first hand experiences interacting and working with the Afghan refugee population and Seattle community.

Goals

  • Organizations’ Needs and goals in supporting the refugee resettlement process
  • Organizational pain points and challenges with providing support and services
  • Opportunities to volunteer or help that is available to community members

Key Findings

Needs & Goals Pain Points

1. The first 90 days when Afghan refugees arrive in Seattle are characterized by intensive case management.


2. Organizations leans heavily on their community partners and donors for financial and resources support


3. The types of opportunities to help Afghan refugee resettlement were mainly monetary donations, resources donation, and volunteering.


4. Some volunteering opportunities require minimum time commitment, qualifications, and experience.

1. Given how sudden the Afghanistan evacuation was, refugee relief organizations and government agencies are overwhelmed capacity wise.


2. Administrative capacity at the organization is also limited. There are few staff to handle volunteer intake and training.


3. Only receives around 24 hours notice before a refugee arrives at Sea Tac


4. Many volunteers get by with minimal amount of training necessary to do the job, then continue to train them along the way.

Define

Persona - Who are we designing for?

Based on the data we collected from user research, we created some user personas that represent different user archetypes

Primary User - David is a community member in Seattle who's interested in volunteering to support Afghan refugee resettlement.

Persona 1

Secondary User - Sarah works at a refugee relief orabanization as a director outreach.

Persona 2

Defined core problems.
Refined our design questions.

We analysed user research findings and synthesized them to define the core problems that we need to solve. Here is how we refined our initial design question:

  • 1. How might we increase awareness of the Afghan refugee crisis?
  • 2. How might we enable interested individuals to access opportunities?
  • 3. How might we reduce barriers to volunteering?
  • 4. How might we increase administrative efficiency of organizations?

Ideate

From Brainstorming To Decision Making

After we generated around 25 potential design ideas through a brainstorming and sketching session, we decided to combine a few ideas together to achieve our design solution to be highly visible and raise awareness of the Afghan refugee crisis itself as well as the opportunities to help.

Ideation Sketches

Design Concept

Digital Volunteer Board at a Bus Stop

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 kiosk sample image
Sample image from steem KR

Let's embody our idea by specifing how our design solution works in more details.

Design Goals

We set design requirements to clarify what our design solution needs to offer to meet users' needs.

High Visibility

Draw attention in a highly trafficked space for impact reach

Digestible Information

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

Flexibile Opportunity Search

Make it easy to find volunteer opportunities that meet users' preference from a wide range of types of support

Seamless Activation

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

Dinamic Opportunities

Present updated information about opportunities sourced from organizations to reflect their dynamic needs and capacities

Storyboard

Storyboard helped us visually imagine and explore a users' experience with the digital volunteer board in specific scenarios.

Storyboard

User Case 1 - David finds potential opportunities to help Afghan refugee resettlement in his community while waiting for his bus at the bus stop.

User Flow Diagram

Mapping out each and every step the users take to complete tasks in both “Learn” and “Get Involved” pathway.

User Flow (Learn)
Learn Pathway
User Flow (Learn)
Get Involved Pathway

Prototype

Lo-Fi Prototype

After the Ideation phase, we had better understanding of how users interact with the digital board in real-world scenarios and how we navigate users to complete their tasks. With that in mind, I started off with sketching wireframes and then built a lo-fi prototype using Figma.

Wireframe sketch
Wireframe Sketch
Lo-Fi Prototype
Lo-Fi Prototype

Test

Concept Testing

After crafting a lo-fi prototype, our group conducted an in-class concept test with 7 peers in our HCDE 518 class. The goals of the concept testing focused on the screen-to-screen experience from the default ‘Home’ to ‘Learn’ and ‘action’ to collect impressions and gather feedback for higher fidelity design iterations.

Major change in the information architecture

Key Findings How We Redesigned

‘Donation’ should be simpler and easier action instead of placing under the ‘action’ pathway


Some people might not feel comfortable with clicking "Money" in a public place

We decided to add ‘Donate’ as its own pathway outside the ‘action’ flow on the Home screen. The Home screen will have three main path way, which we renamed ‘Learn,’ ‘Get Involved’ and ‘Donate’ now

Information Architecture - begore Information Architecture - after

Usability Test

After refining the lo-fi prototype based on the feedback we received in the concept testing, we conducted usability tests with 5 participants to test and validate the core ‘Get Involved’ pathway of the digital board.


Important Check Items

  • Ease of use of the touch screen navigation and controls
  • Learnability and understandability of the interface
  • Satisfaction with the content
Key Findings How We Redesigned
1. A little more context built trust and improved learnability
All participants preferred to start with the ‘Learn’ pathway to get some basic knowledge before searching for opportunities in the ‘Get involved’ pathway. Adjusted header text and added learning content to the Home screen to provide context for users and draw them into both ‘Learn’ and ‘Get Involved’ pathways with some basis of information.
The phrase “The first 90 days” in Learn path way wasn’t immediately clear. Added a brief description below titles (for both ‘10 Facts of the Afghan Refugee Crisis’ and ‘Story of the First 90 Days”)
2. Journey to Intuitive Filter Design
Filters and their function were unclear to some users, and some users may not want to use them at all. The search function in the filter was not useful during a short interaction. Add icons to help users quickly understand what each label refers to. Removed search bar within the "Get Involved" pathway to reduce complexity.
Safe Haven Filter 1 Safe Haven Filter 1 Safe Haven Filter 2 Safe Haven Filter 3
3. Navigation Bar Evolution
Cross-device interactions and information exchange needed to be better balanced. Clarified the QR code feature by changing text to "continue with my phone" (replacing "share with my phone")

Allow users to scan a QR code without a single click by displaying it in the navigation bar
Safe Haven Nav Bar 1 Safe Haven Nav Bar 2 Safe Haven Nav Bar 3

Hi-Fi Prototype

Home Screen

Home Screen

The Home screen presents the user with three calls to action - Learn, Get Involved, and Donate - over a soft background with rotating images that gently capture attention.

Home Screen Home Screen

Learn Pathway

The Learn pathway provides two educational paths. Users can select between “10 Facts About the Afghan Refugee Crisis” and “Story of the First 90 Days” to increase their understanding of the issue locally and globally.

Home Screen Home Screen

Get Involved Pathway

The Get Involved pathway allows users access information about available opportunities to support Afghan refugee resettlement. Users can easily discover opportunities that match their preferences as well as time commitment and experience using the one-click filters and the map view feature.

Bus Notification $ QR Code

Bus Notification & QR Code

A bus Notification allows users to have enough time to scan QR code and continue the information exploration on their phones when they have to leave.

UI Style Guide

Lo-Fi Prototype

Experience Mockup

Lo-Fi Prototype

Figma Prototype

Video Prototype

Next Step

If I had more time...


  • I’d like to conduct further usability testing on the map view to understand how users would interact with the application to collect location-oriented information and see how useful the filter feature is to help users find opportunities that meet their preferences.
  • I’d like to 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.

Reflection

  • While not without challenges, choosing this path was immensely rewarding, both in the experiences it led to and the lessons learned from those experiences. Among those lessons, the most important was that >the value of human-centered design is not just in the creation of more appropriate and usable design solutions that result from the involvement of users but in bringing together diverse stakeholders in pursuit of more inspiring and inclusive futures.
  • Iterative tests and evaluations are critical for designers to continuously developed our understanding of what works the best for the users.
  • Always having clear design goals and requirements was key to keep ourselves aligned with what we need to achieve while making design changes through the iterative design process.
  • Iterative design process allows us to continue learning and improving.