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

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