Project overview
The product:
WoG a social Welfare app that help people in need. The app mainly focuses on homeless people. And it solves people’s many issues like finding an authentic organization to donate. Also It gives users option like Items, food and money donation. Our App also focuses on people who don’t find time because of jobs and prefer to have a doorstep pickup.
The problem:
Busy working adults and other family person find it hard to locate homeless people and authentic organizations to donate. Plus there are people who don’t want to go out but wishes to donate.
The goal:
Design an app/Website for people who wants to bring a change in the society. Our goal is to provide them an online platform where from finding and donating in org of their choice to get stuffs and material picked up from their doorstep will become as pleasing as the thought of helping others
My role
UX designer designing an app for Social welfare where we are providing an hand to the homeless from conception to delivery.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding the user
Personas
User research
Ideation
Problem statement
User research:
summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was people who just wanted to donate to some authentic organization and some of them were busy adults who have to struggle to find time. The adults confirmed that it was a bit of a problem to find and visit Organizations or needy people, there were other factors that bugged people. Other user problems included stepping out to donate as they hardly find time to do the same.
Personas
Ideation
By providing an online platform, a one place from where people can easily donate food, items, and money either to an NGO or directly by visiting the needy, We want to connect communities, local people to help others around them to survive and uplift their lives. Which will in turn make an impact on the society on a larger level as people will be taking charge of their localities.
● How long does it take for users to choose an NGO and make donation? ● Are users able to successfully donates money or stuff that they want?
● What can we learn from the type of donation users do as they choose to donate?
Starting the design
Digital wireframes
Low-fidelity prototype
Usability studies
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
These sub categories under the donation option helps the user to quickly decide and move through with donation and eliminates confusion.
App language helps the user of different origin and preferability to operate app in their preferred language
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was viewing donation of money or Items and then moving forward with the same to the end. Completing core navigational flow.
Usability study: parameters
Study type: Unmoderated usability study
Location: India, remote.
Participants:
5 participants
Length:
20-30 min
Usability study: finding
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining
1
Finding
Users want App language feature to be more easily accessible.
2
Finding
Users want an extra option for food donation.
3
Finding
Users want to have labels beneath the icons in the footer bar.
Refining the design
Mockups
High-fidelity prototype
Accessibility
Mockups
Early designs allowed for some customization, but after the usability studies, I added App language feature as a button on the top screen. I also revised the design so users see an extra option for donating the food.
Before usability study
After usability study
Early designs allowed for some customization, but after the usability studies, I added labels beneath the icons. For a user to easily understand so that it eliminates the user confusion and smoothens the journey.
Before usability study
After usability study
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for donating items and money. It also met user needs for app language feature as well as more customization.
Accessibility consideration
1
Used high color contrast for users with low eye vision to see clearly.
2
Used icons to help make navigation easier.
3
Used App language feature for users whose first language is not English.
Refining the design
Information architecture
Responsive design
Sitemap
Mapping SiteMap was helpful in understanding the main navigational flow that a user is supposed to take. As well for all the other screens that was relevant for the users all at once.
Responsive design
Responsive Design helps the user to use the Website in other screens as well. Here I have made a two mobile version of the Website.
Takeaways
While designing the social welfare app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs. And I have learnt what users want is always going to be different from ones assumption about users need.
Impact:
The Website/App makes users meet their needs everyday with less to no efforts even with their busy schedules and whatever screen sizes they choose to operate in. One quote from peer feedback: “The app made the donations and fund raising so accessible and at the same time authentic that I can’t say if I want anything else.
Next steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Quote from one of the User
“The app made the donation easy and authentic. People can pay donation from their home and to an authentic organization.”
