Donate2Us - User Testing

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 3 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, and a student who has not used online donations before and is not a regular donor but would be interested in having a portable way of being reminded about new causes and ways to donate to specific causes. 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.

User Group 3: MIT student who wants to donate to a good cause and to publicize her cause

1. Create a Donate2Us account and login to your account.
2. You want to search for a cause dear to you
3. You want to add this cause to your home page
4. You want to donate to this cause
5. You want to create a cause
6. Update your account information and profile.

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. (major)
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. (minor)
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. (minor)
4. Overall, he liked the simplicity of the design but suggested that layout could have been more professional. (major)

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. (minor)
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. (minor)
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. (minor)
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. (minor)

Third user:

1. Our user stated that the search bar was hidden, and there were no directions to find it. We could fix this by putting the search bar up at the top of the screen. (minor)
2. 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. We could fix this by fixing the templating of the page and creating a "click to see more" link to expand the long description. (major)
3. The user observed that the save doesn't save information on billing info page. We could fix the javascript of this or create a database to store this information to it could actually be saved. (major)
4. Buttons redirect to the wrong page on some occasions. We should fix this by just doing more debugging and making sure we redirect to the right page. (major)
5. Buttons hard to find/small/hard to read sometimes. We could make this clearer by just renaming them or making their text or image bigger. (major)

3. Reflection

The design and creation process of Donate2Us was at times long and tedious, but also a lot of fun and educational. At first, we decided to create this application because it was applicable to club we are jointly involved in at MIT. We thought the idea was simple and the execution should be easy, but we later learned that there will always be more usability issues to address and idiosyncrasies to account for! Our prototype was too complicated at the initial stage because we were overly confident in our ability to churn out javascript despite never having used it before. We had to scrap many of our original ideas for GR5, but these ideas are still valid for further development if we decide to continue to work on Donate2Us. For example, we wanted our users to be able to save their own profiles, view other users' profiles, and search by types of causes. These were design ideas that were later taken out due to time constraints. We decided to take out these parts because, even though they are nice additions to our end goal, they do not directly impact the main intention of Donate2Us: help connect donors with causes and help facilitate donations to great charities that need them.

We did not originally decide to make a mobile application. This could be due in part to the fact that none of us have mobile application development experience. However, taking on a challenge is exactly how we learn, so we decided to go with the mobile application idea. That and the fact that we believe we will actually create something more unique when we create a mobile application to collect donations to charities (sites where you could safely donate already exist). In addition, we know that the busy life of the MIT student revolves around constant technology, and many of us spend more time on our mobile phones than anything! Having a mobile application would be much more useful since you can view the cause and donate on the spot (or whenever you like). To compromise, we decided to make a web application.

There are many new skills we had to learn to build our site. For example, we explored web application programming through the user of JQuery Mobile and JQuery Storage. These are skills we can take if we ever decide to build another web application or improve on Donate2Us. In the end, creating Donate2Us was a great experience because not only did we learn the intricacies of user interface design on the first level, but we also actually got to interview many people with great causes and gain insight on their experiences and needs. This insight really helped us not only to create a great application for donating and publicizing, but also to improve upon our own fundraising abilities for our own causes!