...

Describe the internals of your implementation, but keep the discussion on a high level. Discuss important design decisions you made in the implementation. Also discuss how implementation problems may have affected the usability of your interface.

Overview

We built our website using the Django web framework for Python, combined with CSS and Javascript/Jquery interlocks. The overall structure of the website was thus maintained with a handful of distinct files, representing the different layers within the structure: one file for front-end handling of requests, one of a few files for handling the interactions generated in response, and a handful of files for handling interaction with the database. The structure was simple to create, fairly easy to extend to capture the functionality we desired, and robust enough to handle the complexity of the tasks designed.

Design Decisions

We made a few design decisions of particular import to the usability of the site.

First, we implemented many of our pages with a dual-canvas layout: one canvas on either side of a dividing line. Each canvas then displayed a unique portion of content, Allowing our users to view both an outfit-in-progress as well as the wardrobe of the user whom the outfit is for at the same time. This structure had some unexpected repercussions, however. The sizing of these canvases, in particular, did not respond well to viewing the interface on different screen sizes. When using a screen too large, the canvases wouldn't stretch their contents to take full advantage of the space; when the window is condensed down, exceeding the minimum width of the canvases leads to clipping of the content. Note that this issue only occurs for those canvases built with images (i.e., the wardrobe display page, and the outfit creation page). More options of image sizing would allow for more graceful handling of the allowances of different canvas sizes.

Second, we included both drag-and-drop behavior and resizing of images on our outfit creation page, These operations largely behaved as we expected, though we did encounter some instances of the drag-and-drop behavior not working as intended in certain browsers. Moreover, the limitation in functionality here doesn't capture everything we were initially hoping for - we went with this simple set of interactions to guarantee reliable behavior of the system. With more testing and time, this interface could also support image rotation, cropping, and re-layering to create more optimal outfit displays.

Third, we implemented user accounts. We used these accounts to store user-specific wardrobes, requests, and responses in our database. Our project hinged heavily on each user being able to create their own personal wardrobe for others to work with; the need for user-specific accounts was clear from the start. We built our interface around this design, in part, and it was largely unobtrusive. It does require additional steps from our users, but the start-up time for completing this process was not a burden (as our user testing below discovered). As a consequence of the user testing, however, we did discover a conflict in trying to verify accounts on our site when using a mobile device.

Fourth, and finally, we

Evaluation

Describe how you conducted your user test. Describe how you found your users and how representative they are of your target user population (but don't identify your users by name). Describe how the users were briefed and what tasks they performed; if you did a demo for them as part of your briefing, justify that decision. List the usability problems you found, and discuss how you might solve them.

...