Week 6: Initial User Tests


Here we are at week number 7 of our project and the assignment for this week was to perform a preliminary user testing using our paper prototype from last week to receive first rough feedback from our potential users. The purpose of the preliminary user testing is to react and incorporate major changes of the initial design of our project due to feedback of our users.

Last week our group created a low-fidelity prototype which has shown the three main user actions task of our application:

  • User gender & Clothes category selection
  • Trying on the clothes
  • Buying the chosen clothes

This week our task was to ask some potential users of our application to perform the three tasks listed above using our created paper prototype and to carefully observe how the user would interact with our application and which problems she/he might have using our application. According to observation, we made some improvements to our prototype that we want to show you next.

User gender & Clothes category selection

During the selection of the gender and the clothes category, we observed that our users most of the time did not have major problems. However a couple of them mentioned that they would never buy hats or underwear using our application. Therefore we removed the mentioned categories and replaced them with categories the user proposed. These were T-shirts (Male + Female) and Skirts (Female):

Trying on the clothes

During this task, most of the users were confused about how they select clothing. For them it was not clear how to “scroll” through the shown clothing. Therefore we improved our paper prototype using a movable holder for the clothes which we would move if the user waves her/his arm upwards or downwards accordingly.  Furthermore it was not clear for all users, how they would go back to category and gender selection. To solve this, we created a “Back”-Button which brings them back to the first view of the application:

Buying the chosen clothes

In this last task, several users were confused about the buying process. Therefore we made it more clearly by using Post It Notes as pricing values, which we would place on the screen at the same time they selected the clothing. That way, it was clearer to the users that the prices only of clothing the currently selected are shown and that only the information about the current outfit would be sent to the ofthe store they are shopping at:

Task Breakdown:

Getting User Feedback: Simon, Kevin, Alex
Modifying the Prototype: Sean, Oliver, Alex, Oleg
Publishing: Oleg

Paper Prototype


The last week’s task for our project was to create a low-fidelity paper prototype of our application.  Low-fidelity prototypes are used to validate what each screen of our application contains and how the application will work before we can move over to the implemented software version of our application.

The prototype can be made using flip charts or simple sheets of paper, index cards and also Post-It notes to simulate the interaction sequence of the user tasks. We decided that we want to prototype the following three main user actions (tasks):

  • User gender & Clothes category selection
  • Trying on the clothes
  • Buying the chosen clothes

And this is what we came up with:

Our final Prototype consinsts of two views. The first view (upper half of the cardboard) is where our user is able to select his Gender and also the Clothing types:
view 1

To use our application the user has to stand in front of the display where he can see himself as shown above. To select the desired gender, the user has to  hold one of his hands up in the air so his hand is visually touching the gender symbol he decides to chose. After that, he has to hold his hand to the right of the screen and place the hand over the desired clothes category (Handbags, Hats, Dresses etc..). After the user has chosen her or his gender and the clothes category, she/he is taken to the second view of our application from which he can try on the clothes and also by his selection(s):

view 2

The example above, shows what users sees if she / he selected Female as her/his gender and “Dresses” as the type of clothes. Now she can search through the “wardrobe”  on the right of the screen by holding and waving her arm as shown in the symbols above and underneath the wardrobe. If she sees the dress that she likes, she has to hold her hand still above the desired dress and wait till the dress is placed in her hand, just like it would be if she would be using the  Drag&Drop technique which is used in modern web applications. After the dress was visually placed at her hand, she has to move her hand to her body where it then will be placed on her body remaining there with help of motion tracking algorithm of our application. If she doesn’t like the dress or other clothing she selected, she can remove all clothes by placing and holding her hand above the reset button wich is located a the top right of the screen.
Finally, during each Drag&Drop and reset action of the user, a pricing list is updated which is located at the bottom right of the screen. As soon as the user finished with his clothes selection, he can see the total cost and cost of each clothing item he selected. By placing and holding his hand above the buy symbol which is located below the pricing list, an order is submited to the checkout of the store he’s shopping at.

Task Breakdown: 


Simon: Paper Prototyping
Oleg: Paper Prototyping, Task Definition, Publishing
Oli: Paper Prototyping
Sean: Paper Prototyping
Alex: Paper Prototyping
Kevin: Paper Prototyping