1
PROJECT OVERVIEW
The problem
There are a lots of organizations offering donation platforms, but it is a little bit overwhelming and not clear which is the priority at the moment. Also, some may seem not very transparent and not clear whether the things or money you’ve donated will reach the person that needs help.
The goal
Design an app and responsive website that will help users to make donations easily and provide a guidance and transparency to the process.
The product
Project duration
January - March, 2022
My role
UX designer leading the app and responsive website design from conception to delivery
My responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Donateum is a cross-platform donation service created for people who wish to help rebuild communities from harsh devastation of typhoons and hurricanes. It is a peer-to-peer donation app and responsive website concept that helps to donate easily and with more transparency aimed at every user who is willing to give away things, foods and money directly to those who need them.
-
​Donateum provides guidance to those who donates for the first time or isn't sure what to donate.
​
-
It allows donations to be delivered directly to those in need, improving overall transparency of the process.
​
-
The service also aggregates various volunteering opportunities from different organizations for those who wish to help on site.
2
UNDERSTANDING THE USER
User research
I found some people who made donations through some donation organizations and conducted a user interview to find any disadvantages of current donation channels and ways to improve the way we donate. Most users were having problems choosing where to donate so their donation would be useful and received by the person in need. Another good number of users would like to donate food and things, but don’t know where it will be needed most. I’ve gained a very valuable feedback and developed two personas that will help me to define problem statements and develops solutions.
PERSONA 1
Name: Katherine
Age: 46
Occupation: Business owner
Katherine is a business owner and a mother of two. They have a very stable income and can afford to spend extra money on donations or charity, but it is really hard to choose from so many donation options available, so most of the time they give up.
Because money is the most convenient way for Katherine to donate, they sometimes doubt that the money either will reach the victims or distributed or spent according to victims needs.
PERSONA 2
Name: Jacob
Age: 22
Occupation: College student
Jacob is a senior student and undergoing his internship in a very promising IT startup. They are very eager to help typhoon and hurricane victims, but their salary cannot afford extra cash for that. However, they have some old things that would be helpful for people in need.
Jacob wants to make some good impact on this world, so they want to do some charity, but their lack of expertise in what donations are needed in different circumstances keeping them from starting giving help due to the doubt whether their impact will be well-targeted and specific.
3
PRELIMINARY DESIGN
Low fidelity wireframes v1.0 - raw ideas of user flows
Low fidelity prototype v1.0 - link to the prototype
4
1st USABILITY STUDY
I have created an UX Research Study Plan to test low fidelity prototype and find any flaws in functionality and determine the ways how to improve them. I want to find out what difficulties users may face while completing the main tasks of our my app: choosing how to help – donate or volunteer, choosing items to donate, using donation guidance.
Research questions
​
-
How long does it take for a user to go through all 3 flows?
-
Are there any parts of the flow where users are getting stuck?
-
Are users feeling the guidance in the app help them to donate/find volunteer openings?
-
Do users feel that their donation will make a difference in the end of the user flow?
-
Are all necessary functions and features easy to find and comprehend?
Parameters
Study type
Location
unmoderated usability study
NYC, remote
Participants
Length
6
30-40 mins
Affinity diagram
According to the data and information I have obtained during user testing, I have created an affinity diagram to find patterns that will help me identify actionable insights.
Findings
Priority 0 finding
Insight:
Solution:
for most users it is no very clear how to start donation process or apply for volunteer
create a call-to-action button that will turn on donation guide or lead to volunteer application guide
Priority 0 finding
Insight:
Solution:
for most users was confusing not being able to choose multiple items to donate
create a list of all possible items that are needed for donations with multiple selection feature
Priority 1 finding
Insight:
Solution:
some users didn’t know in what unit item quantity was measured
add unit selection tool for chosen items
Priority 1 finding
Insight:
Solution:
some users felt confused in the end of donation/volunteer application
add a page with donation tracking and application status
Priority 2 finding
Insight:
Solution:
some users didn't know how much money is good to donate
add suggested money amounts to choose from
First usability study with initially sketched prototype revealed a lot of insights that will help to improve the user flows and refine all wireframes into high-fidelity prototype that will be used for the second usability study.
5
REFINING THE DESIGN
Low fidelity prototype v1.1 - link to the prototype
High fidelity prototype v1.1 - link to the prototype
Design changes
To make the start of donation process more obvious I've added a CTA button with fixed position on the screen.
Red color will make it even more visible and indicate that user must start from clicking on it.
Search bar gave flexibility for looking for items to donate, however it didn't provide the feature to select more that one item, so item catalogue was added where multiple items can be selected for donation.
Some items have different units of measurements, i.e. toilet paper can be measured in rolls or packs, depends on how you donate it, so it was necessary to add unit selection for each item.
Some items have different units of measurements, i.e. toilet paper can be measured in rolls or packs, depends on how you donate it, so it was necessary to add unit selection for each item.
Some items have different units of measurements, i.e. toilet paper can be measured in rolls or packs, depends on how you donate it, so it was necessary to add unit selection for each item.
6
2nd USABILITY STUDY
After high fidelity prototype was ready, I decided to do another usability study with different users to polish the design one more time. This was very useful as I discovered more changes are necessary to improve the usability and overall experience of the app.
Parameters
Study type
Location
unmoderated usability study
NYC, remote
Participants
Length
6
30-40 mins
Findings
Insight:
Priority 0 finding
Solution:
most participants felt frustrated scrolling down on few screens (shipping and payment method) in order to find the CTA button
create a label-like menu that will switch to different choices without stretching the screen
Priority 1 finding
Insight:
Solution:
some participants were overwhelmed about poor visual contrasts of sign up/in screens
simplify sign up/in screens without using overlays with the background photo
Priority 2 finding
Insight:
Solution:
some users wished for separate 'edit' function for each donating item
add separate ‘edit’ function to each item in the list.
High fidelity prototype v1.2 - link to the prototype
Design changes
The CTA button on some screens, like shipping method, wasn't seen due to the long screen and the need to scroll down to find it. Users also said that avoiding scrolling and keep information on one screen (if possible) will be more comfortable for them.
So I changed the list of choices into labels.
Sign up and sign in menus were too overwhelmed from contrast so it was quite unpleasant for users to look at, I decided to keep the background photo but darken the overlay to give more emphasis to sign up elements.
Items that were already selected didn't have separate 'edit' function, so users suggested to add it for each items added to shipping list.
7
RESPONSIVE DESIGN
Sitemap
With the app designs completed, I started work on designing the responsive website. I created the Donateum sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Prototype of responsive design for desktop - link to the prototype
Prototype of responsive design for tablet - link to the prototype
8
TAKEAWAYS
Impact
What I've learned
Users who tested the high fidelity prototype of Donateum app and its responsive designs loved the idea of contributing to community relief from hurricanes through the app as it has more clear process and guidance in donating.
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me to create solutions that were both feasible and useful.
Next steps
1
Conduct a new research to polish the design of current prototype and make changes if there are any insights obtained.
2
Create a flow for a user who receives donations.
3
Insert a few sentences summarizing the next steps you would take with this project and why.
Let's connect!
Thank you for your time reviewing my work on the Donateum App!
If you’d like to see more or would like to get in touch, my contact information is provided below.
​
Email: dk@dk.works
Website: dk.works