1. prototyping and scripting
W&Match
CHENG Peng
HUANG He
GU Pan
LIU Yaming
ZHU Yibing
11 2 19

2. introduction
W&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.
11 2 19

3. 11 2 19

4. 11 2 19

5. Scenario
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.
11 2 19

6. Site
11 2 19

7. Prototyping of your UI design
1
11 2 19

8. Prototyping of your UI design
Prototyping of your UI design
2
11 2 19

9. paper model
11 2 19

10. user test 1
Through 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.
11 2 19

11. 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.
11 2 19

12. Metro Red Threads of Windows Phone 7:
• Personal – your day, your way
• Relevant – your people, your location
• Connected – your stuff, your peace of mind
11 2 19

13. 1) Clean, light, open, and fast
It is visually distinctive, contains ample white space, reduces clutter and elevates typography as a
key design element.
2) Content, not chrome
It accentuates focus on the content that the user cares most about, making the product simple and
approachable for everyone.
3) Integrated hardware and software
Hardware 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 motion
The 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 alive
A 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.
11 2 19

14. 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.
11 2 19

15. UI Design
11 2 19

16. user test 1
user test 2
11 2 19

17. user test 1
conclusion
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.
11 2 19