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 brought immediately to 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 immediately 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. |
**Usability goes here** |
Posing a request |
When Sylvester signs onto the website, he is brought to the homepage, the centerpiece being a list of recent questions by friends, everyone, and himself. He 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 is presented with the opportunity to comment. (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 that fall under that category. In this example, she has narrowed down the selection to neckties. (Note: The user can choose to 'tag' items of clothing in their wardrobe. The interface is not presented here, but would be present. In the case where an article of clothing is not tagged, it is placed in an 'other' category, which is still selectable on the left pane). |
**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** |
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). |
**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. Upon hitting "Submit" Sylvester's question is immediately posted to the website. |
**Pose Usability goes here** |
Browsing requests |
Sylvester and Felicity log onto the site, and are presented with a homepage which features recent questions. 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 is presented with the opportunity to comment. (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. |
**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 his date. He scrolls through the wardrobe selections as selected by his friend Felicity, as well as by other 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. |
**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 |
Sylvester and Felicity log onto the site, and are presented with a homepage which features recent questions. 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 is presented with the opportunity to comment. (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 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. |
**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** |
