A digital volunteer board app situated at a bus stop. It turns people's spare time into a micro-moment to find the opportunities to create a social impact. This is a case study I worked on in the User-Centered Design course at the University of Washington. I demonstrated the end-to-end design process and created a new kiosk app.
UX Design Lead
User research (competitive Analysis, user surveys, user interviews)
Ideation (sketching, storyboard, user flows)
Design (low/high fidelity prototype, UI design, video prototype)
Oct 2021 - Dec 2021 (10 Weeks)
2 UX Researchers
1 UX Designer
Figma
Procreate
Adobe Premiere Pro
In 2021, due to the political takeover in Afghanistan and the evacuation of American troops, tens of thousands of displaced Afghans arrived in the United States. As there were immediate needs to support resettled individuals and families, our team decided to explore opportunities to help optimize the refugee resettlement process.
Aiming 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.
Try Figma Prototype
.png)
Facilitating access to information
.png)
Increasing awareness of the crisis
Streamlining the application process
As volunteering is not necessarily the users' high priority, it's not efficient to wait until they voluntarily search for the opportunity. This is why we chose a digital board to increase the discoverability in a public space.
We identified that a bus stop is a great spot to easily capture users' micro moments, which are intent-rich moments when decisions are made and people take action. (Google Micro Moment)
Due to the 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 reached out to caseworkers in refugee relief organizations and community individuals as the key actors who played a significant role in the refugee resettlement process. We used 3 research methods to collect both qualitative and quantitative data.
6 interviews
with local refugee relief organizations
30 surveys
with Seattle community individuals
Competitive Analysis
While 88% of survey respondents were strongly interested in supporting refugees, most hadn't taken action. My hypothesis is that since volunteering isn't their high priority, small obstacles could easily get in their way and make them reluctant to take action. Their barriers to volunteering include:
Since there were limited staff members to handle volunteer intake, many volunteers had to get by with the minimal training necessary to do the job. The community individuals also expressed their concerns about their low familiarity with the crisis.
From the competitive analysis, we found the application process was more likely to be traditional (lengthy online form, email, etc.), plus most organizations worked individually to collect their own volunteer applicants. This seemed to be fairly burdensome for people to have to complete a separate application for every different organization.
Based on the user surveys, we identified 2 personas. Later, their different preferences helped us build a better filter design in the prototype.
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 waiting time at a bus stop in the Seattle area on a weekday is 15 mins. This time constraint allowed us to set the following requirements to ensure we met users' needs and goals in time.
Draw attention in a highly trafficked space for reaching a large audience
Information-rich but minimalistic and prioritizes the most important content to educate bystanders
Make it easy to find volunteer opportunities that meet users' preferences
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 experience and empathize with users more easily.
After we created a low fidelity wireframe, we conducted concept testing and usability testing to evaluate our designs.
A monetary donation was initially placed under the action path, but we found some participants felt afraid to click the "Offer Money" button at a public bus stop. We also learned that making a monetary donation should be a simpler and easier action as it is one of the vital elements that refugee relief organizations heavily rely on. We decided to remove the Offer Money filter from the action path and placed a Donate button on the home screen as its own pathway.
With the initial design, many participants didn't use the filters. It was because the naming of each filter was not clear to some users and they didn't know how to use the search feature. I decided to remove the search bar, added descriptive icons and short descriptions to help users quickly understand what each label refers to. Those design improvements also made the filters more noticeable and increased the use of the filters.
With the initial design, users had to tap the "Share with my phone" button in the menu bar to find and scan a QR code. While most participants liked the idea of a QR code, we found that the phrase "share with my phone" wasn't intuitive enough for some users, and they preferred quicker access to the QR code. I added a short description for more clarity and exposed a QR code on the menu bar itself to allow users to scan it without an extra step.
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 its accessibility and learnability.
.png)
As we quickly realized that developing a digital board for only the Afghan refugee crisis wouldn't be financially viable, we made it usable for other social problems that also need support. This way, we can continually respond to emerging situations that require immediate action.
People were worried about their low familiarity with the crisis. The learning pathway provides two educational paths to increase understanding of the issue locally and globally.
Users can easily discover a number of available opportunities to support the refugees' resettlement provided by various refugee relief organizations. The one-click filters also make it easy for users to find the options that match their preferences, time commitment, and experience.
The expanded cards allow users to find more information about the volunteering opportunity. Users can scan the QR code to continue information exploration and complete the application process on their phones.
A bus arrival notification allows users to have enough time to scan the QR code. The QR code is always displayed in the menu bar 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 the Social Impact Board could have in increasing a sense of community and driving individuals' action toward volunteering from the feedback we received.
.png)
Kudos to this team for pushing us towards new designed interactions that foster community!
Love how well this project turned out. I hope this can be carried forward and implemented. Great work!
If I had more time, I would explore how we can craft story-driven content for the Learning pathway that successfully grabs users’ emotions and drives their actions toward volunteering. I’d examine how we can incorporate Calls-to-Action 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 a safer and easier donation process design to solve this challenge.
.png)
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.
I learned that designing an application for a kiosk in a public place requires careful consideration of the user's environment and interaction constraints that are specific to the context. Narrative prototyping, role play, and iterative user testing would help discover those useful insights and guide design decisions accordingly.
Having clear design goals and requirements was key to keeping ourselves aligned while making design changes through the iterative design process. Frequently going back to the user personas also helped remind me of who we were 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