...
The toy donation page uses a simple form submissions interface. Users fill out a duplicated form for each toy they want to submit. The different toys being submitted at the same time are managed by using a Bootstrap "Tabbed-pane" to persist information filled in while tabs are cycled through and hidden. A photo linking system is used to let users upload a photo to submit along with their toy. When the submit button is pressed without all of the information for a toy filled in, Bootstrap error notifications are shown to notify users what went wrong with their submission process. On pressing submit after properly filling out the form, the user is taken back to the Home page, signifying that they are "done" submitting a toy. One tradeoff this forces is that upon first use of the website when a user, who doesn't read the form, presses submit when he/she meant to add another toy, he/she must redirect back to the Give page to continue the toy process. On form submission the data is pushed to a SQL server.
Finding a Toy
The "Find" page uses a layout that emulates external shopping websites with the notion of filtering by categories, ages, and searching. Each of the categories have checkbox click handlers that register the categories still selected. There are also age and search filters that on selection or submission update the results showed. Every time one of the filtering options change, a compound SQL statement is issued by an AJAX POST call to the SQL server, which returns a serialized list of the matched toys in the system.
Once a user presses a toy for more details, a hidden modal pops up with the details of the toy filled in. On pressing escape or clicking out of the modal, the modal disappears and the user can go back to browsing. In the modal view, the user can press the "Message Owner" and is then directed to the messages page. Alternately the user can press "Add to Cart". After pressing this button, an alert pops up notifying the user that he either has too many toys in his cart or that it was successfully added.
Checkout System
The checkout system happens through a series of modals. On pressing view cart, a modal pops up with the entire cart contents with the option of removing them by a simple click of the X near the toy name. On pressing checkout another modal pops up with a Bootstrap tabbed-pane. There is a tab and textarea for each of the toys being requested with the tabs populated by the toy name. When the user presses "Send Message" the message is sent to the SQL server with feedback given to the user.
Messaging
Messaging works in a simple manner as well. The database is polled by the user's username and the usernames of those he most recently communicated with. The results are then pushed to the page in a well where the user can type replies and have his view updated by simple jQuery and updated in the database by AJAX calls.
Tradeoffs
The choice of using SQL Scripts as our server host lead to a couple unexpected consequences. Even on a small toy listing, running a query to the server and fetching the results takes a lot more time than expected. This is a result specific to SQL Scripts, and unfortunately this meant that users are left waiting for their messages and toys to load. To deal with this problem a loading animation could have been added but this complication was not forseen. Other implementation choices like using PHP over RoR meant that a lot of messy hacks had to be done to get desired results. Alternately some PHP frameworks could have been used.
...
Evaluation
Our briefing and user tasks required little change from GR3 as our implementation kept close to our original design. They have been rewritten and slightly revised below for reference.
...