Designing A Charity App
A Product Design Case Study
--
Duration: 3 months (September 8, 2021 to December 17, 2021)
Role: UX & UI Designer (this was my senior project for college!)
Tools: Figma, Adobe Photoshop, Ilustrator
The Problem
The percentage of Americans who donate to charity is at a new time low. According to a 2020 Gallup study, approximately 73% of Americans reported donating money to charity while the prior low was 79% back in 2009. There are countless factors that go into why this may be an issue.
However, looking at this from a UX perspective, the research that goes behind finding trustworthy charities online could be incredibly time consuming. The lack of transparency in charities and the donation process can also cause hesitation amongst potential donors. People especially want to make sure that their money is going to something credible that will also make an impact.
The Proposed Solution
An app that searches and makes in-app donations to credible charities can help minimize the research and time that goes into finding causes and charities to donate to. By providing a simple and user-friendly interface to donate from, the focus can be on supporting causes that people care about without wasting time going on each charity/organization’s respective website/social media platforms. Providing a seamless method can also help users encourage others to donate too.
Design Hypothesis:
“I believe that an app that searches for credible charities and allows for in-app donations will make it easier for prospective donors to donate to charities.”
Metrics/Criteria
My design hypothesis will be tested using quantitative and qualitative usability testing.
Quantitative:
- This hypothesis will be measured by the time taken to search for and make a donation which will test usability and whether it simplifies the donation process (i.e., task-completion times, success rates, # of errors encountered)
- Measuring the value of user engagement in the prototype will also determine whether more users are interested in using this app. (i.e., satisfaction ratings)
Qualitative:
- Conducting usability testing on varying ages and abilities will help determine whether the app is easily usable by all users.
- Observe difficulty with particular UI elements to help determine and troubleshoot potentially problematic design
Goals:
Keeping in mind the initial research I conducted by examining various competing charity and nonprofit websites and apps, here were the main goals for my charity app before starting the needfinding process:
- Minimize the user’s research process outside of the app through a user-friendly, intuitive, and personalized interface that makes donating a simple process.
- Interface promotes transparency and trust through clearly indicating important information(i.e. percentage that goes directly to cause, overhead costs, tax-exempt status, verified charity status, etc.)
- One stop solution: research and discover charities and make in-app payments to verified charities without leaving the app.
Table of Contents:
User Research
- Needfinding Process (user interview)
- Needfinding Results (+ user need statements)
The Design Process
- Product Backlog (user stories)
Design Sprints:
- SPRINT 1:
- Usability Testing + Results
- SPRINT 2:
- Usability Testing + Results
- Design Iteration (Sprint 1 changes)
- SPRINT 3:
- Final Usability Testing + Results
- Final Iteration (Sprints 1–3 changes)
Visual Design Language
- Color palette, font, buttons, iconography, imagery, logo, and splash screen
Conclusion
- Evaluation of the product against design hypothesis
Needfinding Process
The first stage in the design thinking process is to empathize with users to gain a better understanding of the problem I am trying to solve for them.
User Interviews
To better understand the needs of potential users, I contacted a couple of friends and family that donate to charity and conducted interview sessions with them to help identify their current behaviors and frustrations towards the donation process. The user representatives have an age range from 25–74 years old which especially helps allow for insight into diverse perspectives, experiences, and abilities.
Needfinding Results
I organized the user interview answers in this chart:
After the user interviews, I formed several user need statements (aka problem statements) to help me better understand the needs and priorities of potential users. This defining stage is the second important step in the design thinking process. I was able to further define and analyze the issues that users/donors have with their current donation process and how my app can potentially help solve them.
Formulating these user need statements also helped see through the point of view of the user while grasping the everyday lifestyles, environments, and situations that these users experience in correlation to their donating habits.
The Design Process
Design Sprints
The next stage was prototyping my charity app. From needfinding and my own brainstorming, I came up with several features to be designed and prototyped for the app. Through following agile project management in my design process, these features are apart of a “product backlog” (see below) which are basically a list of user stories that represent my entire product but are each given a priority (e.g. low, medium, or high).
I prototyped my features in “design sprints” by first designing the most important features in the first sprint and then focusing on other prioritized features. This approach allows to be able to focus on making sure the most important features in the app are designed and goals are met before moving on. In total, I designed my entire app in 3 sprints with about 2–3 weeks of time between each sprint*. Every sprint represents a testable prototype. After conducting usability testing, I constantly made design changes to features and particular screens from previous sprints along the way by following an iterative design process to improve the usability and functionality of the app.
*Note: since this was for a senior-level college project, the time between each sprint was dedicated to prototyping, testing, and backlog refinement.
Product Backlog:
Sprint 1
I designed 4 high priority features in sprint 1 which include:
- Search for charity or cause
- Filter charities by causes
- View charity information
- Favorited charities page
Sprint 1 screens:
Sprint 1 prototype in action:
My sprint 1 prototype so far had a fully-designed home screen, search + explore screens for both charities and causes, screens displaying charity information, and a favorites page that stores saved charities.
Sprint 1 Usability Testing
For sprint 1, I conducted both in person qualitative testing sessions with 5 family members/friends and remote quantitative testing with 10 participants using Maze which is a rapid and remote testing platform used especially by agile teams.
Qualitative test results:
After observing 5 participants interact with the prototype straight from the Figma app on my iPhone, here are are the key takeaways:
Homepage
- All 5 users liked the basic and clean layout of the homepage. -
- Everyone especially liked how they can see the search bar on top, causes, and charities clearly and straight away.
- A user described this main interface as “intuitive” as they felt in control whether it was sliding through the causes or scrolling down to view the charities.
Charity preview cards
- They like the minimal design of each charity preview. For the short tags on top, they liked how it quickly tells them about the charity without reading a lengthy description.
User feedback:
- One user suggested perhaps adding somewhere on this preview if the charity is tax exempt or not.
- Another user suggested simply having “85% to charity” to omit “goes”.
Search Process:
- The users all had no trouble finding the search bar and navigating through the search process and results.
- The search results page was easily recognizable by all the users
Quantitative test results:
This test consisted of 4 action-based tasks:
- Find the search bar and search for a charity
- Find cause (education category)
- View charity information for the “Save the Children” charity
- Find the “favorites” page
Maze Results:
Key Takeaways:
- Average success rate: 90% of users successfully able to complete the tasks.
- No testers gave up on the tasks or encountered any errors (0% bounce rate)
- It took an average of 2.6 seconds for users to complete each task.
Sprint 1 User Ratings:
Each question was followed by a quick rating of their experience.
80% (8 users) rated their experience with the sprint 1 prototype with the highest rating of a 10 while 2 users gave high ratings of 9 and 8 respectively.
Sprint 2
I designed 2 features in sprint 2 which include:
- Donation process (separate flows for one-time and monthly donations)
- My donations page
Sprint 2 screens:
Sprint 2 prototype in action:
In sprint 2, I mainly focused on designing a simple donation process. The progress bar on top clearly indicates the three steps in the donation process (i.e., 1. select amount, 2. choose donation (i.e. payment) method, and 3. review donation.) and which step the user is currently. It is important for the user to be constantly informed of the system status. In this case, the user knows what exactly what step to expect next when donating. his sense of control in the system helps build trust through clear communication.
The “my donations page” allows users to view and manage one-time and/or monthly donations. The date of one-time donations are clearly indicated on top while the status of monthly donations are labeled as either “active” (with the next donation date listed) or “expired” (with the date of the final donation). My goal was to design simple card previews of donation receipts that provide the user with pertinent information (e.g., date, active or expired status, name of charity, donation amount, and payment method).
The process to cancel a monthly donation is also simple and easily accessible upon clicking on an active charity which then has a clearly labeled call-to-action button to cancel the donation, and finally a confirmation dialog box.
Sprint 2 Usability Testing
Qualitative test results:
After observing 5 users interacting with the prototype, here are the key takeaways:
Donation review page:
- All users particularly appreciated the clear layout of the donation review page
- A user pointed out how they liked the “transparency” in the review screen especially where it is clearly indicated how much percentage and money will go directly to the charity and to overhead costs. This is very important for donors to know and is not indicated always.
- A few users noticed and interacted with the tooltip right next to the overhead costs which helps clarify what they are exactly.
- Users also appreciated the flexible option to easily change the charity they want to donate right on the review page without leaving it (see below).
My donations page:
- The simple layout of this page was praised
- A user pointed out that the success page confirming a monthly donation cancelation timed out rather fast for them and they couldn’t read it all.
Quantitative test results:
I tested my sprint 2 prototype again using Maze with 10 participants
This test consisted of 3 action-based tasks:
- Find the button to donate to this charity
- Complete a monthly donation
- Find the “my donations” page
Maze Results:
Key Takeaways:
- Average success rate: 100% of users were able to complete tasks!
- No testers gave up on the tasks again or encountered any errors (0% bounce rate)
- It took an average of 2.4 seconds for users to complete each task.
Sprint 1 User Ratings:
70% (7 users) rated their experience with the highest rating of rating of 10 while 3 users gave a high rating of 9.
Sprint 1 Design Changes:
In sprint 2, I made a few design changes to the screens originally designed in sprint 1 including:
A redesigned charity information page:
Before & After:
- Changed placement of CTA (call-to-action) donation button from top to the bottom where it is more reachable to users.
- Also added a tax exempt label after receiving user feedback.
- The percentage to charity label is right next to the charity name now identical to its placement on the charity preview cards.
Bottom navigation bar:
Before: The active icon was outlined purple and didn’t stand out as much.
After: The active icon now is filled in purple and is more discernible.
Sprint 3
I designed 3 features (+logo & branding!) in the final sprint which include:
- Login/Sign up flows
- Quick Quiz upon signup to recommend charities
- My Account page
Sprint 3 screens:
Sprint 3 prototype in action:
My goal for the on boarding process was to it be fast, simple, and enjoyable. This was achieved through a fun splash screen animation that is cleverly fast, followed by a direct process to either sign up, log in, or continue as guest.
The idea of incorporating a quick quiz that recommends charities to users came to me after seeing the absence of this in various charity apps and websites I researched. Quizzes of this nature are widely seen in a variety of different apps, but adding this to a charity app can particularly help users find charities faster through personalized recommendations.
From past user interviews, I gathered insight on how users especially would like to be able to keep track of their donations. To support this need, I added as simple 2 column design on top clearly labelling the number of donations and the amount donated.
Sprint 3 Usability Testing
For the final usability testing, I maintained the consistency from the past two sprints of conducting both qualitative and quantitative testing sessions:
Qualitative test results:
After observing 5 users interacting with the prototype, here are the key takeaways:
Signup/login process:
- Every user had no difficulty navigating through both the signup and login screens as the simple layout and clear option to sign in with social accounts was particularly.
- 3 users pointed out how the screen indicating that the signup/login was successful timed out rather fast and they weren’t able to read it in time.
Charity quiz:
- Users found this quiz to be “fun” and “simple” as they pointed out how they found the circle indicators on top to be very helpful in showing which of the three questions they are on along with the ease of the “skip” option.
- No one had any issues with the quiz or understanding any of the questions.
- One user did point out how under question asking to select your favorite causes, perhaps the selected options can have a bolder border around them.
My account:
- All users had no issue with this page as they all complimented to simple labels and how the associated icons helped make it faster to read.
- Every user was able to easily turn on donation reminders from this page.
Quantitative test results:
I tested my sprint 3 prototype lastly again using Maze with 10 participants.
This test consisted of 3 action-based tasks:
- Sign up to the app
- Take a quiz that recommends charities to you
- Set reminders for donations
Maze Results:
Key Takeaways:
- Average success rate: 100% of users were able to complete tasks!
- No testers gave up on the tasks again or encountered any errors (0% bounce rate)
- It took an average of 2.2 seconds for users to complete each task.
- There was a misclick rate of 10% (i.e., the average number of misclicks outside hotspots or clickable areas in a prototype.)
Sprint 3 (Final) User Ratings:
- 100% (10 users) rated their experience with the perfect rating of 10!
Final Design Changes:
In the third and final sprint, I made some design changes to the screens originally designed in sprints 1–3:
Added flow for removing a favorited charity:
Also added an empty state to indicate when the user has no favorites.
Changed color of tax exempt label to purple:
Simply changing the tax exempt button from red to purple helps compliment the color scheme of the app and also allows for higher contrast and visibility.
Removed timed-out success screens
I decided to remove the timed animation for success screens for login/sign up success by replacing it with a button saying “continue to quiz”. This simple fix allows the user to read at their own time and be in control along with being informed on what to expect next.
The success screens indicating a credit card or bank account being confirmed were changed from a timed animation to simply adding an “ok” button when the user is finished reading the message.
Visual Design Language
Color palette:
Font:
I utilized two typefaces: SF Compact Display and SF Pro Rounded which are from the same SF family which is commonly used as a system font in iOS apps
For majority of the app, I utilized SF Pro Rounded in different fonts (e.g., regular, medium, semibold, bold, and heavy). I chose this typeface because I found the rounded and softer appearance of each letter to compliment the warm and welcoming aesthetic I was looking for in my charity app.
Buttons:
Primary buttons mainly followed a consistent purple background with white text. I chose to design a black with white text for the call-to-action “donate now” on the charity’s info screen since it looks more aesthetically pleasing with the darker imagery.
Secondary buttons are light blue with black text with an exception being the black outlined ghost button for the login.
Iconography:
Imagery:
Logo:
Splash screen animation:
Conclusion
Evaluation of the product against design hypothesis:
Both qualitative and quantitative methods of usability testing played a significant role in my iterative design process. Qualitative testing contributed to direct observational findings on how users found certain design features and elements to be easy or difficult. Quantitative testing provided me with numerical data and metrics on success rates, task completion times, number of errors encountered, and satisfaction ratings.
The high success rates, satisfaction ratings, and remarkably low completion times came from quantitative results while qualitative results indicated positive direct feedback regarding the design and functionality of the app. Based on these positive results collectively taken from qualitative and quantitative testing sessions conducted over the three sprints, my design hypothesis has been proven to be successful.
Links to all versions:
Interact with the final prototype below!
This article was written in partial fulfillment of the requirements of the Fall 2021 section of DMD 4475 — Digital Product Design Practicum at the University of Connecticut, Digital Media & Design Department.
