pk3k - GR3

Prototype Photos

These photos are taken from our second iteration of our prototype.

Prototype Photos for Mobile Interface (used for uploading wardrobe)

Prototype Photos for Web Interface (used for browsing, requesting advice and creating an outfit)

Briefing

Have you ever had the problem where you look at your closet of clothes but feel like you have nothing to wear?  myClos.et 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 your wardrobe to the website, exclusively using your mobile device. 
2. You have a job interview tomorrow but don't know what to wear!  Request advice for an outfit and after waiting for "20 minutes" review peoples' responses to your question, up/down voting those that you like and don't like.
3. Your friend Felicity has her first day of work tomorrow, and doesn't know what to wear!  Luckily she's a friend of yours on myClos.et.  Go onto the site, find her question, and post an outfit for her to wear

Observations: First Iteration

Client 1:

1. "Add to Wardrobe" Task:
   • Sign-in process straightforward, though no affordances for password security / already-taken usernames, etc.
   • First item: long-sleeved shirt
   • Camera controls used
   • "Add to Wardrobe" button used
   • Selected "shirt" category, with no effect (selected by default)
   • Added "white" and "long-sleeved" tags ; used "search" button to add the tags
   • "Add to Wardrobe" button used (again - use different buttons for the different pages?)
   • Second item: gaudy ring
   • Camera controls used
   • "Add to Wardrobe" button used
   • Pressed "accessory" button - interface changed to show selection
   • Added "dressy", "blue", and "ring" tags in the same way.
   • "Add to Wardrobe" button used
   • Notes:
     • Where to go next?
     • More ways to communicate this? i.e., links to website?
     • Preview of wardrobe on the phone?
     • Language of tags - use "categories" or "descriptive adjectives" or some other word to make it more explicit what the tags are?
2. "Requesting Advice" Task:
   • Don't want closet or wardrobe, eliminated options from top to deduce that "Ask for Advice" section was the objective
   • Needed to think of good, concise phrasing to fit in the text field
   • Asked question "What to wear on a business trip." (as statement, not question)
   • On Asking page:
     • Added task-specific details (what events were planned)
     • Added personal details (Female, time, location)
     • Other actions not clear; had to look to find "Ask" button
     • Ignored tagging and image options
   • On request page:
     • Tried to use up/down vote arrows to scroll
     • Better affordances here, i.e. +/- signs or thumbs up / thumbs down
   • Notes:
     • Why wardrobe & tags region shown?
     • Wardrobe on Question page helped to confirm that it was owned by the user
     • Default question types in drop-down for common events / questions to speed up the Asking process?
3. "Designing Outfit" Task:
   • Browse requests button ignored for now
   • Sorted requests by accessing "Friends" tab
   • Tried to view image thumbnails (no effect - NYI)
   • Wanted an "Answer" button - image itself wasn't indicating clickability
   • On Canvas page:
     • Can't see suggested items anymore
     • Wardrobe unlabeled - not sure whose wardrobe it is at first (Add labels to Wardrobe interface!)
     • User explored wardrobe, looking for matching parts in different regions
     • Sorted with "blue" tag
       • Unable to view more than one category at the moment - change?
       • pre-defined sort tags - based on wardrobe, perhaps?
     • Tried to drag & drop good items to canvas - success
     • Added comment window
     • "Publish" button used
   • Notes:
     • Browse Requests - use defaults, in a way to mirror the defaults of the "Ask for Advice" option
     • Place suggested items by person seeking advice on the canvas of other users' answers

Client 2:

1. "Add to Wardrobe" Task:
   • Tried "Sign-in" first; didn't work (not registered)
   • "Register" used instead
   • Not sure what to do
     • Add dialog for "Register" / new user path on the phone (and omit for experienced users)
   • Take picture, "Add to Wardrobe"
   • Asked "are there enough categories for all my things? is this extensive enough?"
   • Didn't add tags; "Add to Wardrobe"
   • Notes:
     • Bring more functionality to the phone - is more convenient to use
2. "Requesting Advice" Task:
   • Explored interface
   • Clicked on "Me" section of the requests pane; brings up blank slate (user has no request history)
   • Asked question ""What to wear for Graduation?" (user created new question)
     • Writing longer question doesn't fit / feel good
   • On Asking page:
     • Lots of options appear on page
     • Wrote types of clothes desired into text window
     • When considering suggesting items, wanted 2D arrangement option
   • On Request page: same observations as Client 1
   • Notes:
     • Ability to change home page to "my wardrobe" rather than active requests?
     • A new potential user type: rather than the social ask/answer, someone looking to inventory a large wardrobe - a more technical user
3. "Designing Outfit" Task:
   • Scrolled through "Everyone" section, brought up Felicity's question
   • On Question Details page:
     • Move the "Answer" button to more visible location
   • On Canvas page:
     • Multiple ways to answer question:
       • Dress up user directly
       • Indirect, guiding question dialog
     • Curious about privacy tags on wardrobe: "can I mark certain pieces of clothing private?"
     • User not comfortable answering question - not sure where to start
     • Wanted more dialog with requester - more detail to go on
     • Mannequin to place clothes on?
       • How to handle layering?
     • Wanted to see more of wardrobe at a time - resize canvas & wardrobe real estate?
   • Notes:
     • Enable asynchronous dialog with requesters - pseudo text messaging

Client 3:

1. "Add to Wardrobe" Task:
   • "Register" button used
     • Confirm e-mail as well as password?
   • Advanced to camera (echo addition of instructions for new users)
   • First item: Long-sleeved Shirt
   • Took picture, acknowledged "Retake" button, used "Add to Wardrobe" button
   • Added tags "dress shirt", "white", and "cotton"
   • "Add to Wardrobe" button pressed
   • Second item: Glasses
   • Added tag for the brand
   • Notes:
     • Repeated "Add to Wardrobe" button - use "Continue" first, then "Add" on second page?
     • Curious about defaults / auto completes on the tags
     • How to enter tags? Use + symbol or "enter" key on the phone's keypad, instead of "search" icon
2. "Requesting Advice" Task:
   • Existing questions used as examples; ignored answering them while exploring
   • Asked question "What do I take on a business trip?"
   • User wondered who was being asked: "Who am I asking? Everyone? Just my friends?"
   • On Asking page:
     • Wondered what kinds of tags would be good
     • Added description of location, style, and specific events planned
     • Added dates of the trip
     • Where to add a deadline for responses?
   • On Requests page:
     • Fix icons for up/down voting (again)
     • Add highlighting to user's preferred responses to reference when packing
   • Notes:
     • Right-side pane can be used for "My active Requests" instead of hiding them behind other people's requests in left pane
3. "Designing Outfit" Task:
   • Swapped to "Friends" tab
   • Liked clicking on question in general, given that there was some on-hover response
   • On Canvas page:
     • Moved things in and out of canvas
     • Found region easy to navigate
     • Looking for the details from user was not clear
       • Improve drop-down menu visibility
     • When unable to find missing parts, used comments to provide suggestions
     • For friends, also comment in friendly advice ("You should wear your hair like this...")
     • "Publish" button used to complete
   • Notes:
     • How do I know what tags to search by?
     • Can I know what tags that user has in their wardrobe?
     • Selective auto-complete (a la "find") with the tags as the search space?

Observations: Second Iteration

Client 4:

1. "Add to Wardrobe" Task:
   • Steps
     • Hits register button
     • Writes in name (really long name)
     • Writes password and confirmation pass
     • Writes email and hits sign in
     • Reads intro and hits continue
     • Takes a picture
     • Taps the highlighted tag
     • Writes in "Shirt" as a tag
     • Hits add to wardrobe
     • Takes a photo
     • Wants to retake photo
     • Write in "skirt" as a tag
     • Pressed skirt tag after being prompted and saw the tag change
     • hit add to wardrobe
   • Pros
     • The tag made sense after seeing the tag change after selection
   • Cons
     • Looking at the tag list, "what does this do?"
     • Tag images weren't as clear
   • Notes
     • Question: Taking pictures of all the wardrobe items would be time intensive?
2. "Requesting Advice" Task:
   • Steps
     • Writes " OMG what do I wear for a job interview?" in the ask for advice box
     • Hits continue (would usually hit enter key)
     • Writes in "I'm trying to hide my baby bump because I'm worried my interviewer is a sexist pig. What should I wear to an interview?
     • Hits enter
     • Tags: Job interview, pregnant
     • Hits submit
     • Waiting...
     • Hits friends
     • Selects Response 
     • Clicks outside of the window
     • Tried to scroll through response using arrows on the big response page
   • Pros
     •  
   • Cons
     • up/down votes didn't make sense without a number (added number)
     • Scroll in preview window was "used" to scroll through the response, not between them.
   • Notes
     • Would click out of the preview screen
3. "Designing Outfit" Task:
   • Steps
     • Selects "Friends"
     • Taps on question
     • Hits "Answer"
     • Drags shirt onto canvas
     • Taps tag for skirts
     • Drags skirt onto canvas
     • Added ring, glasses, and shoes
     • Hit publish
   • Pros
     • Dragging was intuitive
   • Cons
     • Wanted to comment, couldn't find comment button
   • Notes
     • Placed items into natural ordering (glasses above shirt above skirt, etc)
     • Seemed ambivalent about dragging vs restrictive positioning
4. Overall: "Not sure if I would use this system"

Client 5:

1. "Add to Wardrobe" Task:
   • Steps
     • Taps "Register"
     • Writes in username
     • Writes in password
     • Writes in confirmed password
     • Writes in email address
     • Hits Sign In
     • Reads intro and hits continue
     • Takes photo
     • Tries to zoom in
     • Hits continue
     • Tried dragging tags
     • After explanation of tagging, selected the shirt tag
     • Writes in "My favorite fucking sweater" as a tag
     • Hits "Add to wardrobe"
     • Takes a picture of a shirt
     • Hits continue
     • Asked: "Does this shirt have to be something that I wear to a specific place?"
     • Adds tag: "Will only wear indoors. It's for the gym"
   • Pros
     •  
   • Cons
     • Regarding tags: "What are these?" Tried dragging them
     • Wanted to add requests to go along with upload; confused uploading versus requests
   • Notes
2. "Requesting Advice" Task:
   • Steps
     • Stares at home screen
     • Says "Are you drunk? That person needs better clothing"
     • Writes into the ask for advice box: "Help! Must put together an outfit ASAP. Want business casual appropriate for an interview at a big company"
     • Hits continue
     • Rewrote question as: "Wanting business casual"
     • Wrote original question as the details
     • Hits submit
     • Waits
     • First goes through and scrolls through answers to see photos
     • Picks out three she likes the most (maybe add comparable interface?...)
     • Rank those up
     • Wait one hour and see how other people rank them
   • Pros
     • Got the buttons leading to next and previous answers
   • Cons
     • "It's a very little text box" regarding the ask for advice box
     • Didn't know that details could be added later
   • Notes
     • We should have requests sent to friends!
     • Not interested in direct advice
     • For girls, it's important to be able to specify which part of their bodies they like, attributes, etc
     • Body shape is important
     • Would want to be able to search by both body type and occasion
3. "Designing Outfit" Task:
   • Steps
     • Clicks on "Friends"
     • Taps on the request box
     • Taps on "Answer"
     • Hits "Comment"
     • Asks: "What type of place is she going to?"
     • Hits the question on top
     • Minimizes the question
     • Switches to skirts
     • Switches to jeans
     • Switches to skirts
     • Switches to shoes
     • Drags a pair of shoes to the canvas
     • Writes about shoes in comment
     • Switches to jeans
     • Writes about jeans in comment
     • Places items randomly about the canvas
     • Switches to shirts
     • Writes about shirts in comment
     • Switches to jewelry
     • Doesn't add jewelry
     • Writes about jewelry (NEED BETTER JEWELRY)
     • Hits publish
   • Pros
     • Free form dragging was a plus
     •  
   • Cons
     • "What type of place is she going to?" implies that she didn't know where the question went
     • Can I see all three of them? (Categories) "No" "Awwwwww......"
   • Notes
     • Would like to be able to scroll through items (jeans, shirts, etc)
     • Wants to see more categories rather than more per category
     • Wanted to write one big comment about the entire outfit rather than individual comments
4. Post-testing
   • Might use the website, but definitely not on a daily basis.
   • Would use for big business meetings, or other things that are big events
   • Would be cool if we have a "I have this item, I have this much money, I have this occasion, tell me what to get"
   • Regarding overall creation page: Wants widgets, one for asking advice, seeing their own wardrobe, creating wardrobes, etc
   • Wants a preview of own wardrobe
   • People are skeptical about sharing information about themselves
   • Clothes should definitely not be on people themselves
   • Don't do chat
   • Point system, star users, gamification is a plus
   • "What is this search"
   • Suggested, similar to what you're asking pop up when asking
   • Newsfeed of questions that are popping up
   • "I want all of it in one place"
   • "I want to scroll through newsfeed questions as I browse my requests"
   • "I don't want to see the newsfeed when I'm creating an outfit"
   • Conclusion: Would like widgets when browsing and only outfit creation when creating outfits.

Client 6:

1. "Add to Wardrobe" Task:
   • Steps
     •  *Yawn*
     • Hits register
     • Writes password and confirms
     • Scribbles email address
     • Hits sign in
     • "Sign in...shouldn't it say Create Account or something?"
     • Reads intro
     • Hits continue
     • Holds up phone and takes picture
     • Hits continue
     • "Oh, I like, choose what type it is?"
     • Selects shirt
     • Adds "Collar" as tag
     • Hits add to wardrobe
     • Takes picture
     • Hits retake
     • Takes picture
     • Hits continue
     • Hits "Nightgown" tag
     • Adds "Smiley" as tag
     • "Oh, you can search for tags?
     • "Oh, this doesn't mean search?"
     • "It should be a plus sign"
     • Hits add to wardrobe
   • Pros
     • Category selection seemed to make sense
   • Cons
     • The search button thing didn't make sense, should be plus sign
     • "Why do you need the tags?"
   • Notes
     • We should have a prompt for the categories: "What type of clothing is it?"
     • "People take shitty pictures--can you make it so I can upload a URL?"
2. "Requesting Advice" Task:
   • Steps
     • "Why does everyone have a really fucking weird image"
     • Writes "Job Interview!"
     • Writes "I have a job interview and I need to dress business casual. I have a pencil skirt, but I don't know what blouse to wear with it"
     • "Who's up voting and down voting?"
     • Scrolls through responses
     • Selects a response
   • Pros
   • Cons
     • Does not like single line text field.
     • The title + details portion was confusing
     • Arrows in the preview scroll between responses? Box with two arrows might be better, "next" "previous"
   • Notes
     • Can make it clearer by adding "You can details on the next page"
3. "Designing Outfit" Task:
   • Steps
     • Hit "Friends"
     • Clicks on request (clicking on face should go to profile)
     • Clicks answer
     • Drags shirt and slaps it onto the canvas
     • Replaces shirt with another shirt
     • Switches to pants
     • Switches to dresses "What she only has one? screw her"
     • switches to "dominatrix boots"
     • switches to jewelry
     • Adds ring to canvas
     • adds plus comment
     • "You should totally wear this you'll get hired"
     • Ordered the wardrobe items by placement
   • Pros
     • Oh, so if I want to trash something, I place it here.
   • Cons
     • "I want to be able to edit the post"
   • Notes
     • Don't use a mannequin

Prototype Iteration

Changes between our first and second prototype iterations:

1) Added instructions to our mobile application for first time users.  When a user signs on or registers for an account on the mobile app, the application checks whether the user has an 'empty' closet (has never added clothes to the site before).  If this is the case, the application displays a simple and straightforward instruction page basically telling the user to take photos with their phone to upload to the site.  This choice was made because all three of our first clients were confused when brought directly to the camera after registering, and did not know what to do when they got to that screen. 

2) Changed the first 'Add to Wardrobe' button in the mobile app to say 'Continue'.  As Client 3 pointed out, having two buttons with very specific labels do two different things was confusing.  

3) Removed the ability for users to add items of clothing when requesting advice.  All three clients completely ignored this feature, and Client 2 even preferred to write a text description of the sort of clothes he would wear, choosing not to point to items from his wardrobe specifically.  Furthermore, our clients were consistently confused by the difference between viewing their own wardrobe and viewing someone else's.  Removing this feature both simplified the advice request process, and mitigated confusion for users while focusing our use case scenario.

4) Updated the title bar order and content. Rather than have the option to 'Browse Requests', which was a feature that confused users in the first iteration, we replaced it with a search bar.  Clients generally did not see the use of having a "Browse" feature that was different from viewing posts on the front page.  Furthermore, we reordered the top menu bar so that instead of having 'logo, ask for advice, browse, my wardrobe/account' it is now 'logo, ask for advice, my wardrobe, search'.  

5) Replaced voting up/down arrows with +/- icons.  All three of our first clients were confused by the up/down arrows.  In the second iteration, Clients 4-6 knew immediately how the new +/- buttons worked.  One other suggestion that was made (by Clients 1 and 2) was to replace the arrows with thumbs up/down instead.  We also made most of our add and search icons more consistent throughout.  One last change we plan to make in this regard will be, as User 6 noted, to replace the mobile 'search' icon with an 'add' icon.  

6) Updated how posts are organized on the homepage.  We added the ability for users to sort by 'recent' and 'popular', rather than just 'recent'.

7) Added labels to wardrobe interface "__'s wardrobe".  This way the user always knows whether they are looking at their own personal information/wardrobe vs. somebody else's.  The need for this label was made apparent when Client 1 initially thought she was looking at her own wardrobe in the outfit creation page, not "Felicity's".