CHARITABLE HUMANS
Overview
The Product
Charitable Humans is a nonprofit that provides people the opportunity to donate to various charities on one website. All of the charities are given a page for details about their cause, programs, and contact information, etc.
Project Duration
December 2021 - January 2022
The Problem
Charity websites can be heavy on text and outdated. Charitable Humans wanted to refresh their website after hearing complaints from donors that the donation process was frustrating. Donors want to be able to make their donations quickly and without feeling like they’re wasting their time.
The Goal
To provide a website refresh that improves the user experience for donors and gives a much needed update to the look and feel of the website.
My Role
UX/UI designer for the Charitable Humans responsive website from project conception to delivery. I carried out user research, created paper and digital low and high-fidelity wireframes, conducted usability studies, then iterated on designs based on feedback.
Tools Used
Adobe XD
User Research
Summary
Due to time restraints with my own schedule, I conducted online surveys for participants to fill out to learn about their experiences when donating to a charity.
Participants shared that they had both donated in-person and online before, however some preferred the online option more. I learned that about half of participants didn’t have an issue with having their names included with donations, meanwhile the other half would rather donate anonymously.
While most people surveyed chose a donation amount that was already provided by a charity, they also wanted an option to enter in a custom amount that worked with their budgets.
Pain Points
Donation Amounts
Choosing from only the default amounts listed on a charity website doesn’t provide enough flexibility for users.
Navigation
No one wants to feel like they’re hunting through a website just to be able to find the information they need.
Text heavy content
Information needs to be presented in a way so that users don’t feel bored or like they’re reading a novel.
User Persona
Based on my research, I created one user persona. Shai is a busy small business owner who needs intuitive navigation and an improved donation form because she wants to donate quickly to charities in need.
I also completed a user journey map, which showed that a few tweaks were necessary in order to provide a good user experience. The main changes were to add noticeable CTAs for donating, provide custom donation amounts, and mark a donation as anonymous.
Starting the Design
Sitemap
This sitemap was created at the beginning of the project, however I ended up revising it later on in the process. As per the course, this sitemap was created in Adobe XD.
Paper Wireframes
This paper wireframe was the first draft of the responsive website’s home page. The page starts out with an intro statement, followed by a search function, newly funded campaigns, top campaigns, and then closes with a footer.
To be honest, this draft wouldn’t have been the best idea to continue with, so I was glad that I ended up going back to the drawing board later on.
This page shows both the desktop and mobile versions of the confirmation page a user sees after completing the donation flow. I reserved the part above the fold for confirmation details, leaving suggestions for other charities to donate to below the fold.
Digital Wireframes
These digital wireframes do look a bit different from the final product you see in later on in the case study, but my main goal was to strike a good balance of text, icons, and images on the page to create a website that people would want to use.
The first section above the folds details the name of the charity and its background, as well as contact information. The option to enter a custom amount along with default amounts lets users make a donation they’re comfortable with, and they can learn more about any programs or services the charity provides.
Below the fold, there’s a section to showcase how donations help the charity. I included this section to give users an idea as to where exactly their donations would be going. Icons would be featured along mini blurbs about number of people helped, etc.
The first version of the low-fidelity prototype was the one included with the usability test and I ended up iterating on it to create this second version that I used as the basis for the designs you see later on.
Usability Study Findings
I conducted one usability study, where I invited five participants to test out the desktop version of the low-fidelity prototype. (Funny enough, only three of the participants completed the study in the time frame I had set.) Despite that, I managed to gather the following insights and iterate based on the feedback I received.
All of the participants were able to complete the donation flow for the website, however the some of the adjustments listed below were things on the list to revise in the first place.
My findings for Round 1:
Text and placeholder images needed to be sized down
Some of the screens didn’t share the same viewport size. (My mistake!) This was changed in the second low-fidelity prototype I spoke about in the previous section.
A summary of the amount donated as well as the charity donated to needed to be included on the confirmation page.
Refining the Design
Mockups - Search
Before the usability study
There was a lot going on with the Search page, but let’s narrow it down to the fact that elements didn’t have enough breathing room on the screen.
After the usability study
The search screen now features the search bar with categories underneath, as well as sections for top funded and recently funded charities below the fold.
Mockups - Charity Details
Before the usability study
The layout for the programs and services section had images placed on the left with a block of text on the right. I originally envisioned some sort of a slideshow/carousel feature, but rushed through the sketches to create the option that I used.
After the usability study
While I had decided to include an image carousel in the updated wireframes, I though that having a few images as sort as a header above the charity’s information would be an interesting way to add in visuals. I changed the placement and size of the donation box and opted to create a separate section to show the charity’s programs and services on cards.
Additional Mockups
Payment and Confirmation screens
Mobile Website Mockups
The desktop high-fidelity prototype can be viewed at the link included.
Accessibility Considerations and Next Steps
I found the Stark plugin for Adobe XD after searching for available accessibility plugins to use with this project. Stark’s Vision Simulator allowed me to view how my screens looked with various simulations, which was such a helpful tool. I used their Rapid Contrast Checker along the way as well.
At the time I was doing this project, I thought the labeling I provided in the form fields on the payment was a good idea accessibility wise. I realize now while putting together this case study, that the labels should be either above or to the left of the form fields.
As for next steps, I’d like to:
Change some of the visuals to suit the mockups better, particularly the hero image for the homepage and the header.
Revise the payment page to provide better labeling for accessibility purposes.
Takeaways
I had to remind myself of how important it is to start over and pivot when something is clearly not working, despite the amount of time you have already put into it.
This project was my first time designing a desktop website and a corresponding mobile website, and I will admit that I struggled with it. I feel that I will be able to improve my responsive website designs with more practice and a few other courses.