Your SlideShare is downloading. ×
0
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
The Casual Giver - iOS Design Specification
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Casual Giver - iOS Design Specification

347

Published on

Published in: Technology, Travel
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
347
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The Casual Giver Design Specifications Indiana University HCI/d Rapid Design for Slow Change for Blackbaud Dennis Ellis, Matt Jennex, Yishi Yang
  • 2. 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
  • 3. 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 Ellis - Jennex- Yang
  • 4. System Overview We envision the entire system of our design having three main components. 4 Ellis - Jennex- Yang 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.
  • 5. System Overview (cont) 5 Ellis - Jennex- Yang 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
  • 6. 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 Ellis - Jennex- Yang
  • 7. Mobile App - Flow 7 Ellis - Jennex- Yang The Mobile App is the main technical component of our design. It has a relatively simple interaction flow illustrated in this diagram. Notifications 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.
  • 8. 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 Ellis - Jennex- Yang
  • 9. Mobile App - Home Screen 9 Ellis - Jennex- Yang 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.
  • 10. Mobile App - Home Screen 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 Ellis - Jennex- Yang 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. Mobile App - Home Screen 11 Ellis - Jennex- Yang 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.
  • 12. Mobile App - Charity Screen 12 Ellis - Jennex- Yang 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.
  • 13. Mobile App - Charity Screen 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 Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient Okay 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 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 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, 13 Ellis - Jennex- Yang 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, 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.
  • 14. Mobile App - Charity 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 Ellis - Jennex- Yang 8 13 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient Feral Cat Friends montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla Bloomington, justo, vel, aliquet nec, vulputate eget, arcu. In enimIndiana rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam Area dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient Make Science Come montes, nascetur ridiculus mus. Donec quam felis, Alive! ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla Mrs. Summerlin’s vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam supplies project, Dr. dictum felis eu pede mollis pretium.Charles CIg Prep Drew Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean Acad, San Francisco, CA vulputate eleifend tellus. Aenean leo ligula, porttitor eu, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnisRed Cross American 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 National assistance vel, aliquet nec, vulputate eget, arcu. In enim justo, United States of America 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, 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, 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, This example shows what this screen might look like if the app were displaying individual donorschoose.org projects.
  • 15. Mobile App - Notifications Carrier 8 12:34 PM Points Available Following 13 Carrier Tap on Notification Points Spent 1 8 15 Ellis - Jennex- Yang 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. 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, 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! 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.
  • 16. 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 Ellis - Jennex- Yang 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
  • 17. 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 Ellis - Jennex- Yang 12:34 PM Points Available Your Giving Report 16 Points Spent Organization Name Like what you see? Click to Rate: Back 5 Points 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- 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.
  • 18. 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 Ellis - Jennex- Yang
  • 19. 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 Ellis - Jennex- Yang
  • 20. 20 Ellis - Jennex- Yang Thank you for reading! And special thanks to: Blackbaud, Nick Quagliara, and Marty Siegel.

×