Computer Prototyping

For this assignment, we have developed a computer prototype of our final project for expert users to test. We have developed a prototype that is high fidelity in its look and feel, but still low fidelity in its breadth and depth (for instance, Our image handling is still relying on some canned photos of clothing), The objective of this prototype is to investigate our intended design, and confirm if this is the format we wish to use for our final project.

Accessing the Prototype

Our computer prototype can be accessed at the following website:

PK3k's outfit.me

From this page, you should be able to create an account, log in, and then perform all of the major tasks outlined below. Experiment with the website and attempt to take advantage of all functionality it offers. The tasks below are the ones we have focused on including in the breadth, but this is still a prototype - additional functionality, where needed, is still an option. 

We have included a section on the high-level background and task analysis of our project here for our testers. Feel free to use this as a guideline if you are unsure of what tasks the website can perform. We have included some notes about limited functionality, when applicable, under the appropriate task; if something doesn't function as you would expect, you can check here first to see if the behavior was intentional or not.

Background and Task Information

Background

PK3k has endeavored to design a product for users who are fashion-conscious (that is, those who want to look a certain way for a certain event), but are unsure of how to build outfits. Anyone who has looked in their closet, wondering "what should I wear?" will find an accessible community in PK3k's outfit.me. Our website connects those people who don't know how to build outfits from their wardrobe with like-minded, fashion-conscious people who can offer suggestions on how to build an appropriate outfit for any event.

Uploading the Wardrobe

Uploading your clothes to your account's personal wardrobe is presently handled solely on the website. We intend to extend this element of our application to also interface with mobile devices, but as this is a peripheral concept rather than a core concept, it was omitted from this prototyping stage.

Requesting Advice

The requesting interface presently is a one-step process, asking for both a question (i.e., title), and details about the question (specifics about location, season, expectations, and so forth). Additional potential functionality here is the inclusion of tags, and suggested clothing items that the user would like to build around (i.e., "I have this great gray sweater, but I don't know what to put with it...)

Browsing Requests

Requests are presently browsed from a single list of requests, each of which includes the question & details, the user requesting advice, and already-provided suggestions if there are any. We would like to extend the ability to filter this list, so you can look at only those requests pertaining to formal events, for instance.

Additionally, clicking on the name of a user from this page will bring you to that user's personal page, listing only those requests that user has posted; the user's wardrobe will also be displayed for reference.

Creating an Outfit

Outfit creation is implemented with a drag-and-drop interface and an additional comment window. Sorting the wardrobe here works the same as when articles are being added to the wardrobe. You can also re-read the user's question by hovering over the prompt at the top-left, which displays an overlay with the question and details.

Browsing Responses to the Original Request

Responses are presently displayed in-line with the requests on the main page. This is a design decision we are investigating - do the responses need their own page, or can they be handled in-line on the same page? The current interface feels lighter in weight, which is nice for quick response. It does make evaluating the relative worth of responses somewhat more difficult, however; giving each request an individual page generated a much heavier, deeper call-and-response structure on feedback to outfit creators.

Additional Information

For more information on the vision and objective of our project, you can read our updated User and Task Analysis page. For some examples on expected interactions with our website, you can read the Scenario on our Scenario and Designs page.

Heuristic Evaluations

Please insert your heuristic evaluations below (in PDF format):

  • No labels

3 Comments

  1. Here's my evaluation of outfit.me. Looks great overall, and I can't wait to see the end result!

  2. Nice work! Comments:

    "Wiki presentation
    : Very easy to use; clear instructions
    Usability: Several pages are all whitespace with center-aligned elements -- left align is easier to read & give them a container. The separation between the two vertical columns in the editing page isn't clear. Selection on main ""blog"" area follows the arrow but only when mouse-over occurs on a small icon -- this causes weird inconsistencies between what is seen (potentially) on the blog/list view at left and preview at right. The manner of adding comments & viewing the detail view while editing an outfit is surprising: it occludes the view and there is no indication to the user that mousover will cause it to grow and cover the editing pane.
    "