Home HeadQuarters
Non-Profit Donation Website
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
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.
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
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
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
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.