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 request advice and add details to give context for the request.  He requests for advice about what he should wear to impress the girl, adds a few details about the girl, and hits "Ask".

**Usability goes here**

Browsing requests

Felicity and Sylvester visit the homepage.  They see Sylvester's request at the top of the list under both the "Friends" and "Everyone" tabs (for Sylvester his is also shown under the "Me" tab).  Felicity  Requests are organized by date added, most recent at the top of the list.  Because the system relies on a scenario with quick turn around, we have prioritized organizing by date submitted in order to encourage people to post advice on the most recent requests.

Felicity chooses his request 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. Here, Sylvester and Felicity can up and down vote different outfits that have already been created. (Note:  The top request in the mockup above is a request about a wedding.  In this specific scenario, advice would be requested by Sylvester and be about his new outfit to woo the girl).  

**Usability goes here**

Creating an outfit

Felicity selects "Answer" on the comment page, and is brought to the outfit creation 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 neckwear.   

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 his own requests, Sylvester can visit the page for his request as shown earlier in the storyboard under "Browsing requests."   When an answer is selected (the thumbnail clicked), a window opens with a larger view of the outfit.

**Usability goes here**

...

Task / Design Images

Storyboard

Usability Analysis

Uploading wardrobe

In order to upload his wardrobe, Sylvester uses the mobile application.  He registers using the mobile application (he could have also done so directly on the website).  Upon signing in, he is brought to the page where he can choose to a) add clothing to his wardrobe b) request advice on the website c) view requests he has posed in the past.  He chooses Add Wardrobe and is immediately 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.  If he chooses accept, he is brought to a screen where he can tag the piece of clothing.  At the very least, he must use the visual icons to tag the type of article of clothing (t-shirt, dress, shoes, etc.).  He also has the option to add verbal tags that describe the article of clothing in more detail (purple, striped, etc). If he chooses to retake the photo, he is taken back to the camera screen.

**Wardrobe Usability goes here**

Posing a request

After adding clothes to his wardrobe and selecting 'Done', Sylvester is brought back to the menu page where he selects "Ask for Advice".  He is brought to a simple page in the application where he can request advice and provide details. Sylvester fills in a request for advice and a few details about his target girl and upon hitting "Submit," Sylvester's request is immediately posted to the website.

**Pose Usability goes here**

Browsing requests

(Note: This interface is similar to the same as in Design 1 regarding browsing requests. The storyboard is copied here for better readability) 
 
Felicity and Sylvester visit the Felicity and Sylvester visit the homepage.  They see Sylvester's request 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 request 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. Here, Sylvester and Felicity can up and down vote different outfits that have already been created. (Note:  The top request in the mockup above is a request about a wedding.  In this specific scenario, advice would be requested by Sylvester and be about his new outfit to woo the girl). 

**Browse Usability goes here**

Creating an outfit
Image Removed Image Removed

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.  When she selects "Add Item", a window pops up where she is able to filter Sylvester's wardrobe using visual icons.  When she selects an item, she is then brought back to the wardrobe assembling screen, where she is able to directly comment on each article of clothing to explain why she chose it, how it should be worn, etc. This differs from the first design in that the item cannot be physically manipulated on the screen.

**Create Usability goes here**

Browsing a response to a previous request
Image Removed

Sylvester gets a notification on his phone and notices that several people have suggested outfits for him.  He uses the mobile application to open up his list of previously asked personal requests, and selects the request about how to impress the cute girl.  He scrolls through the items in the outfit created by his friend Felicity by scrolling up and down. By scrolling left and right, he can view other outfit creations by users he has never met.

**Personal Browse Usability goes here**

Design 3

 Requests are organized by date added, most recent at the top of the list.  In addition to being able to browse requests by date added on the front page, Sylvester and Felicity can find requests using other search venues as well.  Most notably, they can select the "Answer" button on the top middle of the screen to go to a page where requests are sorted by genre/type.  They could also use the right pane to see recommended advice posts based on request/advice history, and can use the search bar to search for requests.  The search algorithm takes into account both matching search terms with exact words in the request and search terms that match request tags. 

 (Note: This interface is similar to the same as in Design 1 regarding browsing requests. The storyboard is copied here for better readability) 


Felicity chooses his request 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. Here, Sylvester and Felicity can up and down vote different outfits that have already been created. (Note:  The top request in the mockup above is a request about a wedding.  In this specific scenario, advice would be requested by Sylvester and be about his new outfit to woo the girl). 

**Browse Usability goes here**

Creating an outfit
Image Added Image Added

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.  When she selects "Add Item", a window pops up where she is able to filter Sylvester's wardrobe using visual icons.  When she selects an item, she is then brought back to the wardrobe assembling screen, where she is able to directly comment on each article of clothing to explain why she chose it, how it should be worn, etc. This differs from the first design in that the item cannot be physically manipulated on the screen.

**Create Usability goes here**

Browsing a response to a previous request
Image Added

Sylvester gets a notification on his phone and notices that several people have suggested outfits for him.  He uses the mobile application to open up his list of previously asked personal requests, and selects the request about how to impress the cute girl.  He scrolls through the items in the outfit created by his friend Felicity by scrolling up and down. By scrolling left and right, he can view other outfit creations by users he has never met.

**Personal Browse Usability goes here**

Design 3

In order to upload his wardrobe, Sylvester uses the online interface.  He signs onto the website and is presented with the homepage.  The most prominent part of the page is a list of recent requests by friends, everyone, and himself.  He selects the button "Add to Wardrobe" from the right pane. This differs from the previous two design in that it is a web interface, not a mobile one.
He is brought to a page where he can add photos of clothing he has taken and has on his computer's hard drive.  After he is done uploading his photos, he is brought to a page where he can tag different items of clothing.  He can both tag with text descriptors and with visual preset tags (shirt, pants, dress, etc.) This screen is the same as in the last part of "Uploading Wardrobe" in part 1, used to tag items.

Task / Design Images

Storyboard

Usability Analysis

Uploading wardrobe
Image Added Image Added

In order to upload his wardrobe, Sylvester uses the online interface.  He signs onto the website and is presented with the homepage.  The most prominent part of the page is a list of recent requests by friends, everyone, and himself.  He selects the button "Add to Wardrobe" from the right pane. This differs from the previous two design in that it is a web interface, not a mobile one.

He is brought to a page where he can add photos of clothing he has taken and has on his computer's hard drive.  After he is done uploading his photos, he is brought to a page where he can tag different items of clothing.  He can both tag with text descriptors and with visual preset tags (shirt, pants, dress, etc.) This screen is the same as in the last part of "Uploading Wardrobe" in part 1, used to tag items.

**Usability goes here**

Posing a request
Image Added
Image Added

When done uploading photos, Sylvester is brought back to the home screen.  There he types 'What should I wear to impress a girl?' in the Ask bar at the top of the page and selects "Continue". He is then brought to a page where he can tag his request. Some recommended tags based on the context of his request and the context of past requests similar are presented on the page.  Sylvester chooses some tags from the preselected options by clicking on them and they are automatically added to the tags line.  He then hits "Submit" and his request is put on the site.

**Usability goes here**

Browsing requests
Image Added Image Added

(Note: This interface is almost same as in Design 2. The storyboard is copied here for better readability.)

Felicity and Sylvester visit the homepage.  They see Sylvester's request at the top of the list under both the "Friends" and "Everyone" tabs (for Sylvester his is also shown under the "Me" tab).  Requests are organized by date added, most recent at the top of the list.  In addition to being able to browse requests by date added on the front page, Sylvester and Felicity can find requests using other search venues as well.  Most notably, they can select the "Answer" button on the top middle of the screen to go to a page where requests are sorted by genre/type.  They could also use the right pane to see recommended advice posts based on request/advice history, and can use the search bar to search for requests.  The search algorithm takes into account both matching search terms with exact words in the request and search terms that match request tags. 

Felicity

Task / Design Images

Storyboard

Usability Analysis

Uploading wardrobe
Image Removed Image Removed

**Usability goes here**

Posing a request
Image Removed
Image Removed

When done uploading photos, Sylvester is brought back to the home screen.  There he types 'What should I wear to impress a girl?' in the Ask bar at the top of the page and selects "Continue". He is then brought to a page where he can tag his request. Some recommended tags based on the context of his request and the context of past requests similar are presented on the page.  Sylvester chooses some tags from the preselected options by clicking on them and they are automatically added to the tags line.  He then hits "Submit" and his request is put on the site.

**Usability goes here**

Browsing requests
Image Removed Image Removed

(Note: This interface is almost same as in Design 2. The storyboard is copied here for better readability, with the added search ability.)
Felicity and Sylvester visit the homepage.  They see Sylvester's request 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 request 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. Here, Sylvester and Felicity can up and down vote different outfits that have already been created. (Note:  The top request in the mockup above is a request about a wedding.  In this specific scenario, advice would be requested by Sylvester and be about his new outfit to woo the girl).  
Also note:  If the request was not easily accessible on the home page, Felicity and Sylvester could search for it by using the search bar on the right side of the page.  The search algorithm takes into account both matching search terms with exact words in the request and search terms that match request tags. . Here, Sylvester and Felicity can up and down vote different outfits that have already been created. (Note:  The top request in the mockup above is a request about a wedding.  In this specific scenario, advice would be requested by Sylvester and be about his new outfit to woo the girl).  

**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 right panel is where Sylvester's wardrobe is presented.  Felicity narrows down the wardrobe selection by searching for tags.  If no tags are being searched for, Sylvester's entire wardrobe would be presented.  

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.  She has freedom to place items anywhere she wants on the page.  Each item has a clickable box on the upper right.  When clicked, a window appears where Felicity can add comments about how an item should be worn, where, why, etc.  When finishing putting together the outfit, Felicity selects "Done".

**Usability goes here**

Browsing a response to a previous request

(Note: This interface is almost same as in Design 1. The storyboard is copied here for better readability.)
In order to browse answers to his own requests, Sylvester can visit the page for his request as shown earlier in the storyboard under "Browsing requests."   When an answer is selected (the thumbnail clicked), a window opens with a larger view of the outfit. 

**Usability goes here**