The document describes a mobile application called fPhoto designed to enhance the clothing search experience. fPhoto allows users to take photos of clothing with their mobile phone cameras and presents similar clothing images matched by color and pattern. It uses color histogram analysis to identify the main color and template matching to identify patterns. A field test was conducted where users took photos while shopping and viewed search results. The evaluation found fPhoto mostly achieved the desired operations but sometimes produced incorrect matches. Users enjoyed exploring many potential clothing options, similar to reading a fashion magazine. Future work areas include improving accuracy and adding recommendation and shopping features.

1. Designing Mobile Application to Enhance Search Experience of Clothing Jan 20th 2011 Takayoshi Hasegawa Keio Media Design

2. I designed the mobile application to enhance Search experience of Clothing.

3. Agenda Introduction Related Works Concept Design Process System Usage Research Questions & Evaluation Future Works

4. 1. Introduction Background

5. 1. Introduction Serendipity

6. Next Step Introduction Related Works Concept Design Process System Usage Research Questions & Evaluation Future Works

7. 2. Related Works Interaction Design for Searching Design of Query Interface Design in Mobile Search Application

8. 2. Related Works 1. Interaction Design for the Search This design tool is offered for experience design of “Search” and “Find”. User Experience Treasure Map by Peter Morville & Jeffry Callender (2009)

9. 2. Related Works 2. Design of Query Like.com is e-commerce webservice and has a function to search similar apparel goods from a image of goods. by Reya (2006)

10. 2. Related Works 3. Design of Device Interface This mobile service searches websites with taking a photographs. It can recognize text, landmarks, books, artworks, logos and so on. by Google (2009)

11. 2. Related Works fPhoto tried the interaction desgin of mobile media that search clothing with image query and find nice clothing.

12. Next Step Introduction Related Works Concept Design Process System Usage Research Questions & Evaluation Future Works

13. 3.Concept General Concept fPhoto is new mobile application to enhance a search experience for clothing.

23. 3.Concept General Concept fPhoto is new mobile application to enhance a search experience for clothing.

24. 3.Concept fPhoto Application fPhoto saves images of clothing with mobile phone camera.

25. 3.Concept fPhoto Application fPhoto Application presents much similar images of clothing in the color and the pattern.

26. 3.Concept fPhoto Server fPhoto Server gets the query of image of clothing and judges the features in the color and the pattern. fPhoto Server searches fashion web services with the queries of the color and the pattern. fPhoto Server sends search results in fashion web services to fPhoto Application.

27. Next Step Introduction Related Works Concept Design Process System Usage Research Questions & Evaluation Future Works

28. 4. Design Process Design Methods In designing fPhoto, I refered to "About Face 3" mainly. This books edits methods of goal directed design that is valid for interaction design.

29. 4. Design Process A Flow of Design Process 1 5 3 Persona & Scenario 5 Model Analyses Field Work 2 4 6 Goals, Requirements & Mental Model Sketching & Prototyping Thick Description

30. 4. Design Process Field Work, Thick Description & 5 Models Analyses

31. 4. Design Process User’s Goals Experience Goal: Enjoying what check much clothing. End Goal: Thinking own coordinate fitting for oneself. Life Goal: Becoming cute and cool by oneself.

32. 4. Design Process Requirements ・fPhoto can present many images of clothing. ・fPhoto can present various clothing with user's choice. ・fPhoto can judge the color and the pattern of clothing.

33. 4. Design Process Mental Model fPhoto user becomes more cute and cool just like after reading fashion magazine's interesting pages by using fPhoto in the window-shopping.

34. 4. Design Process Persona & Scenario

35. 4. Design Process Sketching & Prototyping

36. Next Step Introduction Related Works Concept Design Process System Usage Research Questions & Evaluation Future Works

37. 5. System Whole System Text query of color and pattern Image(jpg) & twitter account URL of search results Image(binary) & twitter account

38. 5. System Color Histogram: Judge a Color 1) Reducing 256 colors to 8 colors 2) Calculating the number of pixels for each color in the chest area. 3) Judging main color from the color of most pixels

39. 5. System Template Matching: Judge a pattern Template Matching is a information processing to search for a prepared template image from all over the reference image.

40. 5. System Template Matching: Judge a pattern

41. Next Step Introduction Related Works Concept Design Process System Usage Research Questions & Evaluation Future Works

42. 6. Usage Login

43. 6. Usage Take a Photo of Clothing

44. 6. Usage Take a Photo of Clothing

45. 6. Usage

46. 6. Usage Select a Photo of Clothing

47. 6. Usage Select a Photo of Clothing

48. 6. Usage Fashion Search Upload Fashion Search & Tweet

49. 6. Usage Wait a moment…

50. 6. Usage You can find similar clothes

51. 6. Usage

52. Next Step Introduction Related Works Concept Design Process System Usage Research Questions & Evaluation Future Works

53. 7. Research Questions & Evaluation Research Method Carried out qualitative research. Analyze a participant observation and a interview in field test with qualitative cording. Research Questions ・Whether fPhoto works well or not. ・Whether fPhoto output is suitable for the query or not. ・Whether user takes photo in the window-shopping or not. ・Whether user searches a lot of clothing one after another or not.

54. 7. Research Questions & Evaluation Field Test Held a field test at December 13th 2010. Test users are women who are using iPhone usually. 南 夏帆Kaho Minami (24) Job: Nail Coordinator Goal： “I wanna find something cute dress to wear at Bo-Nen-Kai (Year end party)” Place：Shibuya 109 藤崎 茜 Fujisaki Akane（28） Job: Publisher Goal： “I wanna find something cute and inexpensive dress to wear at Bo-Nen-Kai (Year end party)” Place ：GAP Shinjuku

55. 7. Research Questions & Evaluation Evaluation fPhoto achieved required operations as taking photo, upload, and search result.

56. 7. Research Questions & Evaluation Evaluation fPhoto showed sometimes appropriate results, and sometimes wrong. (Query) (Search Result) (Query) (Search Result)

57. 7. Research Questions & Evaluation Evaluation fPhoto showed sometimes appropriate results, and sometimes wrong. (Query) (Search Result) (Query) (Search Result)

58. 7. Research Questions & Evaluation Evaluation Users were taking photos while shopped around.

59. 7. Research Questions & Evaluation Evaluation Users were flicking screen and looking around search results.

60. 7. Research Questions & Evaluation Evaluation Users looked around photos pleasantly. ->Achieved Experience Goal Users found something they want to wear in appropriate search result. ->Achieved End Goal Usages seemed like reading fashion magazines. ->I inferred the Mental Model was formed within this short evaluation.

61. 7. Research Questions & Evaluation Conclusion fPhoto provides users exciting experiences to show many photos that might be interested in.

62. Next Step Introduction Related Works Concept Design Process System Usage Research Questions & Evaluation Future Works

63. 8. Future Works Future Works ・Long-term research to evaluate a achievement of life goal ・Including photos that user take in search results ・Development of original page to show similar fashion ・Adding a search box with text query ・Improvement of usability ・Changing image processing from in RGB color space to HSV color space ・Changing image processing from template matching to other methods

64. 8. Future Works Future Works ・Conducting online shop from fPhoto ・Adding a management with tagging ・Recommendation of multi coordinate with corrective inteligence

65. Thank You