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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s