Winter — Spring 2021, Remote
Optimizing the donor page for recurring donations
6 minute reading time
Project Details
My Role
Product Designer
Team
Myself
Shivani Gummadi, Preston Chan (Project Managers)
Jason Tran, Benjamin Kim (Engineers)
Duration
May - July 2021 (2 months)
Tools
Figma
Overview
What is OpenMeal?
OpenMeal is a non-profit organization leveraging technology to serve meals to those in need while also supporting local, family-owned restaurants. Our platform is entirely run by volunteers and donations from the community.
The Goal 🔥
Based on our current stream of donations, we’ve noticed that our lengthy list of donors predominantly consists of non-repeating donors. The goal of this project is to build a solution derived from user research to help our donors better understand their impact, OpenMeal, and our objectives.
OpenMeal Donor Page Final Solutions
Talking to donors
After conducting phone interviews and collecting survey responses, we were able to understand donor motivations and blockers for recurring donations and identify 3 key user stories.
Key user stories
As a donor, I want to be able to understand and/or see the impact my donation is making more clearly.
As a donor, I need to understand the urgency behind why I would want to or need to donate more than one time.
As a donor, there are multiple other organizations that require donations or address similar issues as OpenMeal.
Early explorations
With these user stories in mind, I used them to guide the trajectory of my design ideas.
Donor impact dashboard
Since diners and restaurants had their own unique set of account controls allowing them to track information relevant to them, I thought, what if we do the same for donors.
Here they’d be able to see how their donations were used, broken down into metrics like number of meals and restaurants supported.
Impact Dashboard Concept Mockup
Personalized appreciation
My second exploration was an interactive, personalized letter of appreciation. The idea was that after someone donated, they’d be presented with a special thank you note from one of our diners. Donors could click this envelope graphic and the note would pop up.
In alot of the notes we receive, diners often talk about their personal experience dealing with hardships around food, so I thought this could be an opportunity to create a human-to-human connection and donors could see that there are real people impacted by their contribution.
Personalized Appreciation Concept Mockup
Personalized Appreciation with Pop Up Concept Mockup
The pitfalls
I realized that if donors wanted to track their impact, they’d have to make an account and sign in each time they want to donate. This might actually deter people from donating because it adds an extra step to go through. In addition, an interactive, personalized letter from one diner may not be as impactful because donors want to help as many people as possible. Because of these reasons, I started brainstorming and researching new solutions that would make the donation process as easy, barrier-free, and impactful as possible.
Rethinking the donation experience
In the previous explorations, I had been focused on what happens after a person donated. But what if we showed donors their impact even before they committed to donating? And this was really the turning point in this project.
I went back into research mode and started googling things like “track donation impact” to see if there was something that already existed that I could draw inspiration and build from.
My team eventually stumbled upon Goodwill's impact calculator, where users type in the quantity of whatever article item they donated and it spits out the impact made.
Goodwill impact calculator inspiration
Takeaway
What makes Goodwill's impact calculator so effective is that it quantifies how donations are being used and the influence it has on their mission. In this next stage in the design process, I prioritized quantifying impact, reinforcing our mission and the story behind the metrics, and giving users control over how this calculation experience unfolds.
Experimental prototypes
To generate as many unique ideas for a calculator as possible, I created several experimental prototypes to explore the most creative solutions before dialing in on feasability and effectiveness with my team.
Prototypes
Final deliverable
After countless rounds of iterations and product team reviews, my pod team created a new donor page optimized to encourage new and recurring donations. The side-by-side impact calculator and DonorBox portal allows users to calculate the impact their contribution makes, presenting them with all the relevant information that would aid them in determining an appropriate donation amount and frequency for their circumstances. This new page better promotes our values of transparency and community by showing users exactly how their donation is used and that it truly does support our community of restaurants and diners.
Live Site
final designs
My learnings
Design-Developer Collaboration
Throughout this project, I saw an opportunity to streamline our process a bit better. In previous projects, the designer-developer collaboration process is in fact not an effective collaborative effort at all. Oftentimes, designers end up showing the developer the designs nearing the end of the process, which ultimately results in wasted time and effort. To prevent this from happening in this project, I would consistently send my ideas to my engineers to assess feasibility and hear their thoughts. I also established a more formal last stage of the design process where design and engineering meet before closing out a project to evaluate the original design against what the engineer had built and QA the product together. This is now something that our whole design team has adopted and it’s helped our developers quickly make design changes and push our pages to production as fast as possible as well as build a stronger relationship with the design team.
I represent the voice of our users
I really learned the importance of representing the voice of the user throughout this process. I realized that no one is going to advocate for the user unless I do, especially when I'm the only designer in the room. I've experienced a huge growth in my confidence as I learned to defend my design decisions and push back on stakeholder feedback that doesn't have the users' best interests in mind. Moving forward, this is something I want to remember when I'm feeling timid to speak up and I want to have the confidence to assert my position on team decisions.