"Make a Gift" User Flow
Buildwell
Where generosity and efficiency meet.
Overview
This was a four month passion project. I served as the lead researcher and designer of the end-to-end experience of the mobile app.
Problem
Donors struggle to easily make charitable gifts online. With a background in fundraising as a director of a local nonprofit, I know this story all too well. In addition to donors, administrators of nonprofits struggle to organize donations and communicate to donors in a clear way.
Solution
Buildwell serves as a giving hub to meet the needs of both donors and nonprofit administrators. The app houses all charitable gifts in one place so donors can find their tax deduction information easily, and administrators get clear donation reports.
My Role
UX researcher
UX/UI designer
Lead communicator
Timeline
Overall: 14+ weeks
Initial Research: 4 weeks
Design & Iteration: 7 weeks
Testing: 3 weeks
Deliverables
Insights from Research
Sketches & Wireframes
Hi-Fidelity Prototype
Design Process
1. Preview
Buildwell helps donors effectively make charitable gifts in a frictionless, delightful way and administrators understand reports and analytics efficiently.
2. Understand
At the very beginning of this project, using my previous experience in the nonprofit sector was helpful to imagine what it would be like if there was an efficient and frictionless way for donors to make charitable gifts.
Technology shouldn't get in the way of generosity. It should be a catalyst for growth.
Hypotheses
1. Donors are connected to nonprofits primarily through personal relationships.
2. The motivation to give is not contingent on the platform. A donor already has a commitment in mind when they approach the online giving platform.
3. Administrators are frustrated by digital hurdles specifically related to reporting and organizing donations.
3. Research
This process involved finding out more about existing digital fundraising platforms, investigating pain points, and interviewing real donors and administrators to hear about their experiences, both positive and negative to create actionable insights.
Research only makes visual instincts stronger. This project helped clarify this principle.
Heuristic Evaluation
There is a real need for trusted online donation platforms. Visibility increases usability. Donors also buy into stories. When donors are engaged in a narrative, generosity soars.
Based on Nielsen Norman Group’s ten heuristic principles of Interaction Design, I evaluated three competing platforms to understand their information architecture, branding, and user interface. The platforms that gave a specific role for the donor to fit into within a larger narrative were the most successful.
Survey
After surveying twenty participants (donors and administrators), most users cited the top complaint they had with online donation platforms was navigation difficulty (52%). Some other pain point categories were trust, credit card info, and understanding an organization's goals.
Multiple choice questions and open ended questions.
20 participants
Leveraged this data for the interview process to create questions.
Interviews
Over the course of five days, I conducted seven remote interviews with a series of twenty five questions. These insights were utilized in the rest of the design process. These were the biggest results:
Three Big Pain Points:
1. Simplicity - Processing donations with too many steps or drop down menus
2. Transparency - Donors trusting organizations with money
3. Clarity - Administrative fundraisers can’t see clear, organized reports.
7
Participants
5
Donors
2
Administrators
204
Minutes of Interviews
Key Quotes
Additional Interview Insights
After these initial findings, it was time to dig deeper–analyzing with empathy and curiosity.
Affinity Map
4. Analyze
This process involved using the insights gained from the research and creating assets to move the project forward.
By using an affinity map, I was able to create a large format layout of all the significant insights from the research including the interviews. This would help shape the personas (one donor and one administrator) and distill the biggest pain points for users further.
Donor Persona
Administrator Persona
Problem Statements
From there, I created a more synthesized series of HMW statements to move the project forward into the Ideation & Design phase.
1. How might we make the process of donating easy and clear?
2. How might we retain relationships with donors effectively?
3. How might we organize and forecast donations well?
The challenge: synthesizing data into clear, delightful visuals.
Sample User Flow for "User Edits Gift"
5. Design
I created a series of user stories based on the narratives that emerged from the research which led to a series of user flows. These addressed key pain points with specific tasks like editing a donation for a returning user. Next, I sketched dozens of screens and worked on wireframes. This phase culminated in a sample wireflow of a returning user editing a gift.
User Journey
Through this process, I was able to clarify which user journey's were the most important to move forward with. By focusing on a donor journey and an administrator journey, I was ready to begin sketching these two paths of the mobile app.
Donors needs and admins needs are not the same, so it was important to have distinct journey's for each.
Through the user journey, project was clarified in at least two ways:
For donors, the login process, main menu, and footer bar was shaped through creating a user journey.
For admins, instead of trying to accomplish reporting and connecting to a CRM, the scope was narrowed to inviting donors to donate via text.
Sketching
For me, with nearly every project I have to sketch first before moving into Figma. It is vital to my design process to always have a stack of graph paper, pencils, and lots of erasers handy. From my background in fine art, a blank piece of paper is an invitation to dream. Sketching out things quickly is a way to save time, and money. A few highlights from sketching were:
Understanding Interaction Design elements of the app.
Creating multiple versions of screens quickly to compare/contrast.
Branding, UI, and logo ideation.
Sample Sketches
Wireframes
Next, I moved into Figma to create low-fidelity screens that would follow the user journey I sketched out prior. I've included a wire flow of the journey without hi resolution imagery before I established the style guide.
Style Guide
Based upon the ideas of growing and building, I decided to create a style guide based on a green and blue palette to reflect this theme. I wanted the UI to feel minimal and flat, similar to material design trends that users would be familiar with.
6. Prototype
Overall, I created three different scenarios for the prototype and learned so much as I went through the process. The three different flows for the screens were:
Scenario 1: First Time Donation
The scenario for the first flow was set as a first time user who was texted a link to donate to the cause, “City Opps” by an administrator. Their task was to login, and make a donation for the first time.
As they opened the app, instead of opening to a Home screen to navigate from, the custom link sent by the administrator automatically links them to a donation form—based on their conversation in person about donating.
Scenario 2: User Edits a Gift
The scenario for the second flow was set as a returning user who was tasked to edit an existing donation. From the Home screen, the user was meant to go to “My Gifts” in the menu and out of the organizations to choose from, select “Bridge Builders” and edit their gift from there.
Scenario 3: User Finds "Populate Form 1040" Button
The final scenario for the third flow was set as a returning user who was tasked to find the button “Populate Form 1040” because it was tax season and they wanted to use the app to help organize their deductions. From the Home screen, the user was meant to go to “Tools” in the menu and out of the buttons to choose from, select “Populate Form 1040” and go from there.
The idea was the app could generate the form for the user based on the data housed in the app. Then, users would receive an emailed copy so they could report it to the IRS when they did their taxes.
Usability Testing
To improve the initial prototypes made in Figma, I conducted two rounds of testing, adding further qualitative data to improve the project. After each round, I iterated the design of the prototype based upon the user's experience.
There were four in-person tests total where I had participants complete three tasks each, making notes as they went along and asked for as much feedback as possible.
4
Tests
25-65
Age Range of Participants
3
Key Takeaways
Three Key Takeaways
1. Create a positive vision for the user so they will commit to downloading an app to make a donation.
2. ^This led to more development of the idea behind the eventual “Tools” section of the app—a place where a donor’s tax deduction information could be organized and auto-generated.
3. Lastly, through testing, the language for the app became more succinct. The focus of Buildwell being a “giving hub” to organize donations became a starting point.
This project gave me joy for at least two reasons.
Generosity is contagious.
I got to talk to lots of generous folks along the way and learn from them. The challenge and reward of generosity was revealed in their way of life.
The process works.
Often, I didn’t have the answers and had to refer back to the UX fundamentals of asking what the needs of users were continually.
Hypotheses Revisited
Confirmed: It turns out, donors really are connected first by relationship, then by tech. However, donors who are comfortable with donating online, do so with more frequency and are engaged socially for their cause.
Revealed: The motivation to give is not contingent on the platform. A donor already has a commitment in mind when they approach the online giving platform.
Underestimated: Building trust is a big part of the whole process of donating. Administrators who know this, pressed into finding the best way to organize their donation history with efficiency in the narratives that came forward.
Conclusion
Buildwell started as an initial idea — how to make donating online easier. It was a great process to go through from start to finish. I learned and grew as a person, and as a designer along the way.
Thanks for reading my case study!
Feel free to reach out if you'd like to work on a project together.