Non-Profit Detail Page Design

This is a non-profit detail page wireframe design using rationale and UX principle.

Chun-Ling Hsu (Vanya), Claremont Graduate University, November 2022

Project Overview

This project tends to wireframing different priority outcomes for non-profit detail page following cognitive and UX principles. Users could view details about local and nationwide non-profit organizations, donate to a cause, and follow the organization to get emails and push notifications about events through the website.

Design

Design two different priority outcomes following UX design principal and cognitive concept. One option prioritize the outcome of "donations" by the user. The other option prioritize the outcome of "follow this non profit" by the user.

The design choices are made to prioritize the outcome (donations or follows) with the assumption, principles, and patterns. Using Figma to create wireframe.

Follow this non-profit version: Prioritize the outcome of "follow this non profit" by the user

• Design Principle

Decreasing the cognitive load by just simply asking to type the email address would lead to successfully sign up the newsletter, decrease the effort of going to another page to type personal information or create an account. Using a green button which is a different color than any other icon or button, could draw attention from the user. Von Restorff Effect makes necessary key actions (sign up) visually distinctive.

Donations version: Prioritize the outcome of "donations" by the user

• Design Principle

	Users tend to choose the middle option if it displays three options. Consider only two options, the user might go with the least amount of dollars. With the third option, the user would tend to choose $100 more. Asymmetric Dominance ("Decoy") Effect
	​Using the "help the earth" call to action could be an external trigger as habit-forming technologies. With a call to action suggested by Hooked. Using the sentence "help the earth" not only link to the non-profit organization's value proposition but also makes the user more likely to donate with a positive impression.
	Just like return policy in e-commerce, baymard recommendations suggest that lacking access to the return policy early on in users' product search would cause a source of anxiety. In non-profit donations, letting users know they could stop their monthly donations quickly could ease their commitment anxiety, and even increase their likelihood of donating.

Conclusion

In this UX design project, I created two versions of wireframes using Figma to illustrate the different ideas of focusing on the non-profit detail page. With a goal-orientated user experience that mastered precision, motivation, and effectiveness to design interfaces.