GR2 - User Testing

1. Design

At the start of choosing an interface for our application, we explored many different designs and eventually narrowed them down to three important ones after paper prototype stage: Organization, Simplicity, and Category. After testing users on paper prototype, we decided to choose the Simplicity design and slightly modify it, incorporating users’ opinions. As an application intended to offer users the convenience and efficiency of donating, we agreed on keeping the design simple, efficient, and easy to navigate, which are the main concepts of this design. As a high level overview, the design focuses on allowing users to easily manage their causes and navigate to them easily to donate. As soon as the user logs in, he is directed to a homepage that displays all the causes he added as informative thumbnails. On any page of the application, there is a navigation button that takes the user back to this page, so only one click is required to find the causes that the user think are important. Below are the screenshots of the application to illustrate:

Figure 1. Login Page. This is the first page user can access when they open the application.

The links to creating an account and recovering the password are clearly presented in order to guide the user to the respective tasks immediately and to make the interface learnable.

Figure 2. Create Account Page. This is the page presented to user creating a new account. It is similar to usual account creation page, so it is familiar and learnable.

Should the user want to go back to the homepage, there is a back button on the top, consistent with the typical iPhone interface.

Figure 3. Homepage. For users new to the application, this is the starting page. Users are then told to either start of join a cause by searching for a specific cause.

On the top of the page, the user can go to do three things: start a cause, check his or her profile, and update his or her account information.

Figure 4. Creating a Cause Page. This is the interface presented to the user when he or she is creating a cause. This is consistent to many usual interfaces where users are presented a form to complete something.

Should the user need to go back to the causes page, he or she can do so by using the back button on top which is consistent to the usual iPhone interface.

Figure 5. Search Result Page. When the user searches for a cause, he or she is presented with a list of relevant results. The interface allows users to browse the list of results more easily by looking at the names of the causes.

Should the user need to check more information about a specific cause, he or she can simply click on the cause and look at its description.

Figure 6. Cause Information Page. This page presents the user information about a specific cause. From this page, the user can go an either share or donate to this specific cause.

Figure 7. Share a Cause Page. When the user wants to share a cause, he or she can either share information of the cause via email or Facebook.

Figure 8. Donation Page. This page is presented to the user when the user wished to donate and clicks on the donate button. If the user has not saved billing information, he or she will be asked during checkout.

2. Implementation

For implementing the phone app Donate2Us, we take advantage of the built library jQuery Mobile, which makes the process much more convenient and natural. However, due to a glitch with our use of jQuery Mobile, some pages of the application need to be refreshed before all the features function fully, which might cause inconsistency for the users. On the front end, each page of the app is represented by one HTML file, and only one CSS file is used to control the layout of all the pages. On the backend, one javaScript file manages the behavior of the application in response to the users. We decided to use jStorage instead of mySQL to store the information regarding account information, causes database, etc., as the full implementation of mySQL in the backend is beyond the scope of this class. Due to that decision, the app is currently limited to storing data on only one device and can’t connect across all devices yet. Billing transactions and integration with Facebook are also introduced features but not fully implemented for the same reason.

3. Evaluation

For our users tests, we have 2 representative users of our system: an MIT student looking for ways to donate to specific causes, an MIT student who wishes to spread information of his own cause and fundraising. These users were mainly found through our contacts and network. We chose this diverse group of user in order for us to look at the usage of the application from different perspectives. We have decided not to demo our app as we think that by doing it we would learn as much about the learnability of the application.

3.1. Briefing

Donate2Us is a mobile application that allows fundraisers or student groups to create and spread the word about their causes. Users can create, join a cause, share, and donate to causes. This application is similar to Causes on Facebook but geared towards mobile platforms. With this in mind, we will give you some tasks, try to accomplish them, giving us as much feedback as possible in the process.

3.2. Tasks

User Group 1: MIT student looking for ways to donate to specific causes

1. Create a Donate2Us account and login to your account.
2. You are looking for a cause that is affiliated with MIT student groups.
3. Once you pick a cause, share it with your friends on Facebook.
4. After sharing the cause, you are looking to donate $10 to that cause.
5. Include a message to the organizer of the cause.

User Group 2: MIT student who wishes to spread information about his own cause

1. Create a Donate2Us account and login to your account.
2. You wanted to create a cause for your service project this summer.
3. After creating your cause, you wanted to share it to your friends via email and on Facebook.
4. Update your account information and profile.
5. Search for a cause related to your project.

3.3 Usability problems and possible solutions

First user:

1. Our user didn’t have problems creating an account. He said that the login page is pretty learnable and that he was able to walk through the steps of creating his account and logging in without any trouble. He appreciated the simplicity of the homepage. He was, however, concerned that too much simplicity might discourage users from taking the application seriously especially for an application that deals with finances and credit card transactions.
2. After logging in, he had some initial trouble looking for the search bar as it was hidden at the bottom of the page. He suggested to put the search bar on top instead so that users who have causes in mind won’t have to go through the trouble of browsing to the end of the page to search for a cause.
3. He liked the layout of each causes. However, he suggested that people might want more information about each cause instead of just small snippets about their projects. He also added that he wanted to know where his donation goes, so allowing fundraisers to input more details about the proceeds would help.
4. Overall, he liked the simplicity of the design but suggested that layout could have been more professional.

Second user:

1. Similar to our first user, our second user did not have much trouble creating an account and logging in. He suggested, however, that users should be logged in after creating an account instead of simply redirecting them to the login page.
2. After logging in, our user created a cause. While creating a cause, the user suggested that users should be allowed to enter specific categories instead of picking from a pre-determined list.
3. After the cause has been created, the user went on and shared the cause to his friends. He wasn’t initially sure if sharing is similar to invitation. He suggested that users should able to invite friends with personal message each instead of a bulk email.
4. One comment our user raised is that profile and account should be merged into one page as it can be confusing to the user how profile is different from an account page. In addition, the search bar wasn’t obvious for the user when he was trying to search for similar causes. He suggested that search bar should be put on top so that users can immediately do searching.

Third user:

1. First, I told her to create an account and sign in, which she did easily. She remarked that she liked the simple design and the color scheme.
2. Second, I told her to join a cause. She stated that the dimensions of the box fit her screen well, but the search bar was hidden at the bottom and she did not know to scroll at first. Later, she searched for something and received a list of causes. She also stated that the (dummy) causes all looked very interesting. She picked a random one (Save The Whales). Then, she remarked that the placement scheme of all the images and buttons were slightly weird. The buttons did not align very well and looked messy. She also had to scroll through the long description, which was annoying and took a long time. She also did not know how to join or donate until she scrolled to the very bottom. She almost gave up half way. She then clicked on "Add to My Causes" which didn't do anything. It didn't give her a notification that it was added to her causes because the JQuery doesn't work.
3. The next task I asked her to do was to donate some imaginary money. She clicked on donate and filled in the amount and messages. She then saved her credit card info and clicked donate. She later clicked on save, too, to save her information. However, it appeared that her information was not actually saved when she clicked "back" and clicked "donate" again.
4. Now I asked her to start a cause. She clicked "Back to Search Results" which took her back to the main page (a bug, perhaps). It took her a while to find the button to start a cause because she thought it was at the bottom of the page and tried to find it by clicking on Search again. She later backtracked and then clicked on Start a Cause. She filled in her information (Cause Name: Scholarship Fund for Deaf MIT Students, Category: Education) and clicked create. This took her back to the home page but did not actually place anything there because we don't have a backend and so we cannot actually create causes.
5. Finally, I asked her to edit Profile and Account information. She knew where those buttons are now because she had seen them when clicking on Start a Cause. She clicked on each and filled in information, then saved it.

Usability issues:

1. Search bar hidden, no directions to find it (major).
2. Placement of buttons in information page (minor).
3. Save doesn't save information on billing info page (major).
4. Buttons redirect to th wrong page (major).
5. Buttons hard to find/small/hard to read sometimes (major).