Contribute with Confidence
.png)
We've All Been There
The ‘confirm’ button is all that remains. Clicking it is the final step in financially contributing to an organization that you believe in, and yet you hesitate. You question whether your hard earned money is going to be used for the cause that you are passionate about, or for another hidden purpose.
Charities and non-profit organizations are an opportunity for individuals to help their fellow man in a myriad of ways, and yet many choose not to contribute to causes that they are passionate about out of fear or doubt in the organization or its leadership.
Is it possible for people to know exactly how their money is being allocated before they choose to financially support a cause? Is there an easy way for people to find causes that that they’re passionate about? Can tracking donations even be convenient?
The Project
I worked within a small two person team in order to answer these questions and come up with a solution. My partner and I carried out the research as well as the initial design phases together over a one month period. Through collaboration, we were able to build a solid understanding of how tasks needed to be divided up as well as what resources we could use.
We Need to Talk About 2020
The entirety of this design process was carried out during the Covid-19 pandemic of 2020, so all of the work had to be done remotely. All phases of testing were conducted online and heavily relied upon video conferencing.
That's cool, Covid. I didn't want to go outside anyway.
And so it Begins...
To start the process, we listed assumptions about charitable organizations and countered those assumptions to widen the scope of the problem and better understand how to tackle it.
Time to Collect some Data
We used a traditional online survey to discover how often individuals donate to charities or interact with them in a different capacity. Having conducted research in the past, I felt comfortable taking point during question creation. Through the survey, we found that:
-
The majority felt it was important to know how donated funds would be used by the organization.
-
90% of those taking the survey had financially contributed to an organization within the last 2 years.
-
Virtually no one tracks their donations.
-
People are looking for other ways to contribute, such as volunteering, but don’t know how to find those opportunities.
%20(2).png)
Wanting to hear personal experiences, we interviewed 5 individuals that were willing to share their thoughts with us. Commonalities from the interviews:
-
Practically no one tracks their donations because there isn’t an easy way to do it.
-
Many are hesitant to donate because they’ve heard negative stories of CEOs and are unsure of what information to believe.
-
People need transparency about where their money goes. If information isn’t clear or up front, they won’t donate.
Data Organization
Gathering the desires, concerns, and logistics of our problem — we created an affinity map. The affinity map proved to be a struggle for me and Meg. The interviews and survey provided insightful information, especially when it came to concerns, but we wrestled with how to organize all of the data. The map was imbalanced and once we consolidated similar responses, eliminated unnecessary information, and focused on the pain points, we were able to gain clarity.
The affinity map was frustrating but it broke the data down and allowed us to create our Persona, Zeke:
He's a generous guy but needs help getting started!
Zeke’s ‘frustrations’ and ‘goals’ laid the foundation for our product. Throughout the process, we found ourselves returning to the persona to keep us focused on the main goals of the product. Zeke served as a grounding reminder of the data that was gathered early on.
We're Going to Need More Maps
Our story map revealed that we had neglected one of the main features we wanted to include: a “Favorites” section, which would allow users to save organizations and sort them into organizable folders to easily locate later.
The process slowed during Site Mapping because there wasn’t a shared understanding of the process. We took time to establish our points of confusion and from there were able to clarify our goals. Ultimately, Site Mapping proved extremely helpful for the project because it was during this step that we realized we had forgotten a screen for the actual charity (kind of important).
All screens within the purple box were added during sitemapping.
From Idea to Paper
Working separately on the home screen design, we each created 10 versions of what it might look like. We then showed the wireframes to each other with the intent to merge the best aspects of each person’s designs.
When the time came to share our home screen wireframes, we discovered that our understanding of the home screen wasn’t unified. On the User Story Map, the Home screen branched and connected to the “Explore” and “Profile” screens, so my designs were extremely simple — rearranging these two elements (with a logo thrown in) while my partner merged the idea of the “Home” and “Explore” screens together. After discussing the designs and the thoughts behind them, we were united in deciding that her merge design idea was best for the product.
This solution raised a new question that the site map didn't anticipate, "How do we navigate to the profile screen?"
We divided up the screens and began wireframing, checking in with each other throughout the process to ensure that the designs were consistent.
We got really tangled up in how to do backwards navigation because there wasn’t a navigation bar in the original design. When considering a nav bar, we didn’t have many main pages that we felt were necessary to include and therefore chose to design without one. Once we combined the “home/explore” screens, we re-examined our decision because we wanted a simple way for the user to navigate to their profile. Once we added a navigation bar in, the entire flow of the frames worked much better and it was included in the design from that point forward. The bottom navigation bar was designed to be floating at first and with only two icons but later it was altered to include a third icon and be flushed against the bottom of the screen.
We swapped our wireframes and added in details with fresh sets of eyes. Details such as:
-
Placing a heart icon on the charity image to easily save them to ‘favorites’.
-
Updating the auto-pay terminology from ‘subscribed’ to ‘active’.
-
Changing information on the Donation Complete page and incorporating the ‘share’ feature.
-
Added ‘Category’ as one of the filter options.
This is back when the navigation bar was floating and only had 2 icons (home & profile).
Finalizing the initial designs in Sketch, they were then added into InVision for the first round of User Testing.
During testing, it was universally found that the ‘filter’ icon alone was unclear or missed entirely. The filter was a large part of the design, both in searching for charities as well as viewing tracking information, so it was important that the final product utilize this feature correctly.
We added the word ‘filter’ to accompany the icon in the hopes that it would draw the user’s eye, but it was still almost universally missed in the second round of testing. It was determined that future designs would remove the confusing icon, use the word ‘filter’ exclusively for clarity, and also move its location on the screen to increase visibility.
Even with the word ‘filter’, no one could see it up there.
The word ‘save’ was added under the heart icon so that it wouldn’t be confused with a public ‘like’ button since feedback showed confusion on that matter. The ability to donate anonymously if desired was a feature that we added in during this phase.
At this point there were four icons within the navigation bar, one of them being ‘favorites’. We made the decision to remove that from the nav bar in order to give priority to the profile screen since one can still navigate to favorites from there.
Remembering the concerns from our research, we created a slogan:
One Does Want a Hint of Color
Once the time for hi-fidelity designing arrived, we branched off to work individually for the remainder of the project. I remember looking at all of the tasks that needed to be done — knowing that I was the only one that was going to be working on it, and feeling intimidated. Visual design is new to me and it’s an area that I am not comfortable in yet, so this section of creating hi-fidelity screens was a challenge but one thatI was ready to take on.
I started by creating a product logo. I thought back to the slogan, Contribute with Confidence, and took two ‘C’ letters from those words and interlocked them as if they were a chain. It symbolizes that giving is a strength and by working together can we help elevate humankind to become stronger.
Charity + Confidence = Charidence
Finding the color palette was a long (and somewhat painful) journey. I don’t yet have an “eye” for what works so it was a process of trial and error. Initially, I chose a palette that had colors that I felt represented the qualities that the product had. The colors were extremely dark and the contrast between them was off.
_p.png)
The contrast between these left a lot to be desired.
Wanting the palette to have more similar colors but still wanting to represent the product, I picked orange for enthusiasm, energy, change, and happiness. Unfortunately, it was difficult to see and after rounds of feedback and testing, it was determined that a new color palette was needed entirely.
.png)
I have now learned that yellows are extremely tricky.
Researching that blue represents strength, reliability, peace, and trust — blue was the right choice. Learning that a simple color palette can make a big statement was eye opening for me.
Such trust. Many reliability. Wow. Very strength.
Going Forward
There are many features that we would have liked to include in the product with additional time. In the User Story Map, we wanted the users to have alternative payment methods aside from a standard credit/debit card; PayPal and Apple Pay came to mind.
We thought that having a balance included within the app could be useful. With this, a portion of a user’s paycheck could automatically be placed within the app to be donated at their leisure.
Allocating funds to multiple charities simultaneously was in the initial design. Seamlessly contributing to multiple organizations at once was an aspect that I wanted to bring to life, but other critical features were focused on for the first app release.
Takeout - I Mean, Takeaways
This process has shown me just how much room I have to grow with visual design. I heavily relied upon design reviews and gained great insight from what others had to say. Trying out new ideas with the design and then implementing feedback is a system that I will be happy to continue using in the future.
Collaboration is vital in not only the progression of a project but also ensuring that the product is the best that it can be.
There were times that my partner and I had differing opinions on the direction of the project, but after healthy discussions about why we had our thoughts and how they related to the work, we were always able to choose the best route for the product — oftentimes with a hybrid of our ideas. Collaboration brings a richness that would be lost if the work was done by only a single individual. Through our different experiences and ways of thinking, we are able to bring out the best of each other for a satisfying product.