INTEGRIEREN
________________.Role:
_________________Tool:
_____________Duration:
_UX designer
_UX researcher
_Pen and paper
_Adobe XD
_February to April 2024
- Moving is not just a change of address, sometimes it is a change of life -
Many times as a migrant it is difficult to integrate into German society not only because of the culture shock, but also because it is a challenge to make new friends, learn the language, get used to the climate and adapt to the customs that the locals have, all this is like learning to speak from scratch which requires a lot of strength, patience and motivation. Sometimes it is usually very hard and many people get depressed in the process, that is why I started this project for social good, Integrieren is a platform that allows you to know what is around you, activities, places of interest and even connect with others who are going through the same situation as the user.
My goal:
Design a platform that allows foreigners to better integrate into German society by providing them with emotional support and attractive activities in their new city.
My responsabiities:
User research, conduct interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iteration on designs and responsive designs.
- Understanding the user -
As a foreigner living outside my country of origin, I know how difficult it is to integrate into a new place when you don't speak the language well and when you find yourself alone, it's quite an adventure. It has its good sides but also its challenges. Talking to other foreigners living in Germany I realized that most of them have similar difficulties, I did interviews about what they find most challenging to integrate and among them I found making new friends, finding activities of interest in which they do not spend a lot of money, the language, the loneliness on important dates. I summarized the results of the talks into the following pain points.
User Research: Pain Points
01.
Difficulty finding fun,
low cost activities.
02.
Difficulty making German
friends because of the
language.
03.
Emotional challenges due
to loneliness and the
weather.
Persona Development
Thanks to the interviews I conducted, I was able to determine the pain points of the participants. I should mention that the interviewees were foreigners of all genders between 18 and 50 years old. Later I created people, who represent the situation of many foreigners.
- Starting the Design -
Next step "imagination and creativity". Taking into account all the data collected during the empathy phase, I was able to organize my ideas and determine the key points to start the design; the first task I had was the user flow.
User Flow
To organize the ideas I had about the process users should follow, I made the following user flow.
The important points are the location of the user to show what is around them and the activity options they have to choose from.
Sitemap
What continued was the information architecture, the goal is to create a registration page for photographers, easy to use and with clear tracking in the process. Considering that users sometimes don't have the opportunity to choose the shooting category, I made sure that a section within the website gave them the freedom to choose.
Paper Wireframes
Once I clarified what I wanted to achieve and the main points for the development of the prototype, I began to make the wireframes on paper; during this part of the process I wasn't so sure what would be better to design, a dedicated mobile app or a responsive website. But remembering the results I obtained from the interviews, I realized that it would be best to design a dedicated mobile application, since most users use their mobile phone to search for activities to do outside the home.
In this moment of creativity I made different wireframes with ideas that came to mind about what would be best for the design. In the end I marked with a star the elements that seemed ideal to incorporate into the final design of the paper wireframe.
The stars mark the elements chosen for the final wireframe
Refined paper wireframe
Digital Wireframes
After finishing the paper wireframes, the next step was to make the digital wireframes with the corresponding elements. Here I started to make some changes, for example the menu at the top left instead of the right as I had drawn it previously.
Low-fidelity Prototype
Once all the sections of the digital wireframe were finished, I continued with one of my favorite parts of the entire process, making the necessary connections to build the Low-fidelity prototype that you can then try here.
Low-fi prototype
Usability Study
The next step was to test the low-fidelity prototype with different participants, in a usability study. To do this, I planned it in advance in writing. defining objectives, KPIs and research questions. The usability study was carried out following the parameters presented below.
Parameters
Study type:
Unmoderated
usability study
Location:
Munich, Remote
Participants:
5 people
Length:
20-30 min
Findings
01.
02.
03.
04.
05.
Participants want to navigate the app better and not always go to the hamburger menu for everything
The participants find the location button not very relevant and difficult to find.
Inability to add comments in the community section.
Unattractive design and no information about recommendations in the language section.
Participants mentioned that in the “emotional support” section there is too much information on different topics on one page.
- Refining the Design -
The user feedback I got from the usability study is the most important thing to improve the prototype.
When I finished the first usability study I had several points of improvement to make in the prototype, during this phase I not only made the necessary modifications, I was also in charge of adding color, images and doing a long research on Germany to be able to add real text in the prototype, this way it would feel like something real.
Changes After The First Usability Study
Before
After
01.
I changed the hamburger menu to a bottom bar menu, this way it is possible to navigate clearly throughout the prototype.
Before
After
02.
The user's location is a very important point within the prototype, so it is possible to show what is around them.
In the first prototype this element is located on the second page, making it less important, so in the second prototype I changed it to the main page so it is possible to see that it is relevant.
Before
After
03.
In the previous prototype, users did not have the possibility of adding comments in the “Community” section, since initially the idea was that people could send private messages to each other, however with the usability study I realized that it was important that users could communicate freely, like in a forum where anyone can ask and answer, so I made this change from private messages to open forum.
Before
After
04.
In the low fidelity prototype it was only possible to see the name of the different places where you can learn German but there was not enough information about them.
To solve this problem I added individual boxes with more information about each item and added pages for each category: schools, websites and apps.
Before
After
05.
In the first prototype, in the emotional support section, three categories of help were presented on the same page, and the boxes with the information for each element were too small to be seen clearly, so after the usability study I added two more pages to I separated the categories and also increased the size of the boxes so it is easier for users to see the information in each box.
Hi-fidelity Prototype
Once the necessary changes were made to improve the user experience, I began to carry out new tests with the following high fidelity prototype, below you can see the connections I made and that I added new pages, please I invite you to test the Hi-Fidelity Prototype here.
- Iteration Process -
As we know, this is a search for improvement work where you can only know how to do things better by carrying out tests, so it was time to do a second usability study with the high fidelity prototype to detect the areas that should be modified and this was what I found.
Before
After
01.
In the previous prototype, the button to add the user's location did not attract attention; In the second usability study, the participants did not give importance to this section, but went directly to clicking on “read more”. Location is a key point in the app, so I modified the main page by removing the image I had in the previous prototype and emphasizing "location and continue".
Before
After
02.
In the community section, in the previous prototype the questions and answers looked very similar which caused confusion during the usability study for some participants, so in the new prototype I added space and a line to indicate that it is an answer and the question is at the top in a different color.
Another modification I made was adding an X to close the page and return to the main page without having to go back through the entire process.
Before
New section
03.
In the previous prototype, the emotional support and language section did not have a follow-up to another page to contact institutions or people. During the usability study, participants mentioned that they would like to click on the profile and be able to call directly or have the option to connect, so I added an extra page to be able to call directly.
Mock Ups
- Final Version -
After many tests, adjustments and modifications, the final prototype is finished. I must say that it has been a long process of learning and continuous improvements. Step by step I finished this work with a lot of motivation and passion to move forward with this and other projects. Don't forget to try the final version of the High-Fidelity Prototype here.
- Accessibility -
I used a contrast between the text and the background, I used visually accessible colors according to the rule 60, 30 , 10.
I organized the content in a logical and coherent way, fonts of different sizes for a clear visual hierarchy, as well as simple elements that make navigation and understanding easier for the user.
I provided text alternatives below or next to the images and non-textual elements, which described the content.
- Takeaways -
Reflexion:
Sometimes it is difficult to make decisions but you have to risk changes, that is the only way you learn. The user's voice is the guide within the project.
What I learned:
Planning and research are key to the process, both parties require time and consent, but in the end you end up learning more than you imagine, with patience changes are achieved.
Next steps:
Continue developing the project, again do a usability study; carry out the tests that are necessary to always look for improvement, listen to user comments and iterate the prototype.