The Refugees Initiative

Design a user experience for social good

PROJECT: The Refugees Initiative

ROLE: UX, Responsive Web Design

DURATION: Feb - Mar 22

Project Goal

Design a user experience to help refugees get involved in local community service. The app's goal is to show all local community services at the destination at a glance, to make appointments, and to manage all documents.

Challenges and Target Users

Refugees have to organize many things at their place of arrival and mostly do not speak the language.
This app is for everyone who needs support at their new home.

User Research

I conducted primary research. I interviewed users, conducted surveys, and conducted a competitive audit and a usability study. My assumptions changed so that some biases could be dispelled, like, e.g., that people are afraid of accepting help from others.

Pain Points

1. Find services

For many refugees, orienting themselves at the arrival point is difficult.

2. Book appointments

Users have to book appointments for schools, doctors, or job interviews. How can we make this easy?

3. Bring required documents

Users have to bring certain documents or other things to use local services. Is it possible to improve this path?

4. Managing tasks and services

Users have to deal with many appointments, documents, and so on. How can we make management fast and easy?

Meet the users

PRIMARY

Name: Ekaterina
Age: 32
Occupation: Data Scientist

Ekaterina is a caring mother. When the war in Ukraine began, she fled Kyiv to Berlin relatively quickly. Since she doesn't know when they can return, she wants to gain a foothold in Germany. For her daughter, that also means going to school in Germany.

USER STORY

As a mother of a 11-year-old daughter
I want to find a suitable school
so that I can continue her education without interruption.

SECONDARY

Name: Dmytro
Age: 63
Occupation: Sales Manager

Dmytro lived with his wife in Kyiv until the beginning of the war. Arriving in Germany, they quickly found accommodation. Since he has a visual impairment and does not speak German, accessibility to web content is crucial. He also has to go to the pharmacy regularly to get medicine for himself and his wife.

USER STORY

As a type 2 diabetes patient
I want  to find a specialist in my area
so that I can continue my treatment.

Paper Wireframes

Before moving onto high-fidelity wireframes and mocks, I wanted to get a feel for what the web app's core would look like when put in front of me.

Digital Wireframes

The user flow outlines how the user navigates from choosing a service to making an appointment and managing their benefits.

User Testing Results

ROUTE 1 - FINDINGS

1. Users had no issues finding services
2. Some users want to see filter options
3. Some users need help when they’re stuck

ROUTE 2 - FINDINGS

1. Somer users were skeptical about why they should register an account
2. Some users couldn’t read the text
3. Some users want to save their local services

Insights Priorization

Priority 0 (Essential)

1. Based on the theme that: some participants want to have filter options, an insight is: to add filter icons that open a list of options.

2. Based on the theme that: some users were stuck, an insight is: to show a help button.

3. Based on the theme that: some users had a hard time reading the text, an insight is: to increase legibility.

Priority 1

1. Based on the theme that some users want to save their local services, an insight is: creating a personal section in the app.

Priority 2

1. Based on the theme, one participant was skeptical about registering an account, an insight is to make registration optional.

From Paper to Digital

Based on the test findings, I iterated on the wireframes and created a high-fidelity prototype (see link below).

Responsive Design

Utilizing a mobile-first approach, I laid out designs for different breakpoints, to ensure, that the content looks perfect on any device.

Accessibility Considerations

Color Contrast

I made sure that the contrast ratio is at least 4,5:1, which means AA status according to WCAG compliance.

Button Placement

Main CTAs are placed so that users can operate them with one hand.

Screen Reader

The app is screen reader friendly. All images and videos have captions.

Takeaways

I learned a lot, e.g., how vital research is as it builds the foundation for every decision made later in the project. I learned how biases can influence user testing and how to overcome them. I also learned how vital accessibility and inclusion are and that many apps ignore this.

Be sure to check out the process for the app’s creation below!

Contact

Hans-Sachs-Straße 43
40237 Düsseldorf
Phone: +49 162 61 37 600
Email: contact@dinofranke.de

© 2023 Dino Franke. All rights reserved.

Made in Flingern. Imprint