WanderVision header.png
Duration

July 2021 - August 2021

OVERVIEW

GoodGiver is an app that makes donating easier and more engaging through a two-sided marketplace. It allows users with unwanted items to find impactful organizations to donate to, while also enabling charitable organizations to independently promote their cause and interact with donors. I designed GoodGiver as a passion project, with the goal of reducing waste and helping grassroots charitable causes.

Tools

Figma

Miro

Maze

My Role

Solo UI/UX Designer

UX Researcher

At a glance...

PROBLEM
How might we connect donors with local charitable organizations and promote the donation of
unwanted items
?

Many people have unwanted items to get rid of, but are hesitant to donate because they are not sure how to find an organization to donate to. Furthermore, smaller charitable organizations struggle to promote themselves and attract donors in order to collect needed items.

SOLUTION
My solution is a mobile app called GoodGiver, which seeks to encourage users to donate goods by simplifying the process of finding local organizations to donate to and gamifying the donation process. GoodGiver also empowers charitable organizations by allowing them to advertise their cause, inform users about their impact, and track donor engagement.
IMPACT

By connecting donors with charitable organizations through a two-sided marketplace, donors will be able to support local causes and donate their unwanted items to organizations of their choice, reducing overall waste in the process.

DESIGN PROCESS

So, how did I get to my final solution?

  • Semi-Structured Interviews

  • Empathy Mapping

  • User Stories

  • Design Opportunity

  • Solution

  • User Flows

  • User Personas

  • Sketching

  • Low-Fidelity

  • Guerrilla Usability Testing

  • Mid-Fidelity

  • Usability Testing

  • High Fidelity

  • Feature breakdown

  • Reflection

BACKGROUND

Usable items are ending up in landfills

Every year, approximately 13 million tons of clothing and 54 million tons of food are discarded in the US. In addition, over 1.2 billion pounds of books and millions of pounds of household goods, school supplies, and toiletries end up in landfills. Major thrift store chains and for-profit donation organizations claim to help reduce waste, but actually end up contributing to the problem by discarding their unsold donations.

Many Americans, including myself, are eager to donate to causes that actually help decrease waste and deliver unwanted items to those that need them. However, these smaller organizations can be hard to find, and information about them is not always readily available. I decided to design GoodGiver to connect donors with charitable organizations in their communities, and make the experience of donating more engaging, impactful, and transparent.

RESEARCH
 
SEMI-STRUCTURED INTERVIEWS

Identifying my users' needs

Since I planned to design a solution from scratch, I wanted to gather detailed, user-centric data through multiple research methodologies to define the problem space and identify my target demographic.

 

I began by conducting six semi-structured interviews to better understand users’ pain points with giving and gathering donated items. Three of the individuals I interviewed were frequent donors, while the other three had previously volunteered at donation events or worked with charitable organizations to collect donated items. Through these interviews, I aimed to gain a better understanding of each user’s ideal experience on an app that promotes and facilitates donation.

DONOR INTERVIEWS

3

Donors

19-27

age

13

questions

Goals

1.  Understand how donors currently find and select organizations to donate to

2.  Learn which items are donated most frequently

3.  Discover what inspires donors to support specific causes or organizations

4.  Understand donors’ motivations to donate their unwanted items

DONOR QUOTES

“When I have items to donate, I wish I could see a list of all the local organizations I can donate to."

“I try to donate to small, local organizations whenever I can, but it’s not easy to find them.”

- Emma, 19

ORGANIZER INTERVIEWS

3

Organizers

18-42

age

13

questions

Goals

1.  Understand how organizations currently attract and advertise to donors

2.  Discover the current challenges of gathering donations

3.  Learn how organizations track donations and donor engagement

4.  Understand the step-by-step process of organizing, promoting, and executing a donation event

ORGANIZER QUOTES

“It’s difficult to encourage people to donate when they don’t know much about what our organization does.”

- Kevin, 42

“Communicating with donors is challenging. Sometimes they want to donate items that we can’t accept,

and we have to turn them away.”

- Anu, 20

KEY INSIGHTS
DONORS
1. Supporting Local Causes

All three donors indicated that they are passionate about supporting small, grassroots organizations in their communities, but they often have trouble finding them. They also struggle to find information about the mission and impact of these smaller organizations.

2. Donating Specific Items

Donors mentioned that they usually donate when they have specific items that they need to get rid of. They would like to have easy access to a list of organizations that accept the items they want to donate.

3. Keeping Track of Donations

Donors appreciate the incentive of tax deductions for donating their items, but they often misplace their donation receipts. This leaves them with no way to keep track of their donations.

ORGANIZERS
1. Promoting a Cause

Organizations are looking for an easy way to inform donors and educate them about their impact, in order to encourage more people to donate.

2. Advertising to Donors

Other than social media and paper advertisements, organizers do not currently have a platform to advertise and provide information about donation events. This makes it difficult to attract and engage with donors.

3. Recording Donations

Many organizations do not have bookkeeping resources, and often have trouble recording the donations they have received and keeping track of the people that have donated.

EMPATHY MAPPING

Visualizing users' thoughts and feelings

To summarize the insights I gathered from my interviews, I created two separate empathy maps to reflect the typical thoughts, feelings, and actions of my two user groups: donors and organizers. I created two maps because my user interviews revealed that the donors’ pain points were very different from the organizers’.

 

These maps helped me visualize each group’s mindsets and decisions throughout the donation process and isolate the areas where they struggle the most. Through this, I was able to empathize with both donors’ and organizers’ frustrations and understand why they do what they do.

Donor Empathy Map.png

Donor empathy map

Organizer Empathy Map.png

Organizer empathy map

USER STORIES

Planning product requirements

With each user group’s needs and pain points identified, I created a set of goal-oriented user stories to visualize the actions that different donors and organizers might take to meet specific goals, as well as the required features that each user would need to successfully complete these actions. This helped me identify possible areas for design opportunities and plan some of the

core features of my solution.

Screen Shot 2021-10-22 at 2.07.01 PM.png

User stories

- Nitika, 24

ANALYSIS AND IDEATION
 

Translating pain points into design opportunities

At this point, it was clear that donors and organizers each faced a unique set of challenges with trying to give or collect donations. My solution needed to address these challenges and satisfy the needs of both user groups. Using the insights I gathered from the semi-structured interviews, empathy mapping, and user stories, I was able to synthesize users’ needs and pain points into a list of actionable design opportunities.

x-mark-64.png

Donors struggle to find specific organizations that accept specific items

checkmark-64.png

How might we allow donors to search for organizations by cause

or item?

x-mark-64.png

Donors often misplace their donation records and receipts

checkmark-64.png

How might we allow donors to keep track of their receipts digitally?

x-mark-64.png

Organizations are unable to inform donors about their cause

checkmark-64.png

How might we empower organizers to advertise their cause to donors?

x-mark-64.png

Organizations lack resources to keep track of donor engagement

checkmark-64.png

How might we allow organizations to keep track of the donations they receive?

DESIGN OPPORTUNITY

“How might we connect donors with local charitable organizations and promote the donation of unwanted items?”

SOLUTION

I decided to design a mobile app with a two-sided marketplace that simplifies the process of donating and serves as a platform for donors and charitable organizations to interact with each other.

Donors will be able to discover organizations to donate to based on the causes they are interested in and the items they want to donate. Organizations will have the ability to independently create and manage their own profiles, provide donors with detailed information about their work, and gather needed donations. By creating a mobile app that facilitates interaction between donors and organizers, the donation process will be streamlined for both parties!

USER FLOWS

Visualizing users' journeys

Because I was going to be designing two separate user experiences, it was important for me to visualize them. I created two user flows to outline what a typical user journey would look like for each group. The donor user flow represents the process of finding an organization to donate to and using the “Check In” feature to record a donation and earn points for it. The organizer user flow shows the process of creating an organization’s profile through each step of the progressive onboarding.

GoodGiver (3).jpg

User flow of donation and "Check In" process

GoodGiver (2).jpg

User flow of organizer onboarding

USER PERSONAS

Representing both user groups

With the structure of my app planned out, I created two personas to model my user groups and visualize their goals, motivations, and needs. I referred back to these personas at each step of the design process to ensure that I was designing my solution to meet their needs.

Persona (3).png

Donor user persona

Persona (4).png

Organizer user persona

DESIGN
 
SKETCHES

Putting pen to paper

After ideating the structure and functionalities of my solution, it was time to start sketching it out! I created sketches for each of the app’s main features, and divided them into two role categories: “Donating” and “Organizing”. 

Screen Shot 2021-10-26 at 12.19.57 PM.png
LOW-FIDELITY DESIGNS

With the basic framework of my app outlined, I converted my paper sketches into low-fidelity wireframes. In these wireframes, I expanded on the features for the two different user flows and created more advanced designs for each one. 

Screen Shot 2021-10-26 at 1.02.44 PM.png
GUERRILLA USABILITY TESTING

Gathering early feedback

Since I knew my low-fidelity wireframes would lay the foundation for my mid-fidelity and high-fidelity designs, I wanted users to evaluate my first few iterations. I decided to conduct guerrilla usability testing so that I could gather feedback on my early wireframes. This allowed me to identify strengths and weaknesses in my low-fidelity designs and make significant changes before designing the entire experience. I recruited three users to test out my prototype.

KEY INSIGHTS
Highlight 1.png

Users did not understand the meaning of the term “Organizing” at first glance.

Highlight 2.png

Users mentioned that some organizations may have short-term donation events, and would need to specify the exact dates they will accept donations.

Highlight 3.png

Users liked the variety of options in the Donor onboarding quiz and appreciated that their recommendations could be customized.

Highlight 4.png

Users expressed that the Message feature might not be realistic for organizers to use. Many organizations might not have the time or resources to respond to each donor.

MID-FIDELITY DESIGNS

Using the feedback I gathered from guerrilla usability testing, I iterated my low-fidelity designs into mid-fidelity wireframes. Overall, the three users I recruited for testing were able to navigate the prototype easily, and they all expressed that they liked the concept of GoodGiver! My wireframes were not without fault, however, as there were several problems and pain points that my users mentioned during usability testing. As I iterated from low-fidelity to mid-fidelity, I made changes to address these problems.

Screen Shot 2021-10-26 at 4.20.28 PM.png
MID-FIDELITY ITERATIONS

Role selection

Low-Fidelity

Choose Role.png

Mid-Fidelity

Choose Role (1).png
PROBLEMS SOLVED

1.  Changed wording of role options to “Donating” and “Collecting Donations,” to better differentiate between users that want to donate and users that want to receive donations.

Organizer onboarding

Low-Fidelity

Organizer Messages.png

Mid-Fidelity

Organizer Onboarding 7.png
PROBLEMS SOLVED

1.  Replaced Message feature with an optional FAQ section in each organization's profile, to give organizations a more efficient way to answer questions from donors.

Organization profile

Low-Fidelity

Organizer Profile.png

Mid-Fidelity

Organizer Profile (1).png
PROBLEMS SOLVED

1.  Added a Review feature to increase engagement with donors, allow donors to share their experiences, and lend more credibility to organizations.

Organization insights

Low-Fidelity

Organizer Messages (1).png

Mid-Fidelity

Organizer Insights.png
PROBLEMS SOLVED

1.  Added numerical data values for "Profile Views," "Profile Saves," and "Total Donations" to allow for quantitative tracking of donor engagement.

2.  Created a separate Donations page and button on navigation bar, to allow for more in-depth tracking of past donations.

MID-FIDELITY ITERATIONS

Improving the Explore page

After creating a mid-fidelity iteration of the Explore page, which is a key feature of the donor-facing side of GoodGiver, I realized that it had several structural and visual problems. Since the Explore page is the first page a donor sees after creating their account, and the page they would interact with most frequently, I needed to solve these problems. I created four iterations of the Explore page to visualize different layouts and make it as user-friendly as possible.

Iteration 1

Donor Explore v.1.png
x-mark-64.png
x-mark-64.png
x-mark-64.png

Not enough information about each organization

Images of organizations are too small

Vertical scroll to view all categories is too long

Iteration 3

Iteration 2

Donor Explore v.2.png
Donor Explore v.3.png
checkmark-64.png
x-mark-64.png
x-mark-64.png

More detailed information for each organization

No information on which items organizations accept

Single column layout makes it difficult to categorize organizations

checkmark-64.png
checkmark-64.png
x-mark-64.png
x-mark-64.png

Card design allows for more organized categories

Card design allows for more organized categories

Search bar includes an explicit call to action

Donors cannot view organizations based on what they want to donate

Iteration 4

Donor Explore v.4.png
checkmark-64.png
checkmark-64.png

Horizontal scroll creates space for more categories

Cards include detailed information for each organization

checkmark-64.png

Each card displays organization's star rating and list of accepted items

checkmark-64.png

“What do you want to donate?” prompts donors to search by item

USABILITY TESTING

Is it user-friendly?

After completing my mid-fidelity wireframes, I decided to conduct a more structured, in-depth usability testing to solidify my design decisions and finalize my wireframes. I recruited eight users and asked each of them to perform a cognitive walkthrough and complete several task-based scenarios. Because I wanted to gather feedback on both the organization-facing and donor-facing sides of my prototype, I asked all eight users to complete the outlined tasks for both roles.

8

users

Benchmark Tasks

1.  How would you find out how many total donations your organization has received?

2.  You want to read donors’ reviews for your organization. How would you view all the reviews you have received?

20-32

age

Donor Role Tasks

1.  Navigate to the Explore page and select which item you would like to donate

2.  Using the “Search” bar, search for an organization that accepts toiletries.

3.  How would you find out where an organization is located?

4.  How would you use the “Check In” feature to record a donation?

5.  How would you add a receipt to GoodGiver?

1hr

duration

Organizer Role Tasks

1.  How would you find out how many total donations your organization has received?

2.  You want to read donors’ reviews for your organization. How would you view all the reviews you have received?

3.  How would you change the address and category tags on your profile?

3.  How would you find out which donations you received on July 18?

KEY INSIGHTS
Highlight 1.png

Users expressed that the Search results were not scannable and could provide more information about each organization.

Highlight 2 (1).png

Users did not immediately understand the purpose of the Donation List, and some expressed that they would not use it.

Highlight 3 (1).png

Users expressed that the process of adding a receipt was simple, straightforward, and a helpful tool.

Highlight 4 (1).png

Users expressed that the long scrolling on organizations’ profiles presented too much information, and could be better categorized.

FINAL SOLUTION
 
HIGH-FIDELITY DESIGNS

With the extensive feedback I gathered from usability testing, I made several changes to improve the functionality of my mid-fidelity wireframes and fine-tune the visual designs. After one last round of iterating and refining, my high-fidelity wireframes were finally finished!

Screen Shot 2021-10-28 at 10.38.55 AM.png
MAIN FEATURES

The Donor side

d8af1cac99c21662ebf168c4c77e0bd87114e146.gif

Onboarding

Users that select the “Donating” role are taken through a step-by-step onboarding, which explains how to use GoodGiver. Donors are asked to select the causes they want to support and the items they want to donate. These selections are used to customize their recommended organizations.

c40e0b54a6c9ab1fd91924267205a5aa86e97b95.gif

Explore

After creating an account, donors are led to the Explore page, which displays several categories of recommended organizations. Donors can also view organizations according to the items they want to donate, using the “What do you want to donate?” feature.

9e1c3372aef0646ee39627840166b0e5aa149206.gif

View an Organization

Once a donor selects an organization they are interested in, they are brought to the Profile for that organization. Information about each organization is sorted into three different categories: “About,” “FAQ,” and “Reviews.”

25f30113effa6c135dffd11faa80863432c7f2f3.gif

Check In

After a donor gives items to an organization, they can use the “Check In” feature to earn points. Users fill out some information to help organizations document the donation, and they can leave a review. Once completed, the user is rewarded with points!

62df616357dcc8d842fc9a5401d88baf98f61db3.gif

Scan and Sort Receipts

With the Receipts feature, users can scan their receipts, input information about their donation, and keep a digital record of it for bookkeeping or tax-deduction purposes.

MAIN FEATURES

The Organizer side

82757ce55c9472532dfa89e16de2c1d95a7e6724.gif

Profile Creation

Users that select the “Collecting Donations” role are taken through a step-by-step profile creation process. Organizers are able to customize each portion of their profile and they can make edits after they've finished setting it up.

a4804f5c70fc64088b3c6fef6c88b0f1dc1c3e61.gif

Edit Profile

Organizations can see their profile from a donor’s perspective using the Profile tab. The Edit Profile feature allows organizers to make changes to their organization’s profile. Once their changes are saved, new edits are immediately reflected on their profile.

afb9fa0139a0c0f968785921174adbd1e2a5cc0d.gif

Insights

The Insights feature provides organizations with quantitative data, allowing for more precise tracking of donor engagement. They are also able to view all the reviews that donors have left on their organization’s profile.

2e5bcd56503f59fbfd0b6978faf8d9568901d889.gif

Donations

The Donations page provides organizations with a record of every donation that donors have logged with the “Check In” feature. Users can view information about each donation, including the date and the items that were donated.

STYLE GUIDE
Style Guide.png
REFLECTION
 
KEY TAKEAWAYS
1. Working Solo

Before I started working on GoodGiver, I made a schedule so that I would finish within a reasonable amount of time. This was tricky, since I was already juggling a full-time summer internship and multiple classes.  I had to exercise self-discipline to make sure I was accomplishing what I set out to accomplish. Eventually, I realized that I would not be able to stick to my original schedule, as this project ended up being more time-consuming than I expected. In UX design, not everything is going to go according to plan, and that’s okay! In addition to discipline, I had to learn to not be so hard on myself and just go with the flow! :)

2. Learning and Growing

Although I had previously worked on several design projects, designing something on my own meant that I could experiment and try new things! I got to explore research methods, tools, and styles of design that I had previously never tried before. While conducting research, I gained an in-depth understanding of my users' behaviors and feelings, which helped me create a product that was tailored to their needs. While I was already very familiar with Figma, I got to learn how to prototype more advanced interactions, design my own UI kit and components, and improve my visual design skills. This helped me create a product that I'm so proud of! :)

3. Go the Distance!

Designing GoodGiver ended up being much more complicated than I had initially planned. Before I began researching, I wanted to design a product that would make donating easier overall. However, the only user group that I originally had in mind was donors. After gaining a deeper understanding of the problem space, I realized that charitable organizations had just as much difficulty as donors did, and that donating would be easier if both user groups had a solution. Although I originally didn’t want to design a two-sided marketplace, because I knew it would be much more tedious, I decided that it was necessary. A product that helps one user group while neglecting another group’s problems is not a well-designed solution.