top of page

The Giving Hand

New Website Blue Mockup Instagram - Laptop.png

Summary: People want to know what their money is going towards.  When donating money, the biggest thing that they want to know is how their money is being spent and if it is actually being spent on people who need it.


Tools: Figma | Miro | Google Docs | Google Survey | Google Sheets | Zoom 



Louise Enriquez:UX Researcher

Nadia Granata: UI Designer

Prachi Patel: UX/UI Designer


2 1/2 weeks to complete

Research Process

To start, we gathered 6 people to interview to share their insights and feedback on donating, giving back and volunteering. We also conducted a survey to get people’s opinions on what they felt was most important about giving back to those who are in need.

1 stakeholder

Fandango is our stakeholder for this project

6 interviews

We were able to get six voluntary participants for our interviews

50 Survey Responses

We got 26 anonymous participants to answer our survey and were to get amazing KPI's for our project.

Interview Results

From our 6 interview participants and and 20+ surveys are done and finalized. We took all the data and results to Miro and highlighted the important features that our participants wants to see.


Survey Results


The Problem

How might the Giving Hand make it easier for users to see what their money is being spent on when donating to countries in desperate need of help and supplies?


And how might we change the perspective of the user's experience when giving back to people in times of crisis? Will you answer the call when people need you…

Value Proposition

2. Value-Proposition-MadLib.png

Competitors Analysis

1.7-CompetitorAnalysis.xlsx - Google Sheets.png

User Persona

In our case, Mona heard the plea and answered.  Meet our user persona, Mona Marcello. A 29 year old barista from Toronto.  She is devastated by the current state of the World.  She fears not only for her life but for those overseas in the Countries being torn apart.  Mona is fortunate to have a lot in her life and now she wishes to give back. 

How will Mona give back?

Screenshot 2022-04-14 144629_edited.jpg


Introducing the Giving Hand. A care package app that will allow people to pick and choose items, needed by people in other countries, and send those packages over using humanitarian organizations such as the Red Cross and World Vision.

Screenshot 2022-04-14 144653_edited.jpg

User Flow and Lo-Fi Wireframes

Once the user flow was established to map out the navigation of the app…


We focused on creating wireframes and a low-fi prototype.


 Low-Fi Wireframe Testing

Now, we had to test our prototype. We tested with 6 people and had them go through the app, completing 4 tasks. Some of the things highlighted wer:


-The descriptions weren’t clear enough to people, other things just as labels needed to be added to identify pages

-People had a hard time identifying some of the icons we used on our menu

-And that the tracking page needed to have a more direct path


UI Style Guide

Now that we had usability testing done, we went to work making changes to our app and using our style guide to implement color and text.


Hi-Fi Design Wireframes

After creating our UI Style Guide.. we immediately went back into Figma and applied those designs to our Hi-Fi wireframes. We love the concept of the gradient pink-orange colour it gives a warm and inviting interaction. We also took social media as a big aspect of the website sharing the care package you make to check in with the families and making sure the packages are sent to them as photo-proof is important to the users. And finally, we also placed a tracking system so that users can see when their packages are shipped and when they will arrive to the families as safety, security and reliability are important.


Hi-Fi Usability Testing

We created a more polished version of our app to test with users again. Then again; we brought in 6 people to test, each completing 4 tasks we set out for them.  Testers had an easier time navigating through the prototype, yet some improvements could still be made. Some of the users commented that while they loved the colour palette, the brightness was a bit too much for their eyes.  They also mentioned things like utilizing the space and making the buttons bigger for fingers.  


Final Product

After more changes were made, The Giving Hand was ready.  Here you can see our final design. The background is more lively and inviting and not too bright in the yes. The navigation and transitions are smooth with subtle loading time. And we made sure the safety and security of the users' information and payment are the most top priority. Overall the final product was designed perfectly to our and users' visions.

Final Thoughts

As we come to the end of our case study, we would like to highlight some features we would like to explore in the future:


-We will also add a pet care/supply category to give as a donation

-Lastly, we will also look into future payment methods like ( biometrics, voice recognition and PayPal) to name a few

-We will also add a filter option that will help users find a specific item(s) to add to their future care package. If any of our items are being ordered more than once they will be highlighted and recommended for users to choose from.

-Add a community forum where users can communicate with one another and share their experience of creating a care package and suggest what items they can place on their next donation.

-A pen-pal feature will be designed for pre-teen-teenagers as they can write letters and give hope to children overseas by giving the best gift of all which is friendship.


Click here to view  "The Giving Hand" Case Study



Figma UI Style Guide

Click on the Figma icon to see the UI Style Guide


Figma Lo-Fi Prototype

Click on the Figma Icon to interact with the Low Fidelity Prototype


Figma Hi-Fi Prototype

Click on the Figma Icon to Interact with the High Fidelity Prototype

bottom of page