Prototyping

prototyping and scripting

W&Match

CHENG PengHUANG HeGU PanLIU YamingZHU Yibing

11年2月19日星期六

introductionW&Match is a application that can facilitate the user to chose a good hair style for them, it base on the windows phone 7 guideline and associate with face position reorganization technology and LBS, the user just select few of options, tilt angle and shake the mobile phone to quickly chose hair style on the mobile phone.




Alice is a fashion girl, she usually browses salon website sometimes for changing a hairstyle and sometimes just for selecting her favorites. She usually search hairstyle by the way scan hairstyle or face shape. By using w&match app she can take a photo and the system can find other users’ photo whose face shape match her face shape. And she can choose which one is her favorite. In other way, she scans the gallery and choose photos by several categories such as length, color and face shape, and then match the selected photos to choose favorites.

Scenario


文本

Site


Prototyping of your UI design

1



2



paper model


user test 1Through this step of paper prototype, we want to ensure that the user interface provided users with the appropriate capabilities to access and view the operation of the test object and ensure that objects within the UI function as expected requirements.


We did the paper prototype as the original UI design. This is a very important step, we set up the logic progress of our app.

But due to the limitation of paper prototype, we can’t understand real size of font or pictures and the real effect of final GUI. Moreover, the action script all basic on the guideline.


Red Threads of Windows Phone 7:

• Personal – your day, your way• Relevant – your people, your location• Connected – your stuff, your peace of mind

Metro


1) Clean, light, open, and fastIt is visually distinctive, contains ample white space, reduces clutter and elevates typography as a key design element.

2) Content, not chromeIt accentuates focus on the content that the user cares most about, making the product simple and approachable for everyone.

3) Integrated hardware and softwareHardware and software blend into each other and creates a seamless user experience from single-button access to Search, Start, Back and the camera to on-board sensor integration.

4) World-class motionThe Windows Phone 7 touch and gesture experiences on capacitive screens are consistent with Windows 7 on the desktop and include hardware-accelerated animations and transitions to enhance the userʼs experience at every turn.

5) Soulful and aliveA personalized, automatically updated view into the information that matters most to the user is enabled and brings to life a cinematic photo and video experience by having a fully integrated Zune media player experience.


Rationale of our UI design

Before we develop the User Interface of our W&Match application for Windows Phone 7, we did carefully study into the official “UI Design and Interaction Guide for Windows Phone 7”.

We tried to understand the Windows Phone 7 design philosophy and principles.

As we already know that, Metro is the design language for Windows Phone 7. Call it Metro because it’s modern and clean. It’s fast and in motion. It’s about content and typography. And it’s entirely authentic.

We developed the User Interface of W&Match based on and strictly observed the “Design Templates for Windows Phone 7”, but at the same time we applied it into an innovative and creative way to create the beautiful and comfortable user experience.


UI Design


user test 1user test 2


user test 1conclusion

The biggest acquirement of this project is that we have totally understood the fresh and advanced mobile phone

OS: Windows7. It has many different features from previous operation systems:

1. The guideline is pretty strict of both software and hardware. The advantages is ensuring the quality of the

unified interaction and visual experience. It reduces the development time, fund and manpower of the software

based on Win7 OS platform as well.2. Win7 pays more attention on expanding the limited space of the mobile phone UI space.

Firstly, the concept called Panorama is a new thinking of using the UI space of cell phone.

Secondly, there is no fixed status bar including time, battery and signal on Win7.

Finally, removing the soft “back” button on the top.

3. Benefit from XBox Live Service, the app sale system and gaming system of Win7 cell phone is very powerful, which can keep Win7 OS being latest.

Beside, in our application, we try to use the function of accelerometer sensor in some new ways.


Documents

Prototyping