The Casual Giver - iOS Design Specification

The Casual Giver
Design Specifications

Indiana University HCI/d
Rapid Design for Slow Change
for Blackbaud
Dennis Ellis, Matt Jennex, Yishi Yang

Table of contents

2

Ellis - Jennex- Yang

Executive Summary

3

Mobile App

7

System Overview
Flow

Pages Overview

Charity Screen

Home Screen
Notifications

Monthly Report

Miscellaneous

Strategy for Future Work

4
7
8
9

12
15
16
18
19

Executive 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.

3


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

4


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

Giving

Allocation

Feedback

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.

Feedback from previous allocations
helps users guide future allocations.

System Overview (cont)

5


This is a more detailed view of the entire system

Bank card
transactions

de

live

red

to

lo
Al

s
in
y
on
e
pr
es
en
tm

ne

e
rat

Re

Ge

Allocating points
cause money
transfer

Nonprofits

s
ult

res

information

the

Allocates points to

te

ca

ra

te

ne

d

Ge

Points

User’s
Bank

Are

us

in

g

Mobile
App

iend
Provides fr

as

us

er

by

Facebook

Giving
Reports

Notifications

System 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.

6


Mobile App - Flow

7


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

Notiﬁcations

Charity Screen

Home Screen

Options

Reports

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.

Mobile 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.
Notification Popup: 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.
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.
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.

8


Mobile App - Home Screen

9


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

8

12:34 PM

Points
Available

Following

Label One

13

Points
Spent

Label One

Most Popular

Label One

Label One

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

Label One

Seasonal

Label One

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.

Label One

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.

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.

10


The panel
showing points
is stationary
as the screen
scrolls
Carr

8

ier

12:3

Poin
Ava ts
ilab
le
Foll
owin
g

Labe

Mos

4 PM

13

Poin
Spe ts
nt

l On

t Po

e

pula

Labe

r

l On

e
Labe

l On

Labe

Sea

l On

son

Labe

al

e
Labe

l On

l On

e
Labe

l On

e

e

e


11


Categories
Carrier

8

Organizations are arranged into categories slightly
different from the standard categories.

12:34 PM

Points
Available

Following

13

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.

Points
Spent

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)
Label One

Label One

Most Popular

Label One

Label One

Seasonal

Label One

Label One

Label One

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.

Mobile App - Charity Screen

12


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

8

12:34 PM

Points
Available

13

Points
Spent

Organization Name

This is the same picture as used on the main screen

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!
Label One

Back

Label One

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

8

12:34 PM

Points
Available

13

Carrier

Points
Spent

1

Organization Name

8

Carrier

12:34 PM

13

Points
Available

Area of Operation

How Many Points?

Give!
Label One

Back

Label One

Tapping here returns the
user to the app home
screen.

3
1 dolor sit amet, consectetuer adipiscing elit.
8
Lorem ipsum

Tapping the
Give button
brings up
slider popup

5

Points
Spent

12:34 PM

Points
Available

Okay

Give!
Label One

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

Tapping
okay returns
to a slightly
changed
Charity Screen

Back

Label One

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

16

Points
Spent

Organization Name

Organization Name

Area of Operation


13


Area of Operation


Thank You!
Label One

Label One

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.

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

8

13

Indianapolis
Philharmonic Orchestra

8

13

8

13

13

Doctors Without
Borders
Worldwide

Indianapolis, Indiana
Area

8

14


8

13

Feral Cat Friends
Bloomington, justo,
vel, aliquet nec, vulputate eget, arcu. In enimIndiana
Area

Make Science Come
Alive!
Mrs. Summerlin’s
supplies project, Dr.
dictum felis eu pede mollis pretium.Charles CIg Prep
Drew Integer tincidunt.
Acad, San Francisco, CA

Cum sociis natoque penatibus et magnisRed Cross
American dis parturient
National assistance
United States of America



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

Mobile App - Notifications
Carrier

8

12:34 PM

Points
Available

Following

13

Carrier

Tap on Notification

Points
Spent

1

8

15


12:34 PM

Points
Available

13

Carrier

Points
Spent

Organization Name

Tap on Notification

2

Label One

Most Popular

Label One

Label One

Seasonal

Label One

1

Label One

Label One

Label One

Organization Name

Give!

Back

Label One

Label One

Dismisses popup

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.

Points
Spent

Back
See on adipiscing
Lorem ipsum dolor sit amet, consectetuerTwitter elit.


Give!

13

Suspendisse dapibus sapien ac eros
Area of Operation
varius egestas. Cras luctus gravida condimentum. Integer vel fermentum risus.
Integer eget enim volutpat.

Area of Operation

Label One

1

8

12:34 PM

Points
Available

Back

Label One

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

Mobile 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.

16


Carrier

8

12:34 PM

Points
Available

Following

13

Points
Spent

New Monthly Report Available!

See what the organizations you helepd
have been up to.

Leads 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.

Label One

View Now
Most Popular

Label One

Label One

View Later

Label One

Seasonal

Label One

Label One

Label One

Mobile App - Monthly Report

Carrier

5

12:34 PM

Points
Available

Your Giving Report

16

Points
Spent

Organization Name
5 Points

Read More
Organization Name
4 Points

Read More
Organization Name
1 Point

Read More
Organization Name
1 Point
Label One

Read More
Label One

The same picture
from the other
screens serves as
a reminder of the
organization.
Organizations are
arranged by most
Label One
given to least given

Carrier

5

17


12:34 PM

Points
Available

Your Giving Report

16

Points
Spent

Organization Name

Like what you see?
Click to Rate:

Back

5 Points

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-

Label One

Read More
Label One

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
Label One
and relevant
ratings.

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

Mobile 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

18


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

Nonprofits as users: 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.

19


20


Thank you for reading!
And special thanks to:
Blackbaud,
Nick Quagliara,
and
Marty Siegel.

The Casual Giver - iOS Design Specification

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (13)

Similar to The Casual Giver - iOS Design Specification

Similar to The Casual Giver - iOS Design Specification (20)

Recently uploaded

Recently uploaded (20)

The Casual Giver - iOS Design Specification