'Help the Kids' organization's donation platform- mobile app & responsive website
Project overview
The Product:
'Help the kids' is a non profit organization which connects potential donors with verified orphanages in Tamil Nadu state. Their goal is to achieve social good by making the process simple and eliminating scam. Target users of the app are potential donors.
Project Duration:
July 2022 - October 2022
Project overview
The Problem:
People are skeptical about authenticity of orphanages while making online payment because of scams.
My role:
UX Designer (all rounder), from user research to wireframes, prototypes and user testing.
The Goal:
Develop trustworthy app by verifying orphanages and connecting them with potential donors.
Responsibilities:
Conducting foundational research, interviews, ideation, paper & digital wireframing, mockups, low & high fidelity prototyping, usability testing, iterating on the design, accessibility & responsive design.
Understanding the user
-
User Research
-
Personas
-
Problem statement
-
User Journey map
User Research
Summary:
I conducted interviews to understand users and their needs. People would like to donate on special occasions such as birthdays and wedding days to orphanage children. They are not able to trust an orphanage until they visit personally or hear from a trusted person.
Pain points:
1
Verification
Orphanages on internet results are not validated by anyone
2
Transparency
How the contribution is used is not clearly communicated
3
Repeated calls
Organizations keep asking after a contribution, regularly
Persona: Priya
Problem statement
Priya is a working mom who does not have time to visit orphanages for donation. She wants a trustworthy mobile app to donate to orphanages.
.jpg)
User Journey Map
Mapping Priya’s user journey revealed possible pain points and areas for improvement in the app
-
Paper wireframes
Starting the Design
-
Digital wireframes
-
Low fidelity prototype
-
Usability studies
Paper Wireframes
I started sketching wireframes on paper for the app considering the pain points learned from users.
Design elements from initial exploarations were marked with stars which could be used in the refined wireframe.
Digital Wireframes
Moving on from paper to digital wireframes, I focused on minimizing the steps in the user flow to make donation to orphanages.
​
In this homepage wireframe, essential information are displayed in the order of hierarchy.
Low-fidelity prototype
After creating wireframes for necessary screens in my user flow, I connected them and made a low fidelity prototype.
I tested the prototype with users and got feedback; analyzed them, prioritized them and iterated on my wireframes.
View Help the Kids app's low fidelity prototype
Usability study findings
-
Moderated usability study
-
Location: India (remote)
1
Navigation
Orphanages list navigation cue is not clear for users
-
15 participants
-
10 - 15 minutes
2
Choices
Users need more choices for both donation and payment
3
Homepage
Homepage has too much information
Refining the Design
-
Mockups
-
High fidelity prototype
-
Accessibility
Mockup I
From the usability study 1, I learned that 'orphanages list' is not emphasized in the homepage. From the usability study 2, I understood that home page does not look clean, instead flooded with information. I iterated based on the feedback.
Mockup II
From the usability study, I came to know users need more choices of donation. From the second study, I understood users were confused with many CTA buttons. I iterated on the design to improve the user experience.
Mockups III
High fidelity prototype
I laid out all the mockups in the order of user flow and started connecting them to make a high fidelity prototype for user testing.
View Help the Kids app's high fidelity prototype
Annotations for accessibility
Accessibility considerations
1
Annotations are given to set the traversal order in which user would tab through items with screen reader or keyboard
2
The app has typographic hierarchy which is helpful for users to navigate quickly.
3
Colour contrast and suitable font size are used so that users with reduced vision could navigate easily.
Responsive website
-
Information architecture
-
Mockups
Sitemap
For the complementary responsive website, I started with planning the Information Architecture. The website’s flow focuses on users who are interested in volunteering and orphanages who want to join the community.
Mockups
Mobile web
Tablet
Desktop
1
Going forward
-
Takeaways
-
Next steps
Takeaways
Impact:
Help the Kids app achieves social good by increasing donations to orphanages. It connects potential donors with verified orphanages all around Tamil Nadu state.
What I learned:
I learned the importance of building products across different devices so that more number of users are likely to use the product. Such products provide overall positive experience to users
Quote from study participant:
“The process of donation is simple and easy; I will donate online since the orphanages listed are verified already”.
Next steps
1
Conduct follow up usability testing on the iterated high fidelity prototype.
2
Identify areas for improvement and make the user experience delightful.