Tim Rittenhouse
UX Designer

Home HeadQuarters

Non-Profit Donation Website

Home HeadQuarters

TL;DR

Problem

Home HeadQuarters' website was outdated and not mobile-friendly. Donations were declining as a result.

Solution

I redesigned the donation section of their website with a bolder look and responsive layout to provide a better experience.

Result

The final design is more usable and mobile-friendly. Users found the design much more compelling and 7 of 8 users surveyed said they would consider donating.

My Role

UX Designer

Making the Dream of Homeownership Possible

Backstory

Home HeadQuarters is a community development organization dedicated to creating housing opportunities for individuals and families who may otherwise be shut out from this opportunity. In addition to grants, they rely on online donations to provide financial counseling and home improvement services to the community. Their website had become outdated, however, and donations were declining.

Home HeadQuarters

User Research

Survey

I surveyed users to get their impressions of the current website. Many found it confusing, visually lacking and nearly impossible to use on a mobile device. Of the 8 users surveyed, only 1 said this page would persuade them to make a donation.


Interviews

I also spoke with staff at Home HeadQuarters about donations in general:

  • They prefer recurring, monthly donations

  • Most donations are made by individuals giving less than $100.

  • They are would like to appeal to younger donors

Competitive Analysis

Similar donations pages for other non-profits use a few best practices:

  • High-impact visuals appeal to younger donors

  • They disclose how donations are used

  • A Strong call-to-action

  • “Thank You” page with options to share on social media

  • A mobile-friendly website

Home HeadQuarters

Wireframes

Based on my research, I started sketching out wireframes to address the problems I identified. This included:

  • Full-bleed images for high visual impact

  • Stronger visual indicators for calls-to-action

  • Donation options that explain how donations are used

  • An option to share on social media

  • A responsive layout

Home HeadQuarters

Iteration

From the wireframes, I started assembling components that would suit the needs of the project. I iterated on these components to enhance their usability.

For example, users were confused by the toggles on early versions of my donation form. Selected items blended in with the background. I adjusted the colors and font weights to make it more clear which item is selected.

Other changes included:

  • Smaller default donation amounts, with the option to enter custom amounts

  • Simplified recurring donation selection

  • Color that emphasize call-to-action

Home HeadQuarters

Final Design

The final design features a design that is more usable and mobile-friendly. Users found the design much more compelling and 7 of 8 users surveyed said they would consider donating.