Donation App & Website
I designed a mobile app and a corresponding desktop website 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.
Carl
Carl is a father of a young daughter who needs to find donation centers that accept the items he is donating because not all donation centers take everything he wants to donate.
Janet
Janet is a retired teacher who needs a way to find donation centers close to her because she often donates to her community but the donation center she visits is not close to her.
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.
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.
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.
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.