Scenario

In the section, we follow the story of Sylvester, a shy college student looking for a more fashionable look, and his fashion-savvy friend Felicity.

Sylvester and Felicity

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.

Posing a Request

With his wardrobe intact, Sylvester looks for a way to get advice. He sees a button near the top of the main page, "Pose a Request." Following his intuition, he clicks on the link. He is brought to a form page. He fills out the fields, asking the question "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 question, 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 question. 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.

Storyboard Designs

We have developed three designs for each task, resulting in three storyboards. We analyze each design during each task, as we have different interfaces for each task.

Design 1

In this design, we took a hybrid approach of using both a web and mobile interface. Uploading the wardrobe is performed on a mobile interface, while the other tasks are all performed on a web interface.

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 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 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. Here, Sylvester and Felicity can up and down vote different outfits that have already been created. (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 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 questions, 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**

This approach replicates the behavior we saw in the browsing work earlier in the design. The same advantages and disadvantages apply to searching the system after answering a request.

Design 2

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) post a question to the website c) view questions 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 ask a question and provide details. Sylvester fills in a request for advice and a few details about his target girl and upon hitting "Submit," Sylvester's question is immediately posted to the website.	**Pose Usability goes here**
Browsing requests	(Note: This interface is the same as in Design 1. The storyboard is copied here for better readability) 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. Here, Sylvester and Felicity can up and down vote different outfits that have already been created. (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).	**Browse 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. 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	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 questions, and selects the question 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

Task / Design Images	Storyboard	Usability Analysis
Uploading wardrobe	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 questions 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	When done uploading photos, Sylvester is brought back to the home screen. There he types 'What should I wear on my date next week?' in the Ask bar at the top of the page and selects "Continue". 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". He is then brought to a page where he can tag his post. Some recommended tags based on the context of his question and the context of past questions 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 post is put on the site.	**Usability goes here**
Browsing requests	(Note: This interface is almost same as in Design 1. The storyboard is copied here for better readability, with the added search ability.) 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. Here, Sylvester and Felicity can up and down vote different outfits that have already been created. (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). Also note: If the question 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 question and search terms that match question tags.	**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 questions, 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**

Child pages

PK3k - GR2