Design

Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).

Implementation

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 opted to not implement updating or deletion of content from most elements of our site. Submitted requests at present cannot be updated, closed, or deleted; uploaded outfits cannot be moved to new clothing categories, and they cannot be removed from the user's wardrobe. These limitations are certainly worth addressing, as they dramatically limit the user's freedom to manage the content of the site. At the same time, these limitations do not restrict the kind of content that our users can produce - every outfit combination and request can still be created.These features were thus deemed to be optional elements, and were left by the wayside in favor of the more critical elements of our design.

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.

We had the users perform tasks similar to those we posed in the paper prototype, with variances depending on design decisions made since that implementation.

Briefing

Have you ever had the problem where you look at your closet of clothes but feel like you have nothing to wear?  outfit.me is an online tool that connects people struggling to put together an outfit with those who can help. 

There are two main user groups. 

1) Those who need outfit advice.  These users upload photos of their clothes to our site, populating their personal wardrobe.  They use the site to ask for advice on how to wear the clothes in their closet, be it what to match with a certain article of clothing or more broadly how to put together an outfit for a certain occasion. 

2) Those who want to offer advice.  These users use the site to help friends or anonymous users figure out what to wear.  When suggesting outfits, they use our dynamic drag-and-drop outfit design interface.  This interface allows users to combine clothing choices with comments. 

Scenario Tasks

1. You have just heard about the site and want to start using it yourself!  Register an account and upload an item of your wardrobe to the website. We have provided a folder of some clothes from your hypothetical wardrobe in a folder on the computer's desktop. (note: in the paper prototype we had users utilize the mobile app for this task.  We made the final design decision not to make such an app, and thus all this functionality is on the website itself) 
2. You have a job interview tomorrow but don't know what to wear!  Request advice for an outfit. (note: in the paper prototype we had users up/down vote their favorite outfits.  We removed this feature in our final design).
3. Your friend Knave has his first day of work tomorrow, and doesn't know what to wear!  Luckily he's a registered user on outfit.me.  Go onto the site, find his question, and suggest an outfit for him. Feel free to browse other users' suggestions for inspiration.

Users

To find users for testing, we contacted those contacts we knew were interested in fashion, and would have a use for our product. Despite the business of the end of the semester, we were able to run three user tests with MIT students as our testers:

User 1 - 23-year-old female, MIT Graduate Student
User 2 - 19-year-old male, MIT Undergraduate.Student
User 3 - 20-year-old female, MIT Undergraduate Student

As all of these individuals will be attending formal events, interviews, and other occasions for impressive outfits, we knew they would be representative of true users of our site. They are all individuals who often solicit advice on outfits for events, making the collaborative nature of the site more applicable to their style of problem-solving.

Testing Observations

User 1:

1. "Add to Wardrobe" Task:
   • clicked on "register"
   • Filled & submitted form
   • Opened E-mail, verified account
     • Some excess quotes in place on text displayed?
   • Logged in successfully
   • Navigated to wardrobe, clicked on "add clothing"
   • Selected hat from computer, selected hat category, and submitted
   • Returned to wardrobe; sorting of clothing by category worked as expected
   • Elected to add more clothing
   • Selected dress from computer, selected dress category, and submitted
   • Notes:
     • Fields don't center as expected - text at top is centered on each half of screen, but wardrobe doesn't center with it
2. "Requesting Advice" Task:
   • Clicked on "Request Advice" page
   • "Job Interview" as title.
   • Added details about the type of job interview (software development company)
   • Submitted, saw feedback on personal wardrobe page
   • Notes:
     • Not clear what kind of details will be useful to add to requests, and can't edit later
     • "Is X appropriate for this event?" style of question not supported
3. "Designing Outfit" Task:
   • Looked for search/filter option; no luck
   • Found Knave's request, Clicked on "Knave," and saw his other requests
   • On Canvas page:
     • Drag & Drop grasped immediately
     • "Lab coat, shoes, and hat" added
     • Added comment; submitted
   • Notes:
     • Feedback on submission not as optimal - returning to that user's set of requests - now with your new suggestion - might be more applicable?
     • Search by name - Knave might not have been easy to find
     • Use answers to similar questions to answer your own?
4. Overall Impressions:
   • Pro: Existing functionality is very intuitive and easy-to-navigate
   • Pro: Tasks were easy to accomplish, and the immediate feedback was encouraging and rewarding
   • Con: More attention should be given to navigating the interface for greater efficiency (Major Conflict, can be remedied with inclusion of search functionality)
   • Con: Some more time spent verifying the consistency of display for various window sizes (Cosmetic Conflict; can be remedied with more time spent on visualization on different screen sizes)

User 2:

1. "Add to Wardrobe" Task:
   • Went to "register" link
   • Wasn't sure about going to E-mail
   • Navigated to E-mail; wasn't sure which link to click for verification
     • Is there more than one option presented on the E-mail?
   • Logged in successfully
   • clicked on "my wardrobe"; "add clothing"
   • Selected a suit from the wardrobe; wasn't sure how to classify a suit
   • Placed suit in the "other" category
   • Notes:
     • No ability to update or delete outfit components? if mislabeled a shirt as pants, how does one solve the problem?
2. "Requesting Advice" Task:
   • Clicked "Request Advice" page
   • "Interview Tomorrow" question
   • Added a few details; submitted
3. "Designing Outfit" Task:
   • Unsure of which link to click to see requests; used process of elimination ("I've already clicked on these, so...")
   • Scrolled through requests to Knave's request; looked at other suggestions
     • Move the "Answer" button to more visible location
   • On Canvas page:
     • Drag & drop to move clothes over
     • "pants, shirt, shoes, hat" added
     • Added a comment, submitted
   • Notes:
     • "how do I go back?" asked - not sure where to go after submission
4. Overall Impressions:
   • Pro: Simple interface, can be navigated quickly through process-of-elimination if nothing else
   • Pro: Quick to use - no unnecessary roadblocks to produce content for self or others
   • Con: Might want to change color scheme/layout to be more inspired by fashion - looked a little simple as is (Cosmetic Conflict; can be improved with consultation with more users)
   • Con: Some pages in interface are confusing - guidance about where to click after completing tasks could be improved (Minor Conflict; can be improved with either more redirects, or perhaps with included links of the form "Click -here- to proceed to the results page")

User 3:

1. "Add to Wardrobe" Task:
   • Clicked on "register"
   • Filled out form; clicked submit
   • Checked E-mail on phone; verified link via phone
   • Attempted to log in - failed
   • Verified link via computer
   • Successfully logged in
   • Clicked through "My Wardrobe"; "add clothes"
   • Selected pants from computer, selected pants category, submitted
   • Clicked "Return to Wardrobe"; pants successfully placed in pants category
   • Notes:
     • What's the story behind the phone verification failing?
2. "Requesting Advice" Task:
   • Clicked on "request advice"
   • Asked question: "Interview Tomorrow"
   • Added minimal details
   • Submitted; saw resulting request posted successfully
   • Notes:
     • Again, might want to provide more guidance on how to give helpful details
3. "Designing Outfit" Task:
   • Clicked on "outfit.me"
   • Found Knave's request, clicked on "suggest an outfit"
   • On Canvas page:
     • Drag and drop again very intuitive
     • "Pants, shirt, hat, and shoes" added
     • Acknowledged comment box, but declined to add a comment; submitted
   • Notes:
     • No built-in search function, but opted to use built-in browser search to find certain other users
4. Overall Impressions:
   • Pro: Very intuitive and easy to understand the interface
   • Pro: Very quick to get material up on the site, either to ask for help or give help
   • Con: More search support options would be nice, especially when seeking to help out a friend on the site (Major Conflict; discussed with User 1)
   • Con: Grasping full functionality of the site (i.e., what details to add, viewing other users' requests after on the canvas page) isn't as clearly illustrated - could improve visibility of this functionality. (Minor Conflict; could be remedied with more clear visualization of available tools, or left as-is to let users discover the various elements of the interface over time.)

Collection of issues found through User Testing:

1. More attention should be given to navigating the interface for greater efficiency
   1. Major Conflict, can be remedied with inclusion of search functionality
2. Grasping full functionality of the site (i.e., what details to add, viewing other users' requests after on the canvas page) isn't as clearly illustrated - could improve visibility of this functionality.
   1. Minor Conflict; could be remedied with more clear visualization of available tools, or left as-is to let users discover the various elements of the interface over time
3. Some pages in interface are confusing - guidance about where to click after completing tasks could be improved
   1. Minor Conflict; can be improved with either more redirects, or perhaps with included links of the form "Click -here- to proceed to the results page"
4. Some more time spent verifying the consistency of display for various window sizes 
   1. Cosmetic Conflict; can be remedied with more time spent on visualization on different screen sizes
5. Might want to change color scheme/layout to be more inspired by fashion - looked a little simple as is
   1. Cosmetic Conflict; can be improved with consultation with more users

Reflection

Discuss what you learned over the course of the iterative design process. If you did it again, what would you do differently? Focus in this part not on the specific design decisions of your project (which you already discussed in the Design section), but instead on the meta-level decisions about your design process: your risk assessments, your decisions about what features to prototype and which prototype techniques to use, and how you evaluated the results of your observations.

Working through the iterative design process this semester, we have come to a number of realizations, The importance of early testing is immense, given the relative strength of modifications early in the process compared to late in the process. The duration of this project exposed tasks and decisions we had not previously encountered, giving us new insight into project design, rather than just implementation. With the lessons we gleaned, we of course have several elements of our approach that we would amend should we tackle the project a second time.

The strength of early testing cannot be overstated. With this second round of user testing, even with repeated requests for advice and constructive criticism, the users were reluctant to make any complaints. Compared to the overwhelming willingness of our users in the first set of trials (using paper prototypes), the value of feedback is like night-and-day. The information we gained from our paper prototyping was invaluable in making many elements of our design more approachable for our users. The information we gained from this second round of testing was negligible at best - every criticism we heard was something we had already recognized as a problem ourselves. This realization harkens back to the lecture on prototyping: one advantage of low-fidelity prototypes is they let users feel more comfortable making criticisms; high-fidelity prototypes look like they have taken much work to complete, and so users are less likely to criticize the work. The reality of this discrepancy between low-fidelity and high-fidelity products was plainly illustrated through our own experiences.

With this semester-long project, we encountered many tasks and design decisions we had not encountered before. By virtue of the project being scheduled over the whole term, rather than simply in the last few weeks of the term, we were called upon to handle design, testing, and implementation of the project, rather than the more typical just-implementation structure of other classes. As a consequence, we had the opportunity to interview many individuals working in the fashion industry, as well as run user tests with enormous sheets of paper and some pens. This new set of tasks forced us to work outside of our comfort zones, and we consequently gained a whole lot of project-building experience. Additionally, by having all the elements of this project be tied to a single project, rather than executed as separate, isolated exercises, we formed a particular bond to the product we were producing. This imposed continuity led to a much stronger final product, as we were truly invested in our product after putting in so many hours over the course of the semester.

If we were to start the project over from the beginning, the biggest element we would like to change is increasing our focus on the early steps of the project. In particular, discovering a worthy problem and designing a proper solution to that problem - with real user input - took us far longer than we anticipated. With more time focused on this task early, the subsequent elements of the project likely would have felt more natural; illustrating a clear problem and way to solve it are critical to a project's success. Likewise, as mentioned earlier, the low-fidelity prototyping yielded the best feedback from our users. If we took a second pass at this assignment, focusing even more on getting the most out of those low-fidelity prototypes would invariably benefit the final product we produced. Nevertheless, the final tasks of actual implementation and verification tests (QA testing, as it were) are still very valuable; even the best design is useless without an implementation.

In all, we believe that we gave a fair allotment of time to each task. Convincing ourselves to spend more time on the early tasks of the project would have been valuable, to be certain. However, our consistent commitment throughout the semester has yielded a product that we feel sufficiently meets the criteria of the class and of our users.