Paper Prototype Overview:

Our mobile app prototype walks users through the tasks of 1)learning about effective charities and 2)giving effectively without sacrificing too much convenience, which were previously illustrated more specifically in our storyboards.

Overview of paper prototype

Task 1: Learning about effective charities

Homepage
The user opens the app and the homepage/dashboard is displayed with topics of interests such as top charities, the causes the user cares about, and her donations. She wants to find out more about a specific charity, Red Cross, that sparked her interest.

Search first page
The home page is scrollable. The user goes to the top of the page where the search bar is to get more information.

Search second page
The user types in the charity name, “Red Cross” into the search bar and taps on the magnifiying glass icon to see the results.

Red cross page
A page with the charity profile for Red Cross is displayed.

Red cross scrolling page
The charity profile page gives a general overview of Red Cross, including a summary of the charity, its past achievements and milestones, its current goals and objectives, its performance and metrics (as released by organizations that typically assess the effectiveness of charities such as CharityWatch and GiveWell), and resources for the user to learn more such as a link to the charity’s website and social media platforms. If the user clicks on the Effective Giving logo at the top, she will be brought back to the home screen.

Task 2: Giving effectively without sacrificing too much convenience:

Habitat for Humanity Screen
The user has done her research on charities and wants to donate to a specific charity that she cares about, Habitat for Humanity. She views Habitat for Humanity’s charity profile on the app (can be accessed by performing Task 1 detailed above).

Donation screen 1
The user scrolls to the bottom of the charity profile page to the donate button.

Donation screen 2
The user clicks on the donate button to proceed with her donation.

Payment info first page
The user is then directed to a page where she can input her payment information in order to make her donation, which consists of basic credit card information such as the user’s billing address, the cardholder name, the number, CVV, and expiry date of the card. Each of these text fields contain “placeholder” or greyed-out labels that inform the user what information to enter. The labels within the text field disappear when the user clicks on it to type. The user then specifies how much money she wants to donate by entering a numerical value in the text field labeled “Donation Amount”. There is also an option below where she can choose to make the donation a monthly recurring payment, so her credit card would then be processed for the donation amount that she specifies on a monthly basis. If the user does not check this box, the donation will be a one-time payment of the amount specified.

Payment info second page
The user types in her payment details and enters “10” as the amount she wants to donate.

Payment info third page
The user taps on the box to make the donation a monthly recurring payment.

Payment info fourth page
The user then clicks on the “Continue” button at the bottom of the payment information page to proceed with her donation. If she clicks on the “Cancel” button instead, she will be brought back to the previous screen she was on, which was the charity profile for Habitat for Humanity.

Payment Confirmation Page
If the user’s credit card information is processed successfullly, she will be brought to a payment confirmation page. The user can then click on the Effective Giving logo to return to the home screen/dashboard. If the payment information was not processed successfully, a popup message stating this error will appear and the user will remain on the payment information screen.

Notification
Every month, if the user’s credit card is processed successfully for the donation amount specified to a certain charity, she will receive a notification on her phone from the app stating this.

Donation details page

If the user clicks on the notification, she is taken to a screen that shows all details regarding her donation as well as an option to manage any configuration settings. For example, the user can opt to no longer have the donation be monthly-recurring.