CareClub
Get informed, get involved, make a difference.
What is Care Club?
CareClub is the app that should bring refugees and citizens, offering help, together. To bring safety and care to those on the run. The app facilitates a map of the location and services citizens want to offer to refugees.
Services like accommodation, jobs, food, clothing, medical help, and legal/immigration help. All free of charge because of the love for the other. The app would focus on connecting users with local services on a community level. Anyone can add resources to the app.
I believe that every human being has the right to seek safety, comfort, and asylum in other countries when they are no longer safe in their home country. I am extremely worried about the human rights violations by various governments and their border patrol organizations leading to the death of thousands and thousands of migrants. I condemn illegal pushbacks, and hampering NGOs trying to save people’s lives on land and at sea. Physical and sexual abuse of migrants by border patrol officers.
Problem
This past year millions of people in Afghanistan and Ukraine were forced to flee their homes at a moment’s notice. Meanwhile, crises in countries like Syria, Ethiopia, and Venezuela persist, resulting in a record-high 100 million people displaced globally. These families have had to make difficult decisions when fleeing their homes. But while they can only carry so much, refugees bring countless gifts to their new communities: hopes and dreams, experiences and talents, traditions and family stories, resilience, and determination. Now more than ever, people fleeing war and persecution need our support.
Goals and Objectives
To support refugees and other people affected by humanitarian crises.
Donate to give refugees the support they need to thrive.
Welcome refugees into a new community.
To bring safety and care to those on the run.
Facilitates on a map the location and services citizens want to offer to refugees.
Target Audience
Immigrants, refugees, and asylum seekers.
People who would like to offer help and donations.
Role
UX/UI Designer
Researcher
Quality Assurance
Tools
Adobe Illustrator
Adobe Photoshop
Figma
Procreate
Team
Milos Panovic (Myself)
Misha Banner (Design Mentor)
Duration
4 Weeks (80 Hours)
Design Thinking Process Overview
Research
Research Plan
Secondary Research
Market Research
Competitive Analysis
Personas
Primary Research
User Interviews
Define
User Persona
Brainstorming
Task Flow
User Flow
Design
Low-Fidelity wireframeUI KitHigh-Fidelity wireframe
Test
Hi-Fidelity Prototype
Usability Testing
Affinity Map
Priority Revisions
Research
In this phase, I first learn and identify the consumers, the business environment, the competitors, and market trends and empathize with potential users that will use the app. Before I began my research, I drafted a research plan that outlines our research goals, research questions, assumptions, and methodologies.
Research Methodologies
Competitive Research Analysis
To investigate and see how the direct and indirect competitors offer help for refugees and immigrants.
User Interviews
To get a better understanding of what kind of information users want to see on this feature and understand their pain points, and aspects they like about the feature. How to organize the media control bar and which icon/symbol to use that the users can easily associate with the movie info feature.
User Testing
Create a prototype using wireframes to determine usability and if this app can help and satisfy user needs.
Empathizing with The Users
I began my research online. I tried to clarify my understanding of what exactly defines a refugee. I also researched what resources are currently available to them in our community. I assumed that refugees were in serious need of help and lacked many resources. My research showed that there is still a large need in the refugee community, but they have more resources available than I assumed. I also assumed that though I didn’t know a whole lot about the refugees in our community, the general public did. My research opened my eyes to what the actual awareness is in our community. I found that the general public doesn’t know much about refugees in their community, yet they are willing to help.
Competitive Analysis
By observing direct and indirect competitors, I was able to observe what other applications have to offer as a solution for refugees and immigrants. Identifying their strengths and weaknesses, I was able to evaluate how CareClub could have an edge in the market. Creating provisional personas based on market research, I was able to narrow down the type of participants I would interview.
*Click on picture to see it bigger.
Interviews
From there I began interviewing local experts on the refugee process and how they aid the process. I also interviewed refugees who have resettled in our community. This helped me better understand their experience.
One of the most enlightening parts of my research was when I interviewed the director of Catholic Charities of the Archdiocese of Chicago. She came to the US as a refugee in the early 90s. She has a huge appreciation for the people who helped her with her transition. She has since dedicated her life to doing the same for individuals coming here as refugees. Through the interview with her, I learned about the process and requirements to come here as a refugee. I also learned about the resources available to refugees. I learned that though there is still a need for resources, there are more available than we assumed.
Research Analysis
*Click on picture to see it bigger.
Define
After synthesizing data from the research phase, I define the business goals and the core problem of the users which who I am designing for. While defining, I will Ideate by generating new ideas and brainstorming how to initially create the site architecture and solve the problems of the product.
User Persona
Based on my prompt, my original persona was a refugee who had recently arrived in the United States. After doing research I realized that there was actually another persona. The secondary persona was the community member who knew little about refugees but was interested in learning more and getting involved. I added a secondary persona and began creating tasks based on their goals. Once I got into the tasks for the user story map, I found that my two personas were quite conflicting with their goals and point of view. I reviewed my interviews and did more research. My research confirmed that the refugee process gives good access to all the information and resources we were planning to include. The local community had far less access to information about refugees and how they could help.
*Click on picture to see it bigger.
Sitemap
Here, I have the sitemap layout architecture for the CareClub app. The pages and features defined here are based on the competitive analysis and the insights we learned from the user interviews.
User Flow
In this section, I have created a user flow to show different scenarios of what my personas Tony and Ihor might take to complete a given task.
Design
In this phase, I want to start creating the design layout of my pages, the UI elements, and components it needs, and define the visual elements that will go into it.
Low Fidelity Wireframes
I started with digital pen and paper wireframes. Focusing on mobile I made the product scaleable and forced me to remove anything that was not essential. My user is busy and isn’t coming to this app to hang out, but to gather information then go out and get involved in the community.
*Click on picture to see it bigger.
Mood Board
Before I tackle the brand’s visual looks, I went to gather inspiration online and created a Mood Board. Based on all the research I have done so far, I have created brand attributes to help me identify CareClub’s visual looks.
*Click on picture to see it bigger.
Logo
Inspired by my mood board and brand attributes, I have sketched out and digitized different variations of the brand logo and picked out the best one that represents the entity.
*Click on picture to see it bigger.
Brand Style Tile
After finalizing the logo design, I created a style tile that represents the brand to have a consistent visual tone of CareClub’s Identity.
UI Kit
I have created an updateable UI-Kit to compile all my UI elements, features, patterns, and assets into one guide as I build through the pages.
High-Fidelity Wireframe
Based on my mid-fidelity wireframes and brand style tile, I have combined and created various UI elements to develop the overall visual look for the pages. During this, I made a lot of quick changes to the design to get the right feel before moving on. I focused on adding white space, reducing distractions and unnecessary color. I also made changes to the spacing giving each item room to breathe.
Test
Working on my high-fidelity design, I continued to refer back to my personas and their goals to keep me on track. In this phase, I have created a prototype design to conduct usability testing with real users to see if the screens function as intended. This will allow me to weave any potential user difficulties, usability errors, or false assumptions that the prototype may have so I can iterate on the updates and prevent over-investing before the actual site development.
Usability Test
Before conducting the usability tests, I created a usability testing plan to outline the scope of the test. The goal of the usability test was to uncover any pain points or usability issues with the application.
Overview
Usability testing was conducted among my family and friends. The interview lasted about 2 hours in total with 5 participants ranging from 3 females and 2 males aged 31 – 44. For this project, I used a high-fidelity prototype. Before the test, the participants were screened and have been given a brief background of what the project is while mentioning the limited functionality of the prototype.
Goals:
Determine users understanding and navigation of the application.
Learn the paths users will take to find their desired information.
Find what information was lacking and where was it expected.
Learn where there is confusion, frustration, lacking information, or expected yet missing features.
Methodology:
Evaluative Research, In-person think-aloud test. Present scenarios and tasks to participants to complete while letting them openly voice their thoughts as they walk through the prototype. Participants will be observed and recorded to identify any areas of confusion in the design.
Remote with shared Figma prototype and shared their screen so I can observe their interaction with the prototype.
Participants:
Number of participants: 5
Age demographic: 31 - 44 Years of Age
Average Interview Duration: 22 minutes
Hi-Fidelity Prototype
After creating High-Fidelity Wireframes, I used Figma to make Hi-Fidelity Prototype.
Affinity Map
After the testing, I gathered and synthesized all test findings, using an affinity map. Then, I synthesized all the insights in order to find the most prominent patterns in user comments, actions, and pain points that led to solutions for improvements.
Conclusion
The number of refugees in the world has reached the highest level ever recorded, according to figures published by the United Nations. Though there are some resources available to resettle refugees, there is still a huge missing link. In their resettlement process, integration is key. Support after those initial three months is critical. This is when they need to integrate and make meaningful connections. Many community members are unaware of the refugees in their communities, though they are willing to help. My application accomplishes my personal goals by educating community members on the global crisis, what that impact is in their community, and how they can get involved to make a difference.
After considering the inputs of my user testing participants, I improve my final design and prototype. While most of my participants liked a clean and simple design, there are some changes that needed to be done to improve user experience such as the "I need help" button should be prioritized over the "I want to help" button on the first page. Also "Report this helper" is to be presented as a link detached from the "Send Message" and "Show direction" buttons while those two are primary and secondary CTAs. A couple of participants agreed that asterisks are not mandatory on all input fields while signing in, especially the "Description" section should be optional and different colors of "name" and "last name" are senseless so to keep the consistency of text I’ve changed it to blue like the rest of the text. To reduce confusion between the users when they are on the "Confirmation" page I incorporated another "Next" CTA for further action. For most participants logically "Log out" and "Delete account" are supposed to be moved from the "Settings" under the user's profile. Incorporating indicators of read and not read messages is also a little detail to improve the UX. In the same, message section, a profile picture of the user is not necessary. Keeping consistent in elements and not involving a new arrow, I've changed the arrow from the drop-down menu while users choose a language from the filled one to the lined one.
