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 goal of the app 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 a lot of 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 a primary research. I interviewed users, made surveys and a competitive audit as well as a usability study. My assumptions changed in a way that some biasses could be dispelled, like e.g. that people are afraid of accepting help from others.
Pain Points
1. Find services
For many refugees it is difficult to orientate themselves at the arrival point.
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 in order to use local services. Is it possible to improve this path?
4. Managing tasks and services
Users have to deal with a lot of appointments, documents and so on. How can we make the 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 go back, she would like to gain a foothold in Germany for the time being. 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 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 core of the web app 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 services.
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: to create a personal section in the app.
Priority 2
1. Based on the theme that: one participant was skeptical about registering an account, and 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 soft gradient consisting of cool and calm colors felt like the perfect fit for the Sense app’s branding. The blue helps evoke a happy feeling out of users and paired with the fuchsia it creates a nice balance between calm and energetic. The main typeface for the app is Linotype Univers. This is the brand’s corporate typeface. The condensed weight is solely used for numbers and data.
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 important research is as it builds the foundation on every decision that’s made later in the project. I learned how biases can influence user testing and how to overcome them. I also learned how important accessibility and inclusion are, and that many apps ignore this.
Be sure to check out the process for the app’s creation below!
Contact
Studio Dino Franke
Flurstrasse 57
40235 Düsseldorf
Phone: +49 162 61 37 600
Email: contact@dinofranke.de
Instagram: @studiodinofranke
© Dino Franke 2023
Made in Flingern
