DressExchange - GR3 - Paper Prototyping

R3 - Paper Prototyping

Prototype Photos

First Iteration:

Main profile screen (not too carefully designed)

Selling a dress:

The original clothing racks design for selecting dresses:

How browsing and viewing dress details worked (popups):

Second Iteration

The new retooled dress display screen, and a less silly looking side menu bar:

The new dress view-details panel:

Briefing

You are Erin, a sophomore who likes to party. You want to buy a new black dress for an upcoming party, and also to sell one of your older dresses. You will do both on the Dress Exchange, where you have already made an account.

Scenario Tasks

Our tasks changed between scenarios, as we decided that the first iteration's tasks were too simplistic and didn't take advantage of the full functionality implied by our design. The second iteration's tasks still don't fully cover everything, but I blame that on us having chosen a project with too many facets.

First iteration:

1. "Sell your old Calvin Klein knee-high dress."
2. "Find a black minidress that you want to wear."
3. "Buy the dress."

Second iteration:

1. "Sell your old dress. (brown floor-length gown, medium)"
2. "Search for a black miniskirt, medium, and save it in your Saved Dresses."
3. "From your Saved Dresses, buy the miniskirt."

Observations

First iteration:

1. Users were very confused by the racks design of the Color and Size selection screens. This could have been due to the fact that they were noncolored in the prototype, but many users did not think to "hover" over the sections of the clothing racks, which would have provided labels. Another user comment mentioned it was weird having to switch back and forth between the clothing racks abstraction and the list-of-dresses.
2. The different 'size' fields of the 'sell dress' screen were confusing to users who didn't know the exact measurements of their dress, and we realized it would be silly to require users to measure their dresses before trying to sell them. Furthermore, dress characteristics weren't uniform between the Sell Dress and Buy Dress screens, resulting in users fumbling when trying to find dresses with some characteristic.
3. One user noted that she wanted to go back to her profile page after selling a dress, but the popup that appeared gave her no option to do so and blocked her access to the rest of the site, so she couldn't use the menu bar to do so either.
4. One user felt that listing so many dresses on one screen, and using only a popup for showing details about them, caused information overload for users.

Second iteration:

1. No users attempted to click outside of popups when they appeared, which seems to indicate that our popups were successful at conveying modality (they block access to the rest of the site while not-clicked). The one instance of hover dialogue we use appears only for a short time and no user attempted to click it.
2. One user was confused by the difference in vocabulary between the "successfully sold dress" popup's "Browse Dresses" button, and the main sidebar's "Buy Dresses" option. We decided to be more consistent with vocabulary in future designs - either use "Buy" or "Browse", but not both.
3. A user did not realize that he needed to upload a picture of the dress he was attempting to sell, on the "Sell Dresses" screen. We decided that the "dress picture here" screen should be a little more obvious.
4. In the course of testing, we found that we needed to explain to users that the dresses on the "My Saved Dresses" page were not necessarily the same as the ones on the "Buy Dresses" page. This was mainly due to the paper prototype's reliance on redundancy, however; had I drawn another page of unique dresses for the "My Saved Dresses" page, this problem would likely not exist.
5. Users did not make much use of the Color, Style, and Size filters on the Buy Dresses page. (This was most likely because they didn't need to; the categories they needed for their dress were already selected.)

Prototype Iteration

Here are the changes we made between prototypes, some based on the user observations above, some for the sake of making sure our prototype was more complete.

1. We removed the clothing racks abstraction; it was pretty, but ultimately inefficient and confusing to users who had to switch between different modes of selection.
2. We standardized dress characteristics; instead of requiring measurements and other random categories, all dresses now only have "color", "style" (or dress skirt length), and "size" (sm, med, lg, etc.).
3. We added more options to the modal popups that appeared, so that users wouldn't feel too constrained in actions.
4. We limited the number of visible dresses on-screen to avoid information overload and also give each dress a larger image. We removed the dress-details-popup and provided an on-page preview pane instead, and also included a "similar dresses" section to utilize screen real estate.
5. We added the "Saved Dresses" function, which currently behaves identically to the "Buy Dresses" page, except that only the user's saved dresses are displayed.