Great to Donate
I designed a mobile app and a corresponding desktop website called Great to Donate that would connect users with donation centers in their community based on their location and the items they are donating. Through a process involving research, interviews, initial design phases, and a usability study, I ended with high-fidelity prototypes of the app and website through Adobe XD.
The Goal
Design a mobile app and a corresponding desktop website where users can locate donation centers near them based on their needs and get directions to those donation centers.
My Responsibilities
As a UX designer designing the mobile app and desktop website from conception to delivery, my responsibilities included:
conducting interviews
paper and digital wireframing
low- and high-fidelity prototyping
conducting usability studies
iterating on designs
User Research
I conducted interviews to understand the users I'm designing for and their needs. I questioned them about their experiences with donating in their communities.
The user group confirmed initial assumptions that users either had to search the internet for places to donate their items, or users go to the same place each time they donate a certain type of item.
Pain Points
User research identified pain points users have when donating in their community and when seeking information about donation centers.
1
Reception
Some donation centers don't take all items users want to donate.
2
Awareness
Some users aren't aware of the closest donation centers to them.
3
Convenience
Most users have to search through the internet to find donation centers.
User Personas
After identifying pain points, I created fictional users whose characteristics, goals, and frustrations represented the needs of a larger user group.
Age: 37
Hometown: Monterey, CA
Family: Husband with one
young daughter
Occupation: Marine biologist
Carl
"I want to find the best match for my donations so I know they're being utilized."
Carl is a marine biologist with a young daughter. He wants to donate his daughter's clothes and toys when she grows out of them, and wants to find a place near him where he feels like his donations are being put to good use.
Goals
Find a donation center that accepts and uses the items he donates
Find the closest donation places to his home
Frustrations
He feels that some donation centers don't make the best use out of the type of items he donates
Some donation centers don't accept children toys
Janet
"I want to find a donation center close to my home, but I don't know of any."
Janet is a retired teacher living with her husband who likes to give back to her community by donating food and clothes. She always takes her donations to the same place even though it is not very close to her home because it is the only donation center she knows.
Goals
Find a donation center close to her home
Find a donation center that takes the items she always donates
Frustrations
Her usual donation place is not very close to her home
Age: 62
Hometown: Monterey, CA
Family: Husband with three
adult children
Occupation: Retired teacher
User Journey Maps
I then mapped the personas' journeys as they normally would go from picking a donation center to making a donation. Mapping the journeys helped identify further pain points and ideate possible solutions.
Carl
Mapping Carl's user journey revealed how users would benefit from the ability to find donation centers based on the items they are donating.
Action
Gathers items he wants to donate
Searches for a place to donate
Takes his items to a donation center
Task List
A. Gathers his daughter's old toys and clothes after she grows out of them
A. Searches the internet for a donation center
B. Looks for one that is near him
A. Drives to the donation center
B. Tries to donate all his items
Feeling Adjective
Satisfied to be getting rid of old items
Annoyed that he has to look through lots of search results
Satisfied when he finds a final result
Frustrated when the center will only take his child's clothes and not her toys
Happy that he contributed to his community
Improvement Opportunities
App where users can quickly find donation centers
App where users can find donation centers based on the items they are donating
Janet
Mapping Janet's user journey revealed that it would be helpful for people to have a mobile app where people can find the closest donation centers to them.
Action
Gathers the items she wants to donate
Goes to her usual donation center
Donates her items
Task List
A. Gathers old clothes she is ready to get rid of
B. Buy non-perishable food to donate
A. Drives to her donation center on the other side of the city
A. Drops off her items at her donation center
Feeling Adjective
Happy to be giving one of her usual donations
Frustrated that her usual center is so far away from her
Happy she is contributing to her community
Improvement Opportunities
App that finds donation centers that are close to the user
Paper
Wireframes
To develop ideas for the design, I first drafted variations of each page of the mobile app on paper.
For the home screen, I prioritized the users' ability to find a donation center based on what item they are planning to donate.
DiGital Wireframes
After paper wireframes, I created initial designs for the mobile app in Adobe XD. These designs focused on the ability for users to easily find a donation center that fits their needs.
Users can choose what item they are donating to find places near them that will accept that item
Majority of home screen is a map so users also have the option to choose a donation center based on location
The ability to quickly refer to donation centers and view how close each one is to the user addresses pain points that were discovered during user research.
Users can favorite donation centers to get quick access to places they want to go
Users can easily click on a donation center's location to view its proximity to them and get directions
low-Fidelity Prototype
The low-fidelity prototype of the mobile app connected the digital wireframes in the main user flow of finding donation centers and getting directions to a location.
Usability Study
I then conducted a usability study using the low-fidelity prototype to test the mobile app and discover any user pain points.
Findings
1
Users want the ability to choose more than one item to donate
2
Users want an "other" option if the item they're donating doesn't fall under the categories listed
3
Users would prefer the item options buttons on the home screen to be bigger
Mockups
After the usability study, I created high-fidelity designs that represented the final product. I used the feedback from the study to improve upon the initial designs and add more features.
Before usability study
Increased size of buttons, placed buttons in a horizontal scroll to make the page more interactive, and added an "other" item option
After usability study
Before usability study
Created an "add item" button in case users have more than one type of item to donate
After usability study
More Mockups
App HiGh-Fidelity Prototype
The high-fidelity prototype in Adobe XD connects the finalized mockups in an easy user flow and clean design.
Sitemap
I next moved to creating the responsive website for the mobile app. I created the sitemap of the website to organize the navigation before starting the designs, and I decided on a navigation that was similar to the app.
HomepaGe
Locations near you
Donate
Locations
Maps
Food
Locations
Maps
Clothes
Locations
Maps
Shoes
Locations
Maps
Toys
Locations
Maps
Other
Locations
Maps
Website Mockups
When designing high-fidelity mockups for the desktop website in Adobe XD, I kept the design elements consistent with the mobile app's design while also considering features that would be successful for a website.
Users can see a full list of donation centers near them
Users can get additional info about each donation center
"Add item" menu drops down from the button instead of sliding down from the top of the screen like the app
More Website Mockups
Website HiGh-fidelity Prototype
The high-fidelity prototype of the desktop website in Adobe XD connects the mockups in a straightforward navigation and user flow that complements the mobile app.
Takeaways
The donation mobile app and desktop website would be successful in making it easier for users to find a donation center near them that fits their needs. It also ensures that donation centers are more likely to receive donations that best fit their needs, leading to a community filled with charities doing their best to help the disadvantaged.
I learned that listening to user feedback can make significant improvements to the final designs. When transferring a mobile app to a desktop website, designs need to stay consistent while also considering what features need to be removed and what new features can be created.