Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Task / Design Images

Storyboard

Usability Analysis

Uploading wardrobe

In order to upload his wardrobe, Sylvester uses the mobile application.  When he opens the application he is presented with the sign in page (if he wanted to register he would have had to have done so on the website).  Upon signing in, he is brought to the phone's proprietary camera interface.  He takes a photo of an item of clothing, and is brought to a page with a thumbnail of the image and the option to accept or retake the photo. No matter what he selects, he is directed back to the camera.  If he chooses "Upload" the photo is uploaded to his account, and if he chooses "Retake" the image is discarded.

When he is done taking photos and uploading them using the mobile application, Sylvester opens up the homepage of the site on his computer's web browser. He chooses "Add to Wardrobe" and is directed to a page with all of his clothing that has been uploaded to the website.  When he selects an item of clothing, he is able to tag it both by adding text tags and by selecting predetermined 'visual' tags (such as shirt, dress, necktie, etc.)  When finished, Sylvester selects 'Done' and is brought back to the homepage.


**Usability goes here**

Posing a request

On the homepage, Sylvester chooses "Ask For Advice" and a simple window pops up where he can ask a question and add details to give context for the question.  He asks what he should wear to his date and hits "Ask".

**Usability goes here**

Browsing requests

Felicity and Sylvester visit the homepage.  They see Sylvester's question at the top of the list under both the "Friends" and "Everyone" tabs (for Sylvester his is also shown under the "Me" tab).  Felicity chooses his question and is brought to a page where she can see recent comments and outfits, and is presented with the opportunity to comment as well as create a new outfit.  (Note:  The top question in the mockup above is a question about a wedding.  In this specific scenario, the question would be posed by Sylvester and be about his date outfit).

**Usability goes here**

Creating an outfit

Felicity selects "Answer" on the comment page, and is brought to the outfit select page.  There she is able to add items to the wardrobe.  The left panel is a selection of labels, organized and presented entirely visually.  Types of clothing include items like t-shirts, dresses, neckties, etc.  When she selects to narrow by a filter, the rightmost pane displays all items in Sylvester's wardrobe that fall under that category.  In this example, she has narrowed down the selection to neckties.   

In order to add items of clothing to the 'outfit', Felicity drags items from the right pane directly into the window in the middle of the page.  A male 'mannequin' is the centerpiece as a reference point.  When she drags an item to a part of the body, that part of the body glows.  When the item is released, it is locked in and an arrow is drawn connecting the article of clothing with the body part.  
When she is done assembling the outfit, Felicity selects 'Done'.

**Usability goes here**

Browsing a response to a previous request

In order to browse answers to questions, Sylvester and Felicity visit the question page as shown earlier in the storyboard.  There they can up/down vote wardrobe selections.  When an answer is selected (the thumbnail clicked), a window opens with a larger view of the outfit.

**Usability goes here**

...