Donation Fair Logo


Our project was to design a system that would allow users to donate to many of their favorite charities all in one place while earning rewards for their good deed. We call our system Donation Fair. The user will be able to create an account and then search through a library of charities to donate to. Once a user donates a certain amount of money they qualify for rewards. These rewards are donated by users, companies, and charities so they can range from gift cards to vacations. Not only are we targeting individual users, but we are also getting companies to donate. The interface is much in the same between users and companies except companies are ill eligible for rewards. While donation to charities is our main focus we are also promoting a competitive aspect to it by implementing leaderboards. The leaderboards include individual user leaderboard, company leaderboard, and with integration from Facebook and/or Google+ friend leaderboard. All of these leaderboards can be filtered by charities.

The very first week when we formed our team we each came up with an idea for our project and gathered some requirements for each. After presenting all of them we decided that we wanted to take the donation fair as our project and run with it. The next week we made an outline of our project and what was going to be in it as well as task flows and a few scenarios for each type of user. This allowed us to update our user requirements to ones that were more accurate and pick up some spots that we left off. On week three we finalized our task flows to prepare preparing for our interface designs.

On the fourth week we took all that we had worked on before and started designing our first interface with them. Throughout the design process including the fifth week we were updating requirements and task flows as either new problems or ideas occur so it was a constant design update cycle. From here we moved on to card sorting, this involved a physical copy of the card sorting and a digital one for the distance students. The physical copy was made and we had preset categories, with a few blank if the tester wanted to add some, and content cards that the tester would put in which category they felt it suited best. We did the same with the distance students, minus the “add a category” feature because that feature was unavailable, using websort. The results of these were a bit different but we took as much data as we could from them and adjusted our prototype accordingly.

After more wireframe testing we started a few storyboards to help fix any problems we had left, we used a lot of the scenarios that we came up earlier in the semester. Not many changes were made from these creations. From here we went on to the paper prototype. We were working on the digital prototype and printing out the pages for the in class paper prototype testing in the attempt to be more efficient and consistent this testing allowed us to see a lot of things that we didn’t see before.

Each prototyped had its own aspects and mostly looked the same just more in-depth with each prototype we created. Our wireframe of our prototype ended up looking very similar to our digital one just with less detail in the wireframe. The changes were more to locations of buttons and less to the content.

Our final design came out with a very friendly a useable look. With the website, the main page is the first thing that you see when you enter the address.  From this main page you can learn about the website and look at charities as well as register an account or login.  When you log in you can set all your profile information and your payment info that you will use for your donations. After you are logged into the site your personalized page will pop up, this will show any friends you have integrated through Facebook or Google+, personal newsfeed, as well as favorite and recommended charities. The mobile application has the same task flow the layout however is in a more sorted list on the whole screen.

Searching for a charity is very simple all you need to do is type the charity into the search bar and hit enter, if you do not know the name of the charity you can use the charities button on top to browse charities and filter them by top grossing and popularity. Once you find the charity you would like to donate to you simply visit their page and click the donation button, after confirmation you have successfully donated!

Once you have donated you earn points that you can use to redeem for rewards that are donated by companies. To do so you just go to the rewards tab and search that list and click on which one you want. Most of these items will be sent via email or to your place of residence.The next steps we would take to ensure project completion would be another round of testing in person on our digital prototype. After that testing session we would gather all of our data and take another look at the requirements to make sure we have what we needed. We would then test a beta version with a few people with some real charities set up to make sure things are working after that we would have our big releasing and have a full running application.

A big surprise to us when doing the paper prototype testing is that if a label is not written out people have a hard time finding it. For example when we asked our testers to go to the homepage we were expecting them click on the Donation Fair icon but instead they were looking for a button that says home. Our idea changed quite a bit which we were not expecting, however this is a good thing because we have implemented the changes our testers recommended and came out with an overall better product.