Style Book the Process Report
Hong Kong Polytechnic Unversity MDes Interaction Design CHAN Shek Chuen, Brian CHOI Ch Kit, Jackson YEN Wei Chi, Edward
1
Content
First published 2011 (c) 2011 Copyright Designed and produced by Jackson CHOI, Brian CHAN, Edward YEN
All right reserved. No part of this report may be reprinted or reproduced or utilized in any form or by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying and recording, or in any information storage or retrieval system, without permission in writing from the authors.
SD5509 Prototyping and Scripting
01:: 02:: 03:: 04:: 05:: 06:: 07:: 08:: 09:: 10:: 11::
Introduction Don’t just look, Be Inspired Project Objective Concept Prototyping of UI design Experience Strategy Use Case Diagram User Interface Design Conclusion References Appendix
MDes Interaction Design 2
3
01:: Introduction There are websites and Phone Apps that facilitates young people sharing what is hot and ip on the Web, and the target users are grown up in the digital and mobile environment. In the world of social media, young people are spending most of their time establishing their identity and self image through posting of their photos and thoughts, and expect the feedbacks from people out there. This behaviour is also reflected in real life where they will meet friends in person. They are very much concerned about how they are seen by others.
•
Young generation is very much attached to social media and networks
•
Young people is interested in how others live their life and create their styles (culture of to-see and to- be-seen)
•
Young people are born in mobile world.
•
Mobile device becomes the hub of human relationship.
With these characterisitcs in mind, this project is to explore the opportunity of creating a phone Apps associating to enhancement of fashion sense, development of self confidence and establishment of personal style for the young generation.
4
5
02::
Don’t just look, ...................Be Inspired To know what is happening out there, background research have been done about the most popular social media fashion sites in the Internet so as to understand how young people are using those websites, and in other words, to analysis what are the opportunity for our project.
6
7
What is out there •
User-friendly platform for photo sharing
•
Can build up identities that they are proud of and others can appreciate
•
Encourage comments and sharing among fashion goers
•
As a guide for shopping with necessary information
What is lacking
8
•
Just see as an image bank, but lack of interface for easy comparison of similar outfits, and how people mix and match creatively.
•
Can see what is out there, but NO linkage to what one already got.
•
Cannot adopt directly onto mobile device
9
Google Goggle This is an image recognition application for mobile phone. It is used to match and search for images from photos taken by your mobile devise. It provides online information of your photo, for example Landmarks, Books, Artwork and so on.
Technology trends Nowadays mobile devise is becoming more and more powerful. In our particular case, the camera quality of our mobile phone is good. Taking snap shot is much easier and good enough for sharing the style on mobile devices. And for the ultra speed in mobile internet service, it easily facilitates everyone to go online.
GazoPa This is an image search engine that search for similar images. Upload a photo or draw a picture and it will show you visually similar images on the web. The object recognition technology and auto tracking for similar pictures is quite mature, we have tried to search a girl picture on GazoPa, and the result is quite good for fashion.
10
11
03:: Project Objective
To provide Personalized Fashion Inspiration through the creativity of Others 12
13
04:: Concept The concept is for people to see how other people dress with the similar clothes they have or they want to have. They can also upload their own styles to inspire and get feedback from other people. Through the research we found out that when people are matching their clothes, the first thing they will consider is the color. We designed a rainbow colorful spectrum for users to start exploring. When user wants to upload their photo, they can choose from their album or take a photo right away with their mobile phone and upload it onto Style Book. Collecting other people’s style to my favorite allows user to review the styles in any time and also to associate them to what they have in their wardrobe. The ideas is to create a platform for users to actually get inspiration from the creativity of other people out there of how they can do better styling and matching with what they already have.
14
15
05:: Prototyping of UI design
Low-fidelity Paper Prototype version 01
16
17
Internal Testing •
Need exploration of flexible search with Color spectrum
•
S hould allow sorting of photos
•
Refine process and flow of application
18
19
Low-fidelity Paper Prototype version 02
20
21
User Testing •
Change “Photo Album” to “MyAlbum”
•
Need to confirm photo upload
•
Need clear indication for sorting methods
•
Need to show delete buttons for confirmation
•
Easily understand how to use the User Interface
•
Very satisfy with the task flow
22
23
06:: Experience Strategy
Experience Strategies
24
{
1. Easy to use and seamlessly align with how I use my mobile 2. Visually inspired from creative styles out there while I am moving around 3. Can compare and get inspired of better use of similar items in my wardrobe 4. Easily share different views and opinions
25
07:: Use Case Diagram
There are two levels in our diagram; the first level is about the entire different participant of our system, the second level is mainly about the user experience. At the first level, it shows users, administrator and developer involving in the system. Users browse and provide all the material content. Administrator manages the uploaded content, such as block the photo that include illegal message. And also there is a slot for developer to modify and update the system.
26
The second level of the diagram is about all the user activities. We intend to design an easy manipulating and browsing experience. This shows whatever users intend to do, it would also go to browse in the photo database. The basic structure will be the same, but the content is different. Here is a scenario. When user go shopping, and saw a jacket that he liked a lot, but he had no idea how to match with his style. He wanted to see different styles from other people, therefore he took a picture of the jacket and uploaded to StyleBook that automatically matched with similar styles. Finally he got an inspiration when he browsed on the auto matching results.
27
08:: User Interface Design
Picture contain basic information of comment and favorite for comparison
28
View comments and give feedback for quick sharing
View one’s favorite photos and styles for inspiration
Color spectrum show up in explore screen
Expand color range by swiping on favorite color
Photo uploaded by User. Photos can be sorted by upload-time or by ranking of favorite
Change Profile picture View activity history Logout
User can upload photo from My Album or by taking new picture to share with other users and get feedback
29
09:: Conclusion Designing a phone application is different than designing a website. The different is that the screen is much smaller, it is held on hands, with multi-touch input method and gesture recognition acceleratometer, etc. For these factors, we cannot design too complicated system which has too many buttons. How to keep it simple becomes the biggest challenge for us. Using low fidelity prototype for user testing gives us useful feedback to refine the app especially the system logic, name of the function and the input gesture to make it more user-friendly. High fidelity prototype shows the user interface style of how we color the icon and design the background to make the app looks better. At last, we successfully transfer the app to iPhone4 and test on it. Due to the former testing, the system runs well.
30
•
Whole work flow can be done within one mobile device but the activity is linked to physical world
•
Easy-to-use direct manipulation UI design
•
Allow comparison of style to be more personal
•
There is still room for development about the usability of color spectrum for intuitive interaction.
31
10:: References
11:: Appendix
www.lookbook.nu/
Scripts
www.whowhatwear.com/website/home.php
main scripting for the prototype-rolling photos (Actionscript 3.0)
www.boutiques.com www.polyvore.com/ www.google.com/mobile/goggles/ www.gazopa.com/
package { import flash.display.DisplayObject; import flash.display.MovieClip; import flash.events.MouseEvent; import flash.events.Event; public class HtouchScroll{ public var tween:Number = 0; public var moveSetp:Number = 200; private var v_targetMC:MovieClip; private var v_maskMC:MovieClip; private var v_Lbnt:MovieClip; private var v_Rbnt:MovieClip; private var automask:Boolean = false; private var LimitLeft:Number; private var LimitRight:Number; private var toPositionX:Number; private var StartPositionX:Number; private var distance:Number; private var StopPos:Number; public function HtouchScroll(ScrollMC:MovieClip, MaskMC:MovieClip) { v_targetMC = ScrollMC ; v_maskMC = MaskMC ; StopPos = v_targetMC.x; v_maskMC.x = v_targetMC.x; v_maskMC.y = v_targetMC.y; distance = StopPos; LimitLeft = v_maskMC.x; LimitRight = v_maskMC.x - v_targetMC.width + v_maskMC.width; addEventListeners(); } private function addEventListeners() { v_targetMC.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown); v_targetMC.addEventListener(MouseEvent.MOUSE_UP,MouseUp); v_targetMC.addEventListener(MouseEvent.CLICK,MouseUp); v_targetMC.addEventListener(MouseEvent.ROLL_OUT, MouseUp);
32
33
v_targetMC.stage.addEventListener(Event.ENTER_FRAME, EnterFrame); } public function set autoMask(e:Boolean) { automask = e; if (automask){ v_targetMC.mask = v_maskMC; } } public function set LEFT(mc:MovieClip) { v_Lbnt = mc; v_Lbnt.addEventListener(MouseEvent.CLICK, Lbnt_Click); } public function set RIGHT(mc:MovieClip) { v_Rbnt = mc; v_Rbnt.addEventListener(MouseEvent.CLICK, Rbnt_Click); } public function reFresh() { distance = StopPos; LimitRight = v_maskMC.x - v_targetMC.width + v_maskMC.width; } private function Lbnt_Click(e:MouseEvent) { distance += moveSetp; } private function Rbnt_Click(e:MouseEvent) { distance -= moveSetp; }
} else { v_Lbnt.alpha = v_Rbnt.alpha=1; v_Lbnt.enabled = v_Rbnt.enabled = true; v_Lbnt.mouseChildren =v_Rbnt.mouseChildren= true; } v_targetMC.x += (distance-v_targetMC.x) * tween; } } }
private function MouseDown(e:MouseEvent) { v_targetMC.addEventListener(Event.ENTER_FRAME,onEnterFrames); StartPositionX = v_targetMC.stage.mouseX - v_targetMC.x; } private function MouseUp(e:MouseEvent) { v_targetMC.removeEventListener(Event.ENTER_FRAME,onEnterFrames); } private function onEnterFrames(e:Event) { toPositionX=v_targetMC.stage.mouseX; distance = toPositionX - StartPositionX; } private function EnterFrame(e:Event) { if (distance<=LimitRight ) { distance = LimitRight; v_Rbnt.alpha = 0.4; v_Rbnt.enabled = false; v_Rbnt.mouseChildren = false; } else if (distance>=LimitLeft) { distance = LimitLeft; v_Lbnt.alpha = 0.4; v_Lbnt.enabled = false; v_Lbnt.mouseChildren = false;
34
35
36