GR2 - Designs

Scenario

Bob is the president of a club at MIT called Save the Whales. This club is currently asking for donations to support a non-profit foundation that conducts research in whale habitat preservation and administering medicine to sick and injured whales. The club’s members’ primary goal is to raise as much money as possible, and their secondary goals include raising awareness for their cause and recruiting more members into their club. Our application can help Bob with his primary goal, to raise as much money as possible for the foundation.

In order to raise money, Bob created a bunch of colorful posters advertising the cause and hung them in bulletin boards all around MIT. He also set up a table near lobby 7 with fliers and jars to collect money. Bob’s friend, Jamie, is a junior at MIT majoring in course 6 and 8. She is taking six classes this semester in order to graduate early, so she does not have time to join any clubs even though she feels really strongly about saving the whales. She sees the posters posted around campus and once ran into Bob in lobby 7 while he was asking for donations.

Because Jamie usually buys her lunch with TechCash, she does not carry very much cash on hand. Thus she wasn’t able to donate to the Save the Whales club that day she met Bob in lobby 7. She is also too busy to go to Save the Whales meetings, so she can’t think of any other way to donate money. She is also very forgetful at times and can’t remember when Bob will be in lobby 7 asking for donations, so it is hard for her to bring cash on her in order to donate.

However, all is not lost. Bob decides to set up an account on Donate2Us about Save the Whales, so he could invite busy people like Jamie who want to donate but don’t have the time. He goes on Donate2Us and creates a page for his cause. He enters in relevant information telling all visitors to the page about how the club wants to donate money to fund research on saving whales and to support other activities for whale preservation. Setting up a page and picking a nice graphic logo for the cause was fast and easy.

Bob then tells Jamie that she can download the application on her iPhone called Donate2Us. There, Jamie can select the cause ‘Save the Whales’ and be able to donate directly via her phone! Despite Jamie’s busy schedule, she does use her phone a lot, so it won’t take very long for her to download the app and quickly select the amount of money she wishes to donate.

This is great for Jamie, because she just spent her last week’s UROP paycheck on food, and she lives the life of a poor, broke college student. She wants to donate, but she doesn’t want to look cheap in front of Bob, and she also wasn’t sure how much she was able to afford just yet. Using the application, she could deliberate on how much she could donate and make a decision without being pressured and without giving over her limit.

Through the application, Bob can select friends to invite to join this application. His invitees will then get a text message with a link to his page’s site on the web application. Thus, he selects Jamie’s name and sends Jamie the link. Jamie has never heard of Donate2Us, so she has to download it first before she can browse the different charities on this application. She downloads the application from the mobile store, creates an account on the application, and visits the page of Save the Whales. She thinks about how much she wants to donate and decides that she can donate $50 this week (if she lives on ramen for three days), and so pledges $50. She enters her credit card information and presses “Donate” and gets a confirmation email a few seconds later telling her that she has, indeed, donated $50.

This made her feel really good actually, since throughout her three years so far at MIT she hasn’t had the time to help out many community service causes. She’s just been too busy. The main reason she decided to be course 6 and 8 was so she could use her programming and physics skills in order to develop ways to provide safe drinking water and nutritious food to malnourished children in third world countries. Thus, she decides that before she could do that directly, she should donate money to these causes near and dear to her as well and help out indirectly. She goes to Donate2Us and searches for a cause: “feed third world children” and finds a list of applicable causes asking for donations. She reads the descriptions of each and finds the one she feels most strongly about and pledges another $50 to that cause (and now must live on ramen for 6 days). However, she is happy that she finally has the chance to help out in her own little way!

Designs

Design 1: Simplicity

The simplicity design focuses on creating a simple interface for managing the causes that one supports. It emphasizes your causes on the home page with icons layout. At any point, one can easily navigate to other causes in their profile by clicking on the Causes home page button.

Storyboard

Learnability

Efficiency

Safety

Pros:

  • Causes a user supports appear explicitly on the home page, with labels and logos of the cause.
  • Tile/icon layouts is familiar with touch-screen phone users.
  • The home page offers a simple look, there is nothing else besides the causes (as opposed to the summary page in the second design)
  • Navigating to starting a cause or profile/account management is traditionally at the top, which is familiar for users.

    Cons:

  • Searching for more causes are not clearly shown. Users have to navigate to another page to do so.
  • For first-time users, their home page would be mainly empty because they haven’t chosen any cause yet. In this case, the users might be confused as to what would go into the first page. Also, the buttons to navigate to other actions would appear abnormally small and off-center, making it harder to find.

Pros:

  • Navigating to a cause is extremely fast, with just one click. Managing all the causes a user supports is also more efficient, since whatever page the user is one, he can go back to all causes with just one click.
  • Causes are displayed by their icons as tiles, which are faster to maneuver for touch phones

    Cons:

  • When the users have too many causes, all can’t be displayed on the screen, users have to scroll down to look for it. If the number of causes are large enough, switching back between one cause to another might be inefficient because the icons are large enough that the distances between the positions of two causes might be big.
  • Causes displayed on the home page are not grouped into categories, so if a user wants to go through all the causes belonging to one specific categories, he has to open one, go back, find another one, which is not very efficient.

Pros:

  • Icons are large enough so that it is hard to click on the wrong cause.
    Even when clicked on the wrong cause, the action is easily reversible by clicking on the “Causes” button to go back to the home page

    Cons:

  • Again, when the users have so many causes on the homepage, trying to use touch to scroll the page down when trying to find a specific cause might cause the user to accidentally click on an icon that he doesn’t want to.

Design 2: Organized

In this design, we emphasize on giving equal attentions to all features of the app, organizing all information that might be important to the user in one summary page. The design features a home page with a list of summary of all of the users’ activities and information, including causes that the users support, causes that he started, etc. The design offers an overview of a user’s activities in an organized list.

Storyboard

Learnability

Efficiency

Safety



Pros:

  • Everything that might be important to a user is displayed in one summary page, so the user can easily find a link to where he wants to go whether he wants to find his causes or find causes he supports. Thus, he can easily click on what he wants to do without having to navigate too much.
  • Sections stay in the same place at every sign in, so users can just instinctively click on the section they want each time.
    Organization makes it more obvious where each section is located for first time users.
  • Text can be used sparingly in order to direct users to each section.
  • Users can find each section easily without having to browse through the entire app.

    Cons:

  • A user might find this format cluttered if he only wants to look at either causes he supports or causes he has created (if he only focuses on one rather than both).
  • First time users might be confused by the difference between causes and causes created since he would not have anything in either category yet.

Pros:

  • Navigating to either causes or cause created is equally efficient.
  • Everything is organized in a list and so can be alphabetized or sorted easily.
  • Summaries and text can quickly direct the user. No need to rely on graphics or icons that may be confusing to a user.

    Cons:

  • If a user only wants to go to one section, he will have to click an extra link each time he signs on in order to get there.
  • We can’t display every cause on the front page; in fact, we can only display a few since we are displaying many items on the front page. Thus, to see more, users will have to click to get to another section.

Pros:

  • Users can easily click ‘back’ to get to the main page if he clicks on a wrong link.
  • All actions are clearly marked and reversible.

    Cons:

  • Page might be cluttered; users can accidentally click on a link and have to click ‘back,’ therefore wasting time.

Design 3: Categories

The simplicity design focuses on creating a simple interface for managing the causes that one supports. It emphasizes your causes on the home page with icons layout. At any point, one can easily navigate to other causes in their profile by clicking on the Causes home page button.

Storyboard

Learnability

Efficiency

Safety

Pros:

  • More attentions are given to categories of causes clearly labelled, so the users can easily find their cause interest.
  • Topic of interests are displayed with conventional icons that are already familiar with users
  • Tiles display is more intuitive for touch-screen phone users.
  • Account management/profile buttons are traditionally displayed on top, which is consistent with the conventions.

    Cons:

  • If a user is more interested in managing a cause that he created rather than looking at a new cause, it might not be entirely intuitive to navigate to it by clicking on the “Account” button.

Pros:

  • Searching for cause of interest is extremely fast and easy with just one click on the topic icon, no need to click on search and enter categories of interest.
  • The tiles layout is faster than the other displays since we are using a phone with touch screen.

    Cons:

  • Not as fast if users are interested in searching for multiple categories of causes.
  • If users already know the cause he’s interested in, navigating to that cause requires him to click on his account and find the cause he supported every time.
  • Note: Unlike the setback in design 1, there are only many categories existed, so we don’t have to worry about the problem of trying to display and navigate between so many icons on the home page.

Pros:

  • Clicking on the wrong category is hard because the icons are large enough.
  • Mistakes are reversible. If clicking on the wrong category, users can easily go back to the causes home page with just one click
  • No labels

1 Comment

  1. Sacha Zyto

    "Preliminary designs: designs 3 is missing important tasks (share, donate)
    Overall: Good analysis and presentation. Introducing each design with its general theme was very appreciated.
    ""doesn't want to look cheap"": very good point.
    storyboards are a bit short on words
    Sending a message feature: What kind of ""message"" were you thinking of ? The problem is that it ""adds a thinking step"" when you're trying to reduce the # of steps as much as possible (simple suggestion: say ""OPTIONAL: Add a msg"").  Who is the message for ? the cause or person who suggested it ?
    "