Finally we are proud to present to you a short video which shows our Prototype up and running:
During the last week, we had 2 of potential users of our application give us a first feedback for the prototype we build during the last weeks. With help from the users, the design of our prototype was tested with the so called “Think Aloud” method. Having launched our prototype, we expected from the users to react to the application as they would do if they would have seen this application in the public on a public display and thereby they should speak aloud they thoughts: what did they thought is happening, what they were trying to achieve and why the acted the way they did.
Afterwards we gave them some specific task to fulfill, and observed their actions to evaluate our design decisions in order to improve them.
As we launched our prototype application, the users saw the following setup:
It was pretty easy for both of the users to quickly recognize that see a dressing room. As they stood in front of the camera and saw them self, they intuitively began to wave their hands until they’ve seen a red circle appear above their hands. At first they were surprised and could not think what that means. After having some thoughts, they stared to place their hands above the visual buttons to see what happens. At first – nothing happened, because our application expects that the users holds his hands a certain time over to button to actually trigger it. But after some time of tryouts, the observed that if the hold still above a button, that the circle was painted red from inside and the buttons disappeared, showing the category of clothes they accidently selected. At this point, we need to think of a better solution of how we can tell a user more obviously that his hands can fulfill “magic”.After this first aha-effect we proceeded with giving the users actual instructions.
After the first setup, we gave the users the following instructions in a typed form and observed their behavior:
- Try on a Black dress and then a blue Tshirt
- Find out how much a blue t-shirt and black pants cost
Having learned from the first aha-effect, both users performed our desired actions with ease. This was due to the fact that both of the users where tech-savvy ones. Except sometimes, there where some problems with our application to identify their hands. This caused them to struggle with their hand movements and get a little disappointed.
The Task of the last week of our project was to build a first functional prototype of our application.
For the implementation our group received a PrimeSense Sensor which is simmilar to the famous Kinect for the XBOX 360. (http://www.asus.com/Multimedia/Xtion_PRO).
For the Implementation of our prototype we chose the following development stack:
- Processing 2.1
- SimpleOpenNi 1.96
- Java 1.7
Our first implementation shows how we plan to add different kinds of clothing to our users. This is done using gesture control for selecting the clothes and using body part detection and tracking of the user with help of our PrimeSense sensor. The clothes are 3D objects, which allows for scaling and also rotating of them, giving the user a nice view of the clothes from different angles.
During development of the prototype we’ve found that the Drag&Drop selection (introduced during the Paper Prototype phase) of clothes by the hand of the user is redundand. Therefore we decided to implement the clothes selection just by “clicking” over the desired clothing.
Currently there is only a small amount of 3D clothes that we’ve found online for free. Also the current UI is in it’s very early stages and it has to be implemented further.
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:
Getting User Feedback: Simon, Kevin, Alex
Modifying the Prototype: Sean, Oliver, Alex, Oleg
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
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):
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.
Simon: Paper Prototyping
Oleg: Paper Prototyping, Task Definition, Publishing
Oli: Paper Prototyping
Sean: Paper Prototyping
Alex: Paper Prototyping
Kevin: Paper Prototyping
Week 3 and 4 have been quite busy for the mobile zoolanders! We started work on our interview questions, aiming at bringing insights from various perspectives to our team. After that, we evaluated the results and began to form empathy maps and finalising our storyboard scenarios. In the end we condensed our findings into a design principle, that we will try to follow throughout the complete project. Interested in what we found out? Lets go.
Storyboards / Scenarios
We decided to do unstructured interviews because we felt that this would be the most creative way of getting new insights from our target group. The questions we used in the interviews can be seen in the two preceeding blogposts here and here.
We interviewed a total of 6 people. There were 2 males and 4 females questioned. The age span of our interviewees was between 20-23 years old.
On the other hand, a few of our questions led to answers that were a little bit more insightful. For example, more than half of our interviewees had felt uncomfortable with what they wore. Also, most of our interviewees would feel embarassed with using a public display. Some even mentioned “violations of privacy” during the later part of the interview.
Not too surprising but still a fun-fact is that our interviewees spend most of their fashion budget on shoes.
Quotes & Defining Words (SAY)
- “I’ve never seen something like this before”
Thoughts & Beliefs (THINK)
Actions & Behaviours (DO)
- shop privately
- shopping is time consuming
- trying out different clothes
Feelings & Emotions (FEEL)
- fun trying clothes on
- privacy concerns
- not drawing attention from strangers
- feeling free to chose
Our Application should provide interactive ways of choosing clothes and giving suggestions about appearance of the user inside the clothing store.
Interviews: Simon, Oleg, Oliver, Sean, Kevin
Empathy Map: Simon, Oleg, Oliver, Sean
Storyboards: Simon, Oleg, Sean, Alex
Design Principle: Simon, Oleg, Oliver
Presentation: Alex, Kevin
Section B: Questions to be answered by respondents
- What is your opinion towards a public display which is able to recognize your identity?
- Are you willing to provide your personal information to a public display application for having a better user experience ?
- What kind of public displays catch your eyes the most?
- What is your opinion towards interacting with a public display which is seeable by other pedestrians?