Second sketches - iPad

Same requirements such as the iPhone requirements: 

• To buy a combination of clothes (product idea 1.),
• to show seasonal trends (product idea 2.),
• to show suggestions (product idea 5.), 
• to buy an outfit in your area (product idea 3.),       

moreover, 

• to change and combine clothes of a costume doll,
• to show the total costs for an outfit.

According to the requirements and inspired by the iPad Apps (Pocket Pond, Net-A-Porter and Slate) I make sketches of an interaction solution for the iPad.

Screen shots and short descriptions of the three iPad Apps I got my inspiration:

The first App is the Pocket Pond. It is an App for playing with fishes and water lily. A user can drag and drop more fishes and water lilies in the lake. This App is on example that shows that a drag and drop gesture is very common gesture for the iPad (Pocket Pond, 2011):

The other App is an example of a fashion magazine Net-A-Porter. This example represents a popular form of using the iPad as a digital magazine with large and emotional pictures (Net-A-Porter, 2011): 

The last App is from Slate an American online magazine. The interesting thing at the Slate App is that you can flick the borders to chose an article (Slate, 2011):

Inspired by the Apps I started to draw sketches. In the next picture two variants are visible. In the above variant there are two bars: One navigation bar (with a back function and button "wardrobe") and one tool bar (with browsing function for the pictures plus a button "add to the shopping bag"). In the other variant is only a navigation bar (with back function and a button "add to the shopping bag"). The user can activate the wardrobe with the round plus button. The main idea of these views is to give a lot of space for large and emotional photographs such as in the Net-A-Porter App. 

When the user open the wardrobe either with the button "wardrobe" or with the round plus button an wardrobe open in a popover. The wardrobe of the iPad is different than the wardrobe for the iPhone. The areas of the different types of clothes are together in the wardrobe and not fragmented in several screens such as the wardrobe of the iPhone. The concept to integrate more fragments on a lager screen is related to the android concept of fragmenting (see fragmenting). The user can flick through the shelves of the wardrobe such as in the Slate App and can change the clothes with and drag and drop gesture such as in the Pocket Pond App. When the user drop an item a popover open with a possibility two change the colour and the size. 

Net-A-Porter, 2011. iPad App. Available at: http://www.net-a-porter.com/Content/apps/ipad [Accessed 23 February 2011].
Pocket Pond, 2011. iPad App. Available at: App Store. [Accessed 23 February 2011].
Slate, 2011. iPad App. Available at: http://www.slate.com/id/2263558/ [Accessed 23 February 2011].

Fragmenting

To fragment content is a part of the android design. Because of this, a class was developed to fragment content. The following definition describes the meaning of a fragment and how to use it:

“Android 3.0 further helps applications adjust their interfaces with a new class called Fragment. A Fragment is a self-contained component with its own UI and lifecycle; it can be-reused in different parts of an application’s user interface depending on the desired UI flow for a particular device or screen“ (Bray, 2011).

The pictures show a visual example of fragmenting (Bray, 2011):

Also in the Apple design is the idea of fragmenting content included. For example mail on iPhone presents streamlined email functionality in a series of screens and mail on iPad works well in all orientations (landscape shown). See following pictures (Apple, 2010):

Bray, T. 2011. The Android 3.0 Fragments API. android developers (online). Available at: http://android-developers.blogspot.com/2011/02/android-30-fragments-api.html [Accessed 23 February 2011].

Apple, 2010. iPad Human Interface Guidelines. Apple (online). Available at: http://www.hung-truong.com/blog/wp-content/uploads/2010/06/iPadHIG.pdf [Accessed 18 November 2010].

iPhone - Quick usability test with a paper prototype

The users:  

5 users, 4 women, 1 man, between 26 and 40 years old, 4 iPhone users and 1 Android user.

The results:

Home screen - no problem

Costume doll:
Wrong expectation - One user expected that the element "..." means the doll in same outfit with another colour.
Wish - One user wished not only skinny models but also normal models. The user suggested having a possibility for choosing the size of the model.

Wardrobe:
Wrong expectation - Wrong expectation for the label of the navigation buttons. "Add" is preallocated by the meaning "Add to shopping basket". "Buy" created the expectation with two users to go directly to cash. Suggestion from these two users: Change the label in "Dress" and "Add" or use icons such as shopping basket and plus button with t-shirt icon.
Wrong expectation -  One user expected that the clothes rail works like a cover flow.
Wish-  Sub category for example for blouse, t-shirts and pullover. Double clothes rail.

All users preferred the alternative with the t-shirt scrolling through the wardrobe.

iPhone - Functional layouts/ wireframes

Second sketches - iPhone

According to the product ideas, the following ideas are a part of the costume doll: 

• To buy a combination of clothes (product idea 1.),
• to show seasonal trends (product idea 2.),
• to show suggestions (product idea 5.), 
• to buy an outfit in your area (product idea 3.),       

moreover, 

• to change and combine clothes of a costume doll,
• to show the total costs for an outfit.

In the first picture I tried to find the right place for clothing categories, a possibility to buy, to show the total costs for an outfit and to show suggestions. My solution is the last screen: 

• The clothing categories are the clothes of the doll. With a touch of one of the round button a category opens depending from the button position. For example the button is on a skirt the category "trousers, shorts and skirt" opens.
• The possibility to buy is the "buy" button in the header navigation.
• The total costs are under the "buy" button.
• The suggestions are on other pictures. To activate these pictures, slip the pictures with the finger form one side to the other side. The symbol "..." indicates this possibility. 

In the next picture I show what will happen when one of the round buttons are activated. A virtual wardrobe will open. The fashion item in the center is the current item from the doll. This item is bigger than the others to show that this is the current item. Moreover, details to this current item are shown such as name, reference number, price, colour possibilities and size possibilities. With a slip gestures with a finger other items form the the categories can be browsed and closed. In the categories "shirts, blouses and pullover" and "trousers, shorts and skirt" the clothes are hanging on a clothes rail (see post: First sketches). 

The last picture shows what will happen after touching the button "buy": An action sheet open with the button "buy online" and "buy in my area". The button "buy online" will bring the user to a buying process and the button "buy in my area" will bring you to the navigation bar point "5. Stores". The program takes the details of combination of clothes from the doll to "5. Stores" and there is a possibility to choose the closest store. 

iPhone - Sitemap for the App

To understand better in which kind of App I see my costume doll, I created a sitemap. As it is shown in the sitemap, the costume doll is a part of an App for shopping online fashion. In the first step the offers are for women, but of course in the next steps also for men. 

The sitemap goes deeper in the area of the costume doll and gives only a short view of other areas such as personal area/ buying process, collection, sale and stores. These areas are deduced from product ideas (see post: Personas) based on the persona profiles. This short list shows product ideas and the area implementing: 

1. To buy online (area 2. Costume doll, 3. Collection, 4. Sale and 6. Personal area/ buying process) 
2. A section with sale (area 4. Sale) 
3. Local information sale in your area or you can buy this in your area (area 2. Costume doll, 4. Sale and 5. Stores) 
4. Seasonal trends (area 2. Costume doll and 3. Collection)
5. Individual suggestion of clothing combinations (area Costume doll) 

Personas

Definition persona: 

A persona is a stereotype of a special group. Alan Cooper develops the persona method (Pruitt & Adlin 2006, p.11). The main idea is to have a stereotype of a person in your mind, which represents a group of your tagged audience. For example you develop an ERP (Enterprise Resource Planning) solution for a company and there are different user groups such as secretaries, engineers and controllers. These user groups are very different and you have to think about each group separately to cope with all their needs. In order to do this it is helpful to develop small descriptions of a stereotype of each group. Afterwards it is easy to ask yourself if a solution is a good solution for the secretary and also for the engineer, for instances. 

I developed three personas for my project. These personas should help to understand a possible target audience of my project and should also help me to check if my product is usable for these three types of target audience.

Persona Lilli, Age: 25

Use Pattern: Shopping with friends, is interested in new trends on sales

Demographic Group: Student, single, female, likes to dance 

Favourite Brands: Top Shop, Accessorize, Zara, Mango

Favourite Movie: Twilight

User of these devices: The has an Sony PC and an iPod   

Profile:

Lilli is 25 years old, is German, and lives in Hamburg. She is a student in the course BA Marketing. She is single for 2 month, but It maybe she gets a new boyfriend in the near time. She likes being a student mainly because of the spare time. In this time, she goes out with friends for dancing and talking or she meets friends in the city for shopping. Of course she has not much money as a student, because of this she tries to buy in sales. In order to do that she informs herself about trendy items and whenever possible the items she is buying are on sales.

Persona Christina, Age: 37

Use Pattern: Has to dress up for her job, is interested in trends in a higher price level

Demographic Group: Employee (product manager), has a boyfriend for 10 years, no kids, female, likes to go to nice restaurants

Favourite Brands: Hugo Boss, Comptoir des Cotonniers, Cos

Favourite Movie: Life is Beautiful

User of these devices: Has a Mac Book and an iPhone

Profile:
Christina is 37 years old and French. She lives in London and works for a big company as a product manager. Due to her job, she has to wear nice business outfits. In general, she likes to go shopping, but only when she has time for it and this is seldom in her job. In order to this she tries to buy online. She knows her labels and her sizes. Mostly she buys basics, but sometimes she likes something new, special and individual. She can rarely convince her boyfriend to go shopping with her and he agree when they combine the shopping trip with a walk and a lunch in a nice restaurant.


Persona Steve, Age: 28

Use Pattern: Likes fashion and likes to wear fancy clothes

Demographic Group: Web designer, single/ male, likes travelling

Favourite Brands: Fred Perry, Ben Sherman, Urban Outfitters

Favourite Movie: Brazil

User of these devices: He has a Mac Book Air, Think Pad and an iPad

Profile: Steve is 28, is English, and lives in Berlin. He is a web designer and works as a freelancer. His German is not bad and he has a good network. Hence his every month income is good. Normally he spends his money for travelling and to going out with friends. He also likes, to buy fancy things especially clothes and sneakers. It is important for him to look trendy but individual. This is why, he checks the new trends and tries to find something which is trendy but not too common.

Possible product ideas deduced from the personas:

1. To buy online
2. A section with sale 
3. Local information sale in your area or you can buy this in your area
4. Seasonal trends 
5. Individual suggestion of clothing combinations 

Pruitt, J. & Tamara A., 2006: The Persona Lifecycle. Keeping People in Mind Throughout Product Design. San Francisco: Morgan Kaufmann Publishers.

Meaning of "intuitive"

Meaning of intuitive in the area of User Experience:

When you check the work "intuitive" on the internet, you can find synonyms such as emotional, subconscious or spontaneous. All these words describe something form inside a person. Just like we can´t describe an emotional, subconscious or spontaneous reaction, all these reactions are based on things we already learned from our environment. For the area of interaction design, this means, that orientation and  navigation structures have to be expected. For example, an familiar navigation or orientation structure or a suitable metaphor form the real world  (see also the post "How to deal with a fullness of information?").

Is it possible to break with an intuitive navigation or orientation structure?

According to Stapelkamp (2007, p.144) it is possible to break with a intuitive navigation or orientation structure depending on the aim. If the aim is to confuse, such as in adventure games, it is possible to offer an unexpected navigation or orientation structure.


Stapelkamp, T., 2007. Screen- und Interfacedesign: Gestaltung und Usability für Hard- und Software. Berlin: Springer-Verlag.