top of page
“Connections” App and Responsive Website for Social Good.
Connections is an organization focused on helping people after a natural disaster by raising donations, providing information about shelters, recruiting volunteers, and keeping people informed about natural disasters. The primary targets are people concerned about how to help people and they want to participate in one way or another.
ROLE
UX designer, from conception to delivery.
TEAM
Alejandro Ramos Rubio
STAKEHOLDERS
Connections stakeholders
TIME
July- August 2022
1/3
THE PROBLEM
It’s difficult for people to find reliable information about natural disasters, safe places to donate to, and good teams to enroll as a volunteer. The main goal of Connections is to give the best information and solid and reliable ways to donate and participate as a volunteer.
THE GOAL
Design an app and responsive website where the users can find the latest news about natural disasters and give them an easy way to donate and enroll as a volunteer.
RESPONSIBILITIES
Conducting interviews, paper and digital wireframing, low and high fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on the design, determining information architecture, and responsive design.
USER RESEARCH/ SUMMARY
I conducted interviews and empathy maps to understand the users I’m designing for and their needs, a primary group is identified as students who want to enroll as a volunteer because they have plenty of time, and a secondary group is identified as working adults who want to participate in donating. Both targets struggle to find good and reliable places to participate.
The feedback we received through research was clear, that the users would use a way that they can be informed and participate as a volunteer or donate.
PERSONA
"Together we
are stronger!"
FERNANDA
AGE
21
EDUCATION
STUDENT
HOMETOWN
GUADALAJARA MEX
FAMILY
SINGLE
OCCUPATION
PSYCHOLOGY
STUDENT
GOALS
- Help people.
- Meet new people who like to be volunteers.
- Learn new ways to participate in the community.
FRUSTRATIONS
- News sometimes doesn't tell how to help.
- Not enough money to travel as a volunteer
PROBLEM STATEMENT
Fernanda is a student who needs a practical way to get information about natural disasters and ways to enroll as a volunteer because is difficult to find reliable places and easy ways to participate.
PERSONA
“Everyone can contribute with something”
CARLOS
AGE
35
EDUCATION
B. ENGINEER
HOMETOWN
ZAPOPAN MEX
FAMILY
MARRIED
OCCUPATION
SOFTWARE
ENGINEER
GOALS
- Find better ways to help people.
- Encourage people to participate.
FRUSTRATIONS
- No time to participate as a volunteer.
- Search for information is difficult.
PROBLEM STATEMENT
Carlos is a working engineer who needs a way to get news about natural disasters and donate money and food because it’s difficult to find a reliable and accessible place to do it.
USER JOURNEY MAP
Fernanda’s user journey map shows that an effective way to have good information and betters ways to enroll as a volunteer would increase the participation
USER JOURNEY MAP
Carlos’ user journey map shows that a better way to donate and get information for busy people would help to improve participation.
WIREFRAMES
After the user journey map, I came up with ideas for how to address problems the users have when they want to participate. My focus is to give them an easy way to be involved and informed.
LOW-FIDELITY PROTOTYPE
I prepared for the usability study by connecting all the points to complete a task, the user can navigate exploring the app and I can get all the best feedback to improve it, before the mockups.
USABILITY STUDY: PARAMETERS
STUDY TYPE
LOCATION
PARTICIPANTS
LENGTH:
UNMODERATED USABILITY STUDY
MEXICO (REMOTE)
5 PARTICIPANTS
15 - 20 MINUTES
USABILITY STUDY: FINDINGS
It was clear that the users have some problems, that I can fix, and even so, they could complete the tasks.
-The confirmation process of the donation was not created, and the users got confused.
-The process where the users fill in their personal information to enroll was not created, and they got confused.
-The users need a better way to share the news.
MOCKUPS
Based on the insights I got from the usability study I modified the buttons and added some colors to give a better guide to the users. Also, I added the confirmation screens to enroll and donate. I added a better way to fill in the personal information and the option to cancel, also a screen confirmation was added.
HIGH-FIDELITY PROTOTYPE
After the modifications based on the usability study, the flow for the user was clear and they could complete the tasks.
The main screen of the app is divided into three key sections, at the top, users can stay informed about the news through headlines and brief summaries. In the second section, they find the main functions of the application, and in the third section, users have the opportunity to interact. This design aims to provide a balanced and user-friendly experience, allowing users to access important news, perform key actions, and actively engage, all from the home screen
In the "News" section, users can explore the most relevant news about natural disasters, especially those occurring in their area or nearby locations. The goal is to provide critical and specific information about natural events that may directly impact the user, keeping them informed about their immediate surroundings. Additionally, they can share it on their social networks
The main functions of the application, such as "Donations," "Volunteers," and "Find Shelters," are easily accessible with distinctive colors and touches. This ensures that these essential functions stand out clearly for an intuitive user experience
The app is complemented by features that allow users to stay connected with each other, sharing experiences and tips. This strengthens the community and encourages active user participation
ACCESSIBILITY CONSIDERATIONS
SCREEN READER.
BIG BUTTONS WITH DIFFERENT WAYS TO ACCESS TO TASKS
CONTRAST COLORS TO MAKE EASY TO NAVIGATE AND AVOID MISTAKES
RESPONSIVE WEBSITE
DESIGN
After the app was completed I started to plan the responsive website, I focused on the sitemap to create a good flow for the users. I planned the site based only on the essential information to keep the main point of “Connections”.
SITEMAP
The design was created to focus on size variations of Mobile, Tablet, and Website. I optimized the website to fit the specific user needs of each device.
WIREFRAMES
MOBILE
TABLET
WEBSITE
LOW-FIDELITY PROTOTYPE
HIGH-FIDELITY PROTOTYPE
IMPACT
Users feel safe when they are looking to donate or enroll as a volunteer, avoiding bad experiences, also they can be informed about the latest news from reliable sources. Also, they can share their experiences with people, and then new people can join and grow the community.
​
One quote from a user:
“It’s good to know that there is a place where you can help people in this easy way”
WHAT I LEARNED
This project was a big challenge, at first I felt a bit worried, but after some research, I realized that there are ways to make it easy for people to get involved and solve the pain points, so I felt so motivated, that I could come up with solutions and solve the main problems to the users.
Empathizing with users is the key to come up with good solutions.
NEXT STEPS
Add options where the users can connect with other apps or websites related to save lives.
Add a section where people can get courses to prepare for natural disasters.
Connect with bigger organizations around the world to share information and experiences.
bottom of page