The Casual Giver - iOS Design Specification

Design Specifications

The Casual Giver

Indiana University HCI/dRapid Design for Slow Change

for Blackbaud

Dennis Ellis, Matt Jennex, Yishi Yang

Ellis - Jennex- Yang2Table of contents

Executive SummarySystem OverviewMobile App Flow Pages Overview Home Screen Charity Screen Notifications Monthly Report MiscellaneousStrategy for Future Work

3477891215161819

Ellis - Jennex- Yang3Executive Summary

The Problem: Only 35 percent of charity donors do research prior to making a donation, how can we encourage donors to make informed decisions?

Our Inspiration: Giving via microtransction is a strategy adopted by sites such as Give-as-you-live and Raiser’s Edge. It encourages a casual style of giving that takes place over time instead of all at once.

Our Goal: We want to create a style of allocating donations that has the same casualness and over-time aspects as microtransaction giving, and uses feedback from this casual giving to create well-informed donors.

Our Solution: We are creating a mobile app that presents donation opportunities in a casual way and encourages users to donate small amounts with little upfront research. Our system will then provide feedback on the effectiveness of these donations that over time will educate donors into making increasingly more informed choices.

Focus and Constraints: Our design is principally about allocation and feedback of donations, and less about actually giving donations. In this document we will present a microtransaction giving system based on giving a set amount whenever a user’s bank card is swiped. Our design for allocation and feedback is meant to work with any method of micro giving, the one we present is merely a placeholder of a relatively simple example of such a system.

Ellis - Jennex- Yang4System Overview

Giving Allocation Feedback

We envision the entire system of our design having three main components.

This section deals with how the user gives money for donations.

This section deals with how the user allocates money to charities or nonprofits.

This sections deals with how users receive feedback on their allocation decisions.

Giving creates a pool of money, abstracted as points, that can be allocated to various charities or nonprofits.

Allocating to charities generates feedback from those charities in the form of notifications and reports that detail how donations are being used.

Feedback from previous allocations helps users guide future allocations.

Ellis - Jennex- Yang5

Points

MobileApp

User’sBank

GivingReports

Notifications

Nonprofits

Bank cardtransactions

Generates

Alloc

ated u

sing

Allocates points to

Allocating pointscause money

transfer

Repres

ent m

oney

in

Generate results as

Are delivered to the user by

System Overview (cont)This is a more detailed view of the entire system

FacebookProvides friend information

Ellis - Jennex- Yang6System Overview (cont)

Why points and not dollars?As previously noted, in our system the user gives “points” that are an abstraction of actual money. This is done for several reasons:

• We reason that collecting and assigning points encourages more casual usage. However, through wordage in the mobile app users are never meant to “forget” that points represent real money

• A point can stand for different amounts of money, and this value associated with a point can be set by a user when the sign up for the service. In this way, points serve as an equalizer. Allowing people of different giving ability to use the app in the same way.

• From a purely technical perspective, using points allows us to get around the Apple App Store constraint that does not allow apps to directly give money to third parties.

Ellis - Jennex- Yang7Mobile App - Flow

Home Screen

Charity Screen Options Reports

Notifications

The Mobile App is the main technical component of our design. It has a relatively simple interaction flow illustrated in this diagram.

Squares in this chart represent pages; circles represent popups or overlays. The red outline shows where we expect ninety percent of interaction to take place.

Ellis - Jennex- Yang8Mobile App - Pages Overview

Home Screen: This is the screen that will display when the user opens the application for the first time. It will display graphic representations with labels for non-profits and charities available for donation. The page will show no more than four organizations on the screen at a given time, but will be scrollable in two dimensions for exploring more (vertically for more categories, horizontally for more options in a category). This screen will also display how many points the user has, and how many they have spent.

Charity Screen: This screen will be displayed when the user taps on a charity or nonprofit displayed on the home screen. This page will show a brief overview of the charity including its name, area of operation, user rating, system rating, and a small blurb written about the organization. This is also the page where the button to give will be.

NotificationPopup:These are brief messages sent out by organizations and received by the app if the user has previously donated to the organization. They are populated by tweets from the organization, and thus constrained in size as tweets.

Settings Popup: This is meant to be quickly reachable from the main screen, and in addition to any standard settings, contains a way to turn on and off the accumulation of points from card swipes.

Report: A report is like a special kind of notification sent by the system rather than by an individual organization. Reports come once a month and contain a summary of every organization the user has given to, including details on what each organization has done that month. When presented with this feedback this page is where the user has the option to leave a rating for the organization.


Carrier 12:34 PM

PointsAvailable8 Points

Spent13

Label One Label One Label One

Following

Most Popular

SeasonalLabel One Label One

Label One Label One

Mobile App - Home Screen

Available Points: Shows the number of points currently available to donate.

Spent Points: This keeps track of the total points the user has spent. This is here to address the issue of a user accidentally over spending beyond their ability to pay. This number resets once a month on the same cycle that reports come out.

Charity Categories: Charities are arranged into categories. For details on category types see page 11.

Photos: The main representation on this screen of an organization is a picture. In the ideal case, these pictures are provided by the organizations, if no picture is provided a simple one can be generated. We reason that because vibrant, eye-catching, and communicative pictures will attract the most attention and therefore donations, that organizations can be convinced to provide pictures.

Ellis - Jennex- Yang10Mobile App - Home Screen

Carrier12:34 PMPointsAvailable

8PointsSpent

13

Label One

Label One

Label One

Following

Most Popular

Seasonal

Label One

Label One

Label One

Label One

The home screen’s design is meant to only show a few organizations at once in order to not overwhelm the user. It purposefully cuts off pictures at the sides and bottom to create the affordance of scrolling. The user browses more categories by scrolling up and down, and may scroll side to side any category individually.

The panel showing points is stationary as the screen scrolls

Ellis - Jennex- Yang11Mobile App - Home Screen

Carrier 12:34 PM


Spent13


Following

Most Popular


Label One Label One

CategoriesOrganizations are arranged into categories slightly different from the standard categories.Following: Shows organizations the user has already donated to at least once. If the user has never made a donation before, this category is absent.Most Popular: Populated by weighting organizations receiving the most donations at a given time against their user rating (more on user rating on page 17)Seasonal: Shows charities with a particular need due to current events. In the event of a recent disaster it would be populated with relevant donations. It can also display organizations like homeless shelters when cold weather begins.Local: Shows organizations operating locally to the user based on GPS data.Friends: Shows organizations that Facebook friends have donated to. If the user hasn’t linked their Facebook account, this category does not appear.(Other): After the initial “special” categories the user may continue to scroll down through a more standard list of categories describing kinds of organizations. Examples are Animals, Politics, Disaster Relief, etc.

Ellis - Jennex- Yang12Mobile App - Charity Screen

Carrier 12:34 PM


Spent13

Label One Label One

Organization Name

Area of Operation

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu,

Give! Back

This panel stays in place when the screen changes as a constent reminder of the app’s primary use.

This is the same picture as used on the main screen

Ratings are left by users, they are displayed on this screen but are left on the monthly report screen (see page 17)

The writing here is supplied by the organization, this block of text scrolls up and down to accommodate longer blurbs, and scrolls independent of other UI elements.

These buttons are shaped to give visual priority to Give over Back. The Back button returns to the home screen, the next page details the function of the give button.


Carrier 12:34 PM


Spent13

Label One Label One

Organization Name

Area of Operation


Give! Back

Carrier 12:34 PM


Spent16

Label One Label One

Organization Name

Area of Operation


Thank You!

After giving, the button text changes and expands as the Back button disappears. A second tap of the button, now labeled Thank You, returns the user to the Main Screen.

The point values on the top header change immediately to reflect the transaction, scrolling to the next number with animation.

Carrier 12:34 PM


Spent13

Label One Label One

Organization Name

Area of Operation


Give! Back

1

How Many Points?

Okay

1 83

Tapping here returns the user to the app home screen.

The user scrolls this slide to choose how many points to spend on the organization.

Tapping the Give button brings up slider popup

Tapping okay returns to a slightly changed Charity Screen


Some examples of what real data would look like on the Charity Screen:8 13

IndianapolisPhilharmonic Orchestra

Indianapolis, IndianaArea


8 13Feral Cat Friends

Bloomington, IndianaArea


8 13American Red Cross

National assistanceUnited States of America


8 13Doctors WithoutBorders

Worldwide


8 13Make Science ComeAlive!

Mrs. Summerlin’ssupplies project, Dr.Drew Charles CIg PrepAcad, San Francisco, CA


This example shows what this screen might look like if the app were displaying individual donorschoose.org projects.

Ellis - Jennex- Yang15Mobile App - Notifications

Carrier 12:34 PM


Spent13

Label One Label One

Organization Name

Area of Operation


Give! Back

1

Back See on Twitter

Suspendisse dapibus sapien ac eros varius egestas. Cras luctus gravida condi-mentum. Integer vel fermentum risus. Integer eget enim volutpat.

Carrier 12:34 PM


Spent13

Label One Label One

Organization Name

Area of Operation


Give! Back

1

Carrier 12:34 PM


Spent13


Following

Most Popular


Label One Label One

2 1

Notifications are a vector for organizations to update their donors on what they are up to. They are populated by linking to the organizer’s Twitter account (if available). A user only sees notifications from organizations they have given to in the last month.

Tap on NotificationTap on Notification

Dismisses popup Prompts for application switch to Safari and opens Organization’s Twitter page.

Ellis - Jennex- Yang16Mobile App - Monthly Report

The monthly report serves as a cap on a month’s worth of experience with the app. Even though the giving is done casually, the report shows how those small gifts have been adding up by displaying information about things the organizations has done that month.

Carrier 12:34 PM


Spent13


Following

Most Popular


Label One Label One

New Monthly Report Available!See what the organizations you helepd

have been up to.

View Now View LaterLeads directly to the report (see next page)

If the user dismisses the report when it pops up, they may always view past reports through the settings screen.

Ellis - Jennex- Yang17Mobile App - Monthly Report

Carrier 12:34 PM


Spent16

Label One

Label One Label One

Organization Name

Read More

5 Points

Your Giving Report

Organization Name

Read More

4 Points

Organization Name

Read More

1 Point

Organization Name

Read More

1 Point

Carrier 12:34 PM


Spent16

Label One

Label One Label One

Organization NameYour Giving Report

Read More

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabi-

Back 5 Points

Like what you see?Click to Rate:

The same picture from the other screens serves as a reminder of the organization.

Organizations are arranged by most given to least given

This screen, when the user can see what the organzation has been doing with their money, is where they are able to leave a rating. This is meant to encourage frank and relevant ratings.

In this example, the body is represented as text, but the organization may supply graphs or other graphics in their report.

Ellis - Jennex- Yang18Mobile App - Miscellaneous

Points Reminder:If the user has points to give, and goes 5 days without spending them. The app will remind them with a buzz and a notification.

Points Display:The notification function of the app’s iPhone home screen icon will be used to display the current number of available points. (See example to the right)

8

Ellis - Jennex- Yang19Future Strategies

Social Aspect: A more robust social experience including, following friends, recommendations, friending, and promoting to your friends list.

Nonprofitsasusers: Increase the participation of nonprofits by allowing them to quickly and easily push new content to users through our app. Nonprofits can have more connection with their donation base as well as keep content up-to-date without the need to modify a website.


Thank you for reading!

And special thanks to:Blackbaud,Nick Quagliara,andMarty Siegel.

The Casual Giver - iOS Design Specification

Technology