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

Alt text: User persona for Shai, a 29 year old small business owner.

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

Alt text: Image shows a flow chart of a sitemap for the home page of a charity donation website. Various headings for pages include Donate, Explore, Fundraise, Account, Cart, About, and Footer.

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

Alt text: Image shows a sketch of the home page for a desktop website for a charity website.

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.

 
Alt text: Image shows sketches for the desktop and mobile versions of the confirmation page on a charity’s website. The desktop wireframe is on the left and the mobile wireframe is on the right.

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.

Alt text: Image shows digital wireframe for the Charity Details page of the website. The name of the charity and their contact info is shown, as well as a box to make a donation.

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.

Alt text: Image shows a minimalist desktop search screen with a frame around it on a light gray background.

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.

Alt text: Image shows everything above the fold in the updated charity details page. It is placed in the middle of the screen, with eight other website screens surrounding it.

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

Alt text: Image shows nine screens showcasing the payment and confirmation pages of the charity website. The payment page includes a donation summary and the option for a user to change the donation amount.
 

Mobile Website Mockups

Alt text: Image shows three iPhone screens on a light gray background. The Charity Details screen in the middle is raised, while the Search screen and the About Us screen are to the left and right of it, respectively.

The desktop high-fidelity prototype can be viewed at the link included.

 

Accessibility Considerations and Next Steps

  1. 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.

  2. 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:

  1. Change some of the visuals to suit the mockups better, particularly the hero image for the homepage and the header. 

  2. 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.