Habitat For Humanity NYC
A responsive redesign that encourages trustworthy engagement and streamlines contributions.
Client
Habitat NYC
Team
Miykaelah Sinclair,
Fransisco Paulino
Role
UX Researcher, UX Designer,
UI Designer
Results
Designed in 10 days. Overall improvement in usability among users who were tested.
Methods
User interviews, Affinity Mapping, Persona Development, Journey Mapping, Usability testing, Design Studio, Wireframes, Rapid Prototyping, Iterative testing.
Business Challenge
Habitat NYC is a nonprofit organization that represents New York’s local community. They focus on providing opportunities, housing or home improvements for those who are financially disabled and for families who are being pushed out of their neighborhoods due to gentrification.
Nonprofits like Habitat rely on donations for funding, therefore the process should be easy, intuitive and trustworthy.
Currently Habitat’s website does not offer an easy or informative donation process and users are being discouraged from contributing.
Designing a Solution
Redesign Habitat NYC’s responsive website. Our goal was to create an experience that will encourage people to want to donate by providing a fast and easy process that will inform them about the impact their contribution will have.
Applying User Research
After screening for our target audience, we interviewed various people to understand their motivations and set backs when making online donations.
The target users of Habitat NYC are local professionals who are active members of their community and make frequent online donations. They primarily use their phones for most online activities. When making purchases they expect a fast, easy and secure checkout process.
Key Findings
Users like to support their community and frequently make donations to causes that they are personally affiliated with as well as nonprofits they have heard of through social media and trusted sources.
Users are compelled to donate when they have a full understanding of what the nonprofit does and how they are helping real people.
Interactions happen more commonly on their mobile devices.
They want to be sure that their donations are going to the right place and not being pocketed by the organization.
They don’t want to be flooded with spam that can be overwhelming and make them feel guilty.
Identifying the User
Mapping the User Journey and Discovering Opportunities
Problem Statement
Jesse donates to multiple nonprofits and is willing to contribute to more, but is discouraged when the process isn’t relatable, too cumbersome, or when the payment method doesn’t appear to be secure. How might we improve Habitat NYC’s donation process to align with Jesse’s expectations?
Wireframes (Low to High Fidelity)
Creating a New Look with a More Informed Donation Process
Homepage
Information is laid out in a more organized and legible format.
Users can now easily see the what, why and how (what Habitat does, why the nonprofit is important, and how they can help).
Hero image is now responsive and users can scroll to see more images relating to Habitat NYC.
Important CTA’s are in clear sight and easily accessible at the top and bottom of the homepage.
Colors have been softened and are used more consistently to create a balanced design.
Donation Process
The long and cluttered form has been replace with a simple three step process.
Users can now select what type of donation they want to make: one time, monthly or corporate.
CTA’s with recommended donation amounts.
Users trust and expect to see secure payment methods, so we proposed adding Apple Pay and PayPal as well as the option to pay with credit or debit.
A thank you page that shows users how their contribution will make a difference.
Results
Our design created significantly more interest in Habitat NYC among users.
A faster, more informed donation process.
All users completed the donation process and found it easy and enjoyable.
Next Steps
Conduct further research to discover what order of information is the most successful.
Consider applying the video detailing a story of a family helped by Habitat NYC to the homepage.
Explore more options for the donation pages and how to best represent the CTA buttons.
View Full Case Study on Medium