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:
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):
Background
...
Sylvester is a shy 23 year-old college student who has only ever worn free t-shirts and jeans. One day, he meets a really cute girl. In order to impress her, he decides to improve his fashion sense. He runs to the nearest mall and enters a brand-name store, but is too shy to ask the clerk for help. So, he just ends up buying a bunch of spiffy-looking khakis and polos. He gets home and realizes that even with these new items of clothing, he has no idea how to combine them. He calls his old friend, Felicity, for some advice. After fruitlessly trying to describe his clothes with his lack of fashion literacy, Sylvester doesn't know how to help Felicity understand his situation. Felicity guides Sylvester to PK3k.
Uploading the Wardrobe
After creating an account, Sylvester is ready to upload his new clothes into his wardrobe. While this sounds like it may be a daunting task, he simply pulls out his phone and begins snapping pictures of the new items. Using the the upload system in Design 1, he opens the mobile application and registers for a new account. Then, he is immediately taken to a screen that prompts for the type of the article of clothing. After tapping on the image representing the type of the article of clothing, a screen appears that shows what his camera shows, with the typical button for taking pictures showing. He taps the button and the picture is taken. He taps "Yes" in response to the prompt that asks if he wants to upload the picture. From there, he can either choose a new type of article of clothing, or can take another picture of an item that is the same type of article of clothing. After he's done, he can log onto the website on his computer. There, his virtual wardrobe is now populated with the pictures he's taken.
Requesting Advice
With his wardrobe intact, Sylvester looks for a way to get advice. He sees a button near the top of the main page, "Ask for Advice." Following his intuition, he clicks on the link. He is brought to a form page. He fills out the fields, requesting for advice about "What do I wear to impress a girl?" He gives some additional comments on the girl he met, as well as the style he used to wear (free T-shirts and jeans). He doesn't know what base outfit to start with, so he doesn't provide a base outfit suggestion for others to build on. After filling out these fields, Sylvester submits his request to PK3k.
Browsing Requests
Once Sylvester submits his request, he calls Felicity back. They both go to the main page of the website, each logged into their respective accounts. Sure enough, near the top of the page, the rolling list of request now contains Sylvester's request, "What do I wear to impress a girl?" Clicking on the request brings up the full page of Sylvester's request, complete with a button to answer with an outfit. Felicity opts to answer her friend's request, and Sylvester decides to try out the interface as well.
Creating an Outfit
Felicity quickly navigates through the menus of shirts and pants, pulling out a few different sets from each. After matching a couple shirts to pants, she notices that Sylvester didn't upload his shoes. In the comments for her designs, she notes that the gray pants will go best with black shoes, while the khaki pants match better with brown shoes, she submits her advice. Meanwhile, Sylvester explores the interface. By clicking on different icons, he brings up different parts of his wardrobe. Clicking on the images from his wardrobe, he drags the items to the large blank space in the middle of the screen. After dragging and dropping a few more shirts and pants over, Sylvester sees a much better picture of how his clothes match together: He picks his favorite colored polo, chooses the pants he thinks goes best, and successfully submits his answer without a comment - he doesn't need to tell himself what he thinks!
Browsing Responses to the Original Request
After Felicity and Sylvester answer the request themselves, they chat on the phone for a while longer. Fashion isn't the only thing a girl will care about, she reminds him. After getting some other useful advice, Sylvester hangs up and returns to his PK3k account. He sees Felicity's response and upon reloading the page, he finds that two other people have also responded to his request. One user suggested a very similar outfit to the one he selected, with an additional comment that a button-down, full-sleeve sweater would provide some additional weight and style. Another comment agreed with Felicity's suggestions, giving some belt ideas in addition. Sylvester realizes that, next time around, he'll want to take pictures of more things in his wardrobe - just the shirts and pants weren't enough. Nevertheless, he pulls together the advice he's gained and feels far more confident in his decision when he sets out the next day.