Improving the payment process for RedCross donations through empathy and storytelling.

  • This project was given as a group project during the Netflix Pathways Bootcamp.

  • I was the team lead. I conducted User Research with my team members,but I did the UI/UX Design & Prototyping.

  • Figma, Miro, InVision

We started by doing a quick benchmark of the current page to see the problems it has. Doing this this gave us clarity on how to frame the research goal and research questions.

 

Current page issues:

  • UI Design Issues

  • Lacks in visual appeal

  • The payment process isn’t straightforward

  • Information architecture issues

User Research

 

Research Method

Me and my team conducted qualitative research through user interviews over Zoom, and we interviewed 6 people.

Research Goal

  • Discover what influences users to give.

  • Find out how users are currently giving to causes they support.

  • Determine if providing more payment frequencies would increase donation efforts.

Our major goal was to learn how people view charity, donations, and giving back. We wanted to discover what influences people to give to causes, and in what ways they are already doing so.

Research Findings

 
 

User Participant Quote

“I like to donate to causes that are personal and relatable to me.“

-User Interview Participant

Research Insights

 

Insights about what influences users to give

Personal and relatable causes

Causes found on social media

Causes that help in disaster relief

They value giving and helping

 

These insights helped shape how we framed our problem statement and how our solutions were going to be aligned with our research insights.

Insights about how users are currently giving

Monetary donations

Donation websites

PayPal, cheques, credit and debit cards, Venmo

Quarterly

5-6 times yearly

Problem Statement

How might we improve the donations experience by providing more payment options and leveraging visual elements that relate to causes to improve the user's experience ?

Design

Our idea was to make it an experience that was personable to users and to tie it to the emotional aspect of design. We wanted to create a donations experience that makes people happy to give and celebrate the joy of social impact.

Sketches

I created sketches using InVision FreeHand.

As the Product Designer for this project, my idea was to replicate a real-world giving experience and use that to create the donations experience. A gift card falls into a real-world giving experience, so I used that approach in creating the sketches.

 
 

Style Guide

I created a UI Style Guide that would help me with the UI and visual elements once I started designing. I used the RedCross brand colors which were blue and red and I also tested them for accessibility.

 

Choose Amount Screen

I used a card approach on the page to replicate the real-world giving experience of the “gift card.“

 

This screen enables users to choose the amount they want to donate

It uses a card Approach to replicate a gift card

There are more payment frequency options

I used the dropdown approach to make it easy and simple for users in making choices on what causes to support and frequency of payment options

 

Make Payment Screen

 

Card Approach

More payment method options

Radio button approach for ease in making choices

 

The payment screen was designed using a radio-button approach to enable users to choose what payment method they want to use.

From my research, I found that there were 4 payment methods users use and they are: Credit/Debit Card, Apple Pay, Google Pay, and PayPal.

If users choose any of the other payment methods, they will be directed to the respective payment websites to complete and authorize their payment.

Causes to Support Screen

 

Card Approach to display causes to support

Pictures for each cause to make it more personable

Short descriptions of each organization and hover links for users to visit

 

This was probably the most important and vital screen I designed because this was the part of the screen that aligned with emotional design.

I decided to implement images of the causes to support because I believed that doing this will create empathy in users’ hearts and influence them to donate to these causes.

I also included a short description for each of the causes to help users gain an understanding of the causes and the cards are linked to each of the organization’s respective sites.

Thank You Screen

Giving is an experience that advances the world, and I want to show gratitude to users for donating through the design of this screen.

 

Personalized Thank You message

“Donate Again” button CTA

 

I designed a Thank You screen to thank users for donating. The screen shows users the amount they donated, and the cause they gave to. It also includes a CTA to enable users to donate again to the same cause or another cause of their choice.

As I said, this was all about designing for emotional design, and in the real world, after you’ve received a gift, the receiver shows gratitude to the giver and that’s what this page was replicating.

Prototype Demo

I believe creativity is about expressing your ideas in ways that advance the world. The final design of this page aligns with my definition of creativity. Social impact improves the well-being of people suffering from different illnesses, disasters, situations, etc, and I wanted to create a pleasurable experience that drives social impact.

 

Usability Testing

 

Future Iterations:

Create a functionality for users to enter their desired amount

Add Amazon Pay to the methods of payment

Add an experience where users can donate food and clothes for disaster relief

 

We conducted usability testing with a group of 4 users to test our prototype and these were the results.

The end.

I hope you enjoyed learning how we designed for social impact through the redesign of the RedCross donations page.

I hope you also feel inspired to advance the world in any way that you can.