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).
Screenshots | Explanation | Motivation |
|---|---|---|
| This is the menu bar on top that the user uses to switch between three different modes (browse, request, personal page) of the website. | The motivation for this design was a result of paper prototyping and user testing using this prototype. |
| Hovering over an outfit on the browser shows the outfit in detail on the right side. This detailed view disappears when the user moves the mouse off of the thumbnail. | The motivation for the detail view popping up from a thumbnail was from the user testing with the paper prototype. The detailed view disappearing when the mouse exits the thumbnail was motivated from a heuristic evaluation that pointed out that the right side should be consistent with what is visible on the left browser. |
| This is the browser itself, which shows a list of requests. | This interface was motivated purely by the user testing on the paper prototype. |
| This is the request page, which the user may use to request advice for an outfit to be designed. | The fields of the request page were motivated by the paper prototype. The positioning and size of the fields were motivated by a heuristic evaluation. |
| This is the outfit creation page. The user can drag and drop items of clothing on this page, as well as add comments. | The drag and drop portion of this page was motivated by the paper prototype (which was also very good at simulating the drag and drop). The positioning of the title details and the add comment box were motivated by a heuristic evaluation. |
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.
...
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.
...
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
- 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)
- 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).
- 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:
...
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:
- "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
- "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
- "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?
- 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:
- "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?
- "Requesting Advice" Task:
- Clicked "Request Advice" page
- "Interview Tomorrow" question
- Added a few details; submitted
- "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
- 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:
- "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?
- "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
- "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
- 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:
- More attention should be given to navigating the interface for greater efficiency
- Major Conflict, can be remedied with inclusion of search functionality
- 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
- 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"
- 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
- 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
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.
...