The Giving Hand
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
Collaborators:
Louise Enriquez:UX Researcher
Prachi Patel: UX/UI Designer
​
TIMELINE
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
Competitors Analysis
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?
Solution
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.
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
Extras
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