Duet Browsing Flow

Description

Duet aims to make the giving process more transparent by allowing donors to purchase items that uniquely serve the needs of a refugee through a web platform.

Role

Lead Product Designer

Co-founder

Timeline

Jan-Feb 2019 (6 weeks)

Tools

Pen + Paper
Figma
Protopie

Design Question

DESIGN QUESTION

How might we create a platform that allows donors from around the world to easily donate to refugee families in a way that feels personal, impactful, and legitimate?

Clarifying the Problem

Background

Last year, I took a 2-semester human-centered design course at USC called Innovating for Global Challenges. The class is aimed at generating solutions to global crises, the refugee crisis for my cohort, in a team-based, multidisciplinary structure.

This class included two trips to Greece where cohort members were able to interview refugee families to understand the problem space.

The Research Trip

In the fall semester of my sophomore year, me and 15 other students travelled to Lesvos, Greece to observe the refugee crisis first-hand. We were able to visit two refugee camps, talk to many different stakeholders, and build connections with refugee families. Through this research, I observed two large issues.

Group of students helping refugee children paint a housing shelter
A typical shelter given to refugees when they arrive to the camps
Group of students helping refugee children paint a housing shelter
Piles of aid collected for refugees, consistently mostly of jackets.
Issue #1: Refugees don't get the items they need
As NGOs give standardized aid packages with the assumed necessitates, refugees are stripped of their ability to live in their own way. On the other hand, donations coming in from abroad are often repetitive and unneeded. We found that each refugee was able to get 3-4 jackets if they wanted.
Group of students helping refugee children paint a housing shelter
Talking to the Mayor of Lesvos to understand
​Issue #2: Local economies are destroyed from refugee influx
As the refugee crisis silences the tourism industry in receiving cities, local stores lose a significant portion of their business. In Lesvos, almost 50% of stores have closed since the crisis began.

Following the trip, we understood 2 things very clearly. Refugees need more autonomy in the aid they receive in order to successfully resettle their lives and local economies in crisis regions deserve to be acknowledged a source of supplies.

Examining the Issue at Home

After seeing the inefficiencies of the current aid system, we began seeking opportunities to get foreign donors involved to help these families. We talked to a variety of potential donors to ensure that we had a holistic view of philanthropic sentiments.

Overwhelming, the main takeaway was:

I would love to donate to refugee families, but I just don't feel like I understand my impact when I donate to NGOs. It feels like I'm giving money to a black box and I have no idea if i'm truly helping someone.

PROBLEM DEFINITION

The system aiding refugee families is broken. Refugees don't get the right items they need, local stores are stocked full with potentially helpful aid, and donors are unsatisfied with the lack of transparency in traditional donation routes.

Constructing an MVP

When my team finally arrived at our idea, we had a mere 1 month before our next trip to Greece. We needed something to test, fast.

Competitive Audit

To serve as the foundation of our product explorations, we looked towards other applications of 1:1 philanthropy.

Kiva allows people to lend money via the Internet to low-income entrepreneurs and students in over 80 countries.
Kiva is focused on telling stories of their beneficiaries
People's experiences are grouped into easily digestible categories

Looking into Kiva's product, I understand the importance of story in resonating with a potential donor. When people learn about someone's journey, they have a strong desire to become a part of that journey. It also promotes transparency and legitimacy for the aiding organization.

Additionally, Kiva does a great job of creating categories for people's projects by grouping them by compelling causes that donors can use to decide who to loan to. This is useful because it makes it easier for donor to make decisions on who to donate to.

Prototyping the MVP

Months later, we had finally settled on moving forward with Duet after bouncing around with some other ideas. We saw the important need for a new form of philanthropy, and the class had another trip coming up in just a few weeks to test our prototypes. My team and I decided that it was important to test how receptive donors were to what we had envisioned, so we bootstrapped a basic MVP in two weeks.

Simple Donations

Given that we only had a few refugee families to use for our first pilot, the design allowed users to get a lot of information just from the browsing page. Additionally, at this scale we were able to include reasons for why they wanted the types of items they did.

Emphasizing Empathy

In order to personalize the giving process, I included a story on each family's giving page, allowing donors to quickly emphasize with their situation.

To donate, I implemented a simple tap-to-select donations mechanism that allowed for frictionless donations through Paypal.

Back to the Drawing Board

Initial Feedback

After going to Greece and testing our MVP, we found that donors responded positively to the donation experience of giving to refugee families. Overall, the we proved the concept and had people excited about the future of philanthropy. However, there was one comment we heard multiple times that we had not anticipated.

After going to the donate page, I have an extremely hard to picking a family. How do I decide which family to donate to when their stories are so similar?

This feedback was especially pivotal as it helped me understand that people make decisions in many different contexts. They might be in transit and stumble across the link with 2 minutes before they board their train, or just finished an expensive weekend and feel especially conscious. Without a solution for making decisions in all of these contexts, the user is likely to suffer from decision fatigue.

I decided that the best course of action was to discover these user personas as quickly as possibly. Given that people aren't very conscious of their philanthropy habits, it was clear that the best course of action was to test an entirely different interface and do deeper into the feedback.

Building a Test

When approaching the new test interface, I focused on three elements that would provoke the right feedback. We wanted to experiment with the notions of simplicity, control, and authenticity.

Item-Based
By allowing users to browse by items, there are more opportunities for distinction.
Filterable
User should have a sense that they can narrow down the results to find a good fit.
Authentic
Rather than stock images, refugee needs would use the pictures they took themselves.
Testing With Real Users

I decided to create 2 versions of this test interface—one with more of a family focus and another that was strictly item-focused. I had a hunch that the right browsing flow would be a mix of these. Using Figma, I rapidly prototyped the two iterations of the interface. While I focused on crafting a realistically beautiful product, the urgency of these tests warranted some sacrifices especially as deadlines for the class loomed ahead.

I set up a few user testing sessions outside of various academic buildings and facilitated some talk-throughs with any person willing to try it. Given that Duet's audience could potentially be very large and diverse, I found that this was an acceptable strategy for testing.

Group of students helping refugee children paint a housing shelter
A roommate's friend going through an exercise with the Figma prototype
Interpreting the Feedback

After the testing sessions, we ended up with somewhere around 60 user interviews. I documented all of the feedback collected in a Notion table where I was also able to categorize the data by discipline and priority.

Here are some of the comprehensive highlights of what we heard:

I like the view where you can see families and items. But the second option kind of feels like Amazon. I don't feel very compelled to donate because it's set up like I'm online shopping.
I don't have a very strong attachment to a particular item, but I prefer that it fits my price range and indicates some level of urgency.
There isn't a very clear connection that this item is going a particular refugee family. It feels detached.

Building a Polished User Understanding

User Personas

To synthesize my understanding of the user research, I crafted personas for the most important behaviors I saw rise out of the feedback.

QUICK AND EASY
Riki
Age: 21
Occupation: Student
Devices used: Mobile
Motivations
Easy + high-impact way of donating, access to low-prices items, intuitive product
Frustrations
Philanthropy either feels expensive or not impactful when you don't have a ton of money to spend, rarely are impactful ways of donating easy to do day-to-day
GUIDED BY HEART
Anna
Age: 55
Occupation: Stay-at-home mom
Devices used: Mobile
Motivations
Wants to know where her money is going, donate to meaningful causes, get updates on the impact of her donation, stories
Frustrations
Decision fatigue, not seeing what her money is doing, feeling like she doesn't know how to provide aid to the crisis
TRUST IS EARNED
Devin
Age: 32
Occupation: Consultant
Devices used: Mobile, desktop
Motivations
Donate to trustworthy nonprofits who prove their authenticity, donate items that are absolutely necessary, make donations on-the-go
Frustrations
Lack of transparency, process requires time and vetting, unable to contact nonprofit
Complete User Journey

When deciding on the style of the UI, I considered the product environment that this application would live in. I assumed that this product would likely need to fit within brand of the university that is using it,  so I decided to isolate the colors to white, grey, black, and an accent color that corresponds to the colors of the university. I decided to go with a more intense version of this accent color, a vibrant red in the case of USC, both to add undertones of energy and vitality, while giving the application a modern feel. I felt that this style was most appropriate for users that are mostly in their early 20s.

Duet 1.0

Resolving Friction in Choosing Families

Although I had mapped out the user flow, I kept coming back to one particular tension in the design: decision fatigue. Given that so many of the families had similar stories and backgrounds, an open browsing format seemed daunting. I decided to map out two potential options for browsing to fully examine the trade-offs we would be making with both.

Open Family Browsing Model

The first conceptual model is the one we began with—the idea that a user could browse through many families and have a lot of autonomy in who they get to donate to.

Another advantage of this model is the opportunity to embed many modules throughout the interface, such as the laundry detergent one which give us the power to push items or families that haven't received enough attention.

However, the most important consideration is the potential for decision fatigue. No matter how we frame this model, people are still forced to choose between families with minimal, quality decision-making factors. We've heard this feedback a lot already and can only imagine how much worse it would be at scale.

Matching Browsing Model

Given that refugee families often have similar stories and requests, we realized that it wasn't practical to give people a lot of choice. It was doing more harm than good.

The greatest benefit of this model is that it reduces much of the friction with figuring out who to donate to. Because so many of these families have amazing stories, it's safe to assume that giving them one family with the option to meet another is a good way of establishing a strong connection.

Additionally, using this matching process allows us to implement an algorithm that strategically shows families that have many urgent items or haven't been donated to in awhile.
Interactions
Scanning a Family Page
As the first touchpoint between the donor and the families, I wanted to make sure that empathy was a priority. Initially, there is a preview of the family's story, giving the donor an invitation to learn more about the family without taking up too much screen real estate.
Moving down the screen, donors can see all of the items that a family has requested, distinguished by their significance.
Donating an Item
To eliminate friction in the donation process, tap-to-donate allows donors to select multiple items as well as contribute to larger, crowd-funded items.
Meeting a New Family
When users find that they do not resonate with the family they were matched with, there is an easy way to browse others, including information that indicates the urgency of need.
Approaching Price-Conciousness
When users find themselves to be mainly limited by the price they're willing to pay, a simple payment module allows users to be instantly directed to a family whose needs fit within their budget.

Designing for a Lean Start-up

Build fast, talk to users, test assumptions.

Although I had worked in start-up environments before, working on Duet taught me the importance of failing quickly. When you're low on resources and time, you have to come up with MVPs to test the most important facets of your design. Even more, you need to invest as much time as possible in talking to your users. This is a huge problem for start-ups because they don't know exactly who their market is.

Design for Social Good

Above all, I learned that no matter what projects I work on in the future, I want them to be pushing the world forward in a way that is meaningful to me. I know that can sometimes be much more indirect than aiding the refugee crisis, but I'm excited to explore companies with mission-driven cultures and products that better the human experience.

Other Work

New York Times Design Internship
Summer 2019 • mobile (ios)
Designing a daily bulletin to help users get consistent value while discovering recurring content formats.
USC Health Center Redesign
Fall 2019 • mobile (ios)
Rethinking the referral process for college students facing mental health issues on campus.
CONTACT
spencegblood@gmail.com
CONNECT
MANTRA
Keep it simple, but significant