Windows 8 Concept Design Project - HCI Course Assignment (Coursera.org) Task: Use the power of new technology to create an application or service that facilitates personal or social behavior change. Mission: Enhance TV experience by creating a shopping application that interacts with the TV programming while leveraging Microsoft Ecosystem Please comment your thought on the project as it would be really appreciated Thanks

1. Task & Mission
Task:
Use the power of new technology to create an application or service
that facilitates personal or social behavior change.
Mission:
Enhance TV experience by creating a shopping application that
interacts with the TV programming while leveraging Microsoft
Ecosystem

2. Persona Name: Caroline
Role or Job Graphic Designer Full
Time and Freelancer
Key Characteristics
Title:
“I watch TV for complete relaxation and clear • Watch TV on bed most of the time
my mind from the working day but I’m also • Multi-task 50% of the time
connected through my Tablet or Smartphone • Use tablet or phone to get info about
so to browse Internet about the program I’m the program she is watching. Browse
watching or check my Facebook" Google
• Use FiOS, Xbox TV Guide, VOD and
Age 35 Gender: Female DVR only (don’t know others)
Frustrations and Pain Points Needs Other applications
• Identify things they like when
• Doesn’t need advertising blocks - watching a program
skip by using DVR • Doesn't have reminders on what • E! TV Channel App
• Doesn’t like to move from a they like • Xbox Console
comfortable position to do a task or • Identify items that a friend/family • Samsung Smart TV
look for a device might like – wants to share or as a • FiOS TV/Internet/Phone provider
• Doesn't like to interrupt her gift
programming • Doesn’t know which of her friends
have liked or purchased

3. User Story – Current Experience
Caroline finishes her evening household chores grabs her tablet and phone and goes to
the bedroom. Turns on the TV and the Xbox/STB where she can watch the E! program she
likes or recorded on the DVR. Caroline started watching and “Sarah Jessica Parker”
(actress Sex on the City) appears on a “in Vogue event” with a blue purse. Caroline
grabbed her tablet and searched for: “sarah jessica parker blue handbag in vogue event”
Then she clicked on the “images” results and there it was the event pictures. She scrolled
up and down and the 1st image of the result page and there was a close up picture of
Jessica with the handbag. Caroline clicked on it and landed on the image, closed the
image pop up and landed on handbag.com
(http://www.handbag.com/handbags/news/a443260/spotted-sarah-jessica-parkers-blue-
velvet-fendi-bag.html)
She learned that it was a “Fendi blue and gold baguette bag” so she then searched for this
on the Handbag.com Search box. The result was the same article she just read. So she
searched again with the term: “blue and gold handbag” The results didn’t show any
blue/gold handbag so she stopped searching, rewind the program she missed while
searching and continue watching TV

4. User Story – Current Experience -
Screenshots
1 2 5
3
4

5. User Story – Windows App (see Storyboard next slide)
Caroline finishes her evening household chores grabs her tablet and phone and go esto the
bedroom. Turns on the TV and the xbox where she can watch her favorite E! program
Caroline opens the Windows App (WA). The WA (1) connects to the WiFi, Geo-locates (Audio
function starts also). The WA connected to the Xbox/STB wirelessly1 identifies that she is watching “In
Vogue” and connects to Facebook (previously set up)
Caroline started watching and “Sarah Jessica Parker” appears on screen with a blue purse on a “In
Vogue event”. Caroline noted that the WA (2) shows a picture and the description: “Sarah Jessica
Parker blue handbag in vogue the Editor’s Eye” There were also another items such as her “Rust
colored floral print dress” and “a pair of lavender colored Jean-Michel Cazabat ‘Emma’ Python
Pumps”
She reads the short description and clicks on the image. (3) The landing page shows:
•Close up picture of the hand bag
•Full picture of Sarah Jessica Parker with the purse, longer description of the bag
•The bag shopping options: (1) Original Fendi, (2) similar alternatives options available in retailer
stores (Online and Brick & Mortar - near to her house)
•Small gallery of the other Jessica’s items
• (4) Friends who has liked this product
She decides to see if any of her friends has seen or liked the handbag before. Then she tags the bag
on her (5) Pinterest “Handbag” Board and closed the app
After she finishes the program she decides to purchase the handbag. She accesses the WA and her
(6) “Recent History”. On her history, she chooses alternative 2 that is available in the online store
Zappos (http://www.zappos.com/bags) she clicks and lands on the site in order to purchase the item

6. User Storyboard – Windows App

7. System Map– Windows App

8. Requirements Sheet (MVP) - WA
Business User Technical
Requirement Description
Priority Priority Feasibility
High Medium Low
Connects to WiFi Y
Connects to
Y
Xbox/STB
Geo-location Y
Audio recognition Y
Connects to
Y
Facebook
Identifies program
picture and Y
descriptions
Shopping
alternatives and Y
links
Social media
integration (i.e. Y
Pinterest)
Save Recent
Y
History

9. Sitemap

10. App Map IA – 12/28/12
Marketplace
Windows Store Card
Download in Process
Application
Plash/Loading New User Detail Page Detail Page
0.1 Sign Up
Create Account 0.3 Error/Cancel/
Charm Confirmation 0.3.1
Windows /
Field Windows Detail Page Detail Page
Phone
Search 0.7 Login/Sign Up Login Error 0.4
Charm 0.2
Windows / App
Bar Windows
Phone Detail Page
Profile 0.8 Panorama Main
Forgot Recipient
Charm
Windows / App Section Section
User/Pass 0.5 Email 0.6
Bar Windows Hub Page
Phone Page Page
Share 0.9 Products Recent Discover
1.0 History 2.0 3.0
Panorama – Detail Page Panorama – Detail Page
Picture & Picture & Picture & Picture &
Section List Section List
Copy Copy Copy Copy
Product Main Program / Shopping Alt Details Featured Recommended Shopping Alt Details
Picture 1.1 Event 1.2 1.3 1.4 3.1 3.2 1.3 1.4

11. Wireframes

12. Situation/Environment

13. Login

14. Login/Sign Up - 0.2
Shop
In
TV App
Login New User?
Email
Email (youremail@hotmail.com)
Password
Password
Forgot User/Password? Login

15. Login/Sign Up - 0.2
Shop
In
TV App
Login New User?
Email
Email (youremail@hotmail.com)
Password
Password
Forgot User/Password? Login

16. Login/Sign Up - 0.2
Shop
In
TV App
Email
Login (youremail@hotmail.com)
Email New User?
Password
Password
Forgot User/Password?
Login
q w e r t y u i o p x
a s d f g h j k l ' Enter
z x c v b n m b n m
&123 Ctrl ☺ space < >

17. Login/Sign Up - 0.2
Shop
In
TV App
Email
Login (youremail@hotmail.com)
Email New User?
Password
Password
Forgot User/Password?
Login
q w e r t y u i o p x
a s d f g h j k l ' Enter
z x c v b n m b n m
&123 Ctrl ☺ space < >

18. Panorama Main

19. Panorama Main
Shop
In
TV App
Featured Program Recent History (List)
Item Title: 1 Item Title: 1
Item Subtitle: 1
Item Subtitle: 1
Item Description: At vero eos et Item Description: At vero eos et accusam et justo
accusam et justo duo dolores et et ea rebum. Stet clita kasd gubergren, no sea tak
ea rebum. Stet clita kasd sanctus est Lorem …
gubergren, no sea takimata
sanctus est Lorem …
Item Title: 2
Sarah Jessica Parker's blue and Item Subtitle: 2
gold baguette bag by Fendi
Item Description: At vero eos et accusam et justo
et ea rebum. Stet clita kasd gubergren, no sea tak
sanctus est Lorem …
Item Title: 3
Item Subtitle: 3
Item Description: At vero eos et accusam et justo
Item Title: 4 et ea rebum. Stet clita kasd gubergren, no sea tak
HBO's In Vogue: The Editor's Eye
sanctus est Lorem …
Screening At The Met
Item Subtitle: 4

20. Panorama Main
Shop
In
TV App
Featured Program Recent History (List)
Item Title: 1 Item Title: 1
Item Subtitle: 1
Item Subtitle: 1
Item Description: At vero eos et Item Description: At vero eos et accusam et justo
accusam et justo duo dolores et et ea rebum. Stet clita kasd gubergren, no sea tak
ea rebum. Stet clita kasd sanctus est Lorem …
gubergren, no sea takimata
sanctus est Lorem …
Slide
Item Title: 2
Sarah Jessica Parker's blue and Item Subtitle: 2
gold baguette bag by Fendi
Item Description: At vero eos et accusam et justo
et ea rebum. Stet clita kasd gubergren, no sea tak
sanctus est Lorem …
Item Title: 3
Item Subtitle: 3
Item Description: At vero eos et accusam et justo
Item Title: 4 et ea rebum. Stet clita kasd gubergren, no sea tak
HBO's In Vogue: The Editor's Eye
sanctus est Lorem …
Screening At The Met
Item Subtitle: 4

21. Panorama Main
Shop
In
TV App
Recent History (List) Discover (List)
Featured
Item Title: 1
Item Subtitle: 1
Item Description: At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem …
Item Title: 1 Item Title: 3 Item Title: 1
Item Title: 2
Item Subtitle: 2
Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1
Item Description: At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata
Recommended
sanctus est Lorem …
Item Title: 3
Item Subtitle: 3
Item Description: At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata Item Title: 2 Item Title: 4 Item Title: 2
sanctus est Lorem …
Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2

22. Panorama Main
Shop
In
TV App
Discover (List) Featured Program
Featured Item Title: 1
Item Subtitle: 1
Item Description: At vero eos et
accusam et justo duo dolores et
ea rebum. Stet clita kasd
gubergren, no sea takimata
sanctus est Lorem …
Item Title: 1 Item Title: 3 Item Title: 1
Sarah Jessica Parker's blue and
Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1 gold baguette bag by Fendi
Recommended
Item Title: 4
Item Title: 2 Item Title: 4 Item Title: 2
HBO's In Vogue: The Editor's Eye
Screening At The Met
Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4

23. Navigate to Product Page

24. Panorama Main
Shop
In
TV App
Discover (List) Featured Program
Featured Item Title: 1
Item Subtitle: 1
Item Description: At vero eos et
accusam et justo duo dolores et
ea rebum. Stet clita kasd
gubergren, no sea takimata
sanctus est Lorem …
Item Title: 1 Item Title: 3 Item Title: 1
Sarah Jessica Parker's blue and
Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1 gold baguette bag by Fendi
Recommended
Item Title: 4
Item Title: 2 Item Title: 4 Item Title: 2
HBO's In Vogue: The Editor's Eye
Screening At The Met
Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4

25. Product Main
Shop
In HBO’s Editors Eye – Sarah Jessica Parker
TV App
Fendi Blue & Gold Hand bag HBO’s Editors Eye 2012
Item Title: 1 Featured
Item Subtitle: 1
Item Description: At vero eos et
accusam et justo duo dolores et
ea rebum. Stet clita kasd
gubergren, no sea takimata
sanctus est Lorem …
Item Title: 1 Item Title: 3 Item Title: 1
Sarah Jessica Parker's blue and
gold baguette bag by Fendi Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1
Item Title: 4
Item Title: 2 Item Title: 4 Item Title: 2
HBO's In Vogue: The Editor's Eye
Screening At The Met
Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2

26. Product Main
Shop
In HBO’s Editors Eye – Sarah Jessica Parker
TV App
Fendi Blue & Gold Hand bag HBO’s Editors Eye 2012
Item Title: 1 Featured
Item Subtitle: 1
Item Description: At vero eos et
accusam et justo duo dolores et
ea rebum. Stet clita kasd
gubergren, no sea takimata
sanctus est Lorem …
Slide
Item Title: 1 Item Title: 3 Item Title: 1
Sarah Jessica Parker's blue and
gold baguette bag by Fendi Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1
Item Title: 4
Item Title: 2 Item Title: 4 Item Title: 2
HBO's In Vogue: The Editor's Eye
Screening At The Met
Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2

27. Product Main
Shop
In HBO’s Editors Eye – Sarah Jessica Parker
TV App
HBO’s Editors Eye 2012 Shopping Outlets
Featured
Item Title: 1
Item Subtitle: 1
Item Description: At vero eos et acc
et ea rebum. Stet clita kasd gubergr
sanctus est Lorem …
Item Title: 1 Item Title: 3 Item Title: 1
Item Title: 2
Item Subtitle: 2
Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1
Item Description: At vero eos et acc
et ea rebum. Stet clita kasd gubergr
sanctus est Lorem …
Item Title: 3
Item Subtitle: 3
Item Description: At vero eos et acc
Item Title: 2 Item Title: 4 Item Title: 2 et ea rebum. Stet clita kasd gubergr
sanctus est Lorem …
Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2

28. Product Main
Shop
In HBO’s Editors Eye – Sarah Jessica Parker
TV App
Shopping List Comments / Review
Item Title: 1 Item Title: 1
Item Subtitle: 1 Item Subtitle: 1
Item Description: At vero eos et accusam et justo duo dolores Item Description: At vero eos et acc
et ea rebum. Stet clita kasd gubergren, no sea takimata et ea rebum. Stet clita kasd gubergr
sanctus est Lorem … sanctus est Lorem …
Item Title: 2 Item Title: 2
Item Subtitle: 2 Item Subtitle: 2
Item Description: At vero eos et accusam et justo duo dolores Item Description: At vero eos et acc
et ea rebum. Stet clita kasd gubergren, no sea takimata et ea rebum. Stet clita kasd gubergr
sanctus est Lorem … sanctus est Lorem …
Item Title: 3 Item Title: 3
Item Subtitle: 3 Item Subtitle: 3
Item Description: At vero eos et accusam et justo duo dolores Item Description: At vero eos et acc
et ea rebum. Stet clita kasd gubergren, no sea takimata et ea rebum. Stet clita kasd gubergr
sanctus est Lorem … sanctus est Lorem …

29. Product Main
Shop
In HBO’s Editors Eye – Sarah Jessica Parker
TV App
Comments / Review Fendi Blue & Gold Hand bag
Item Title: 1 Item Title: 1
Item Subtitle: 1
Item Subtitle: 1
Item Description: At vero eos et accusam et justo duo dolores Item Description: A
et ea rebum. Stet clita kasd gubergren, no sea takimata accusam et justo du
sanctus est Lorem … ea rebum. Stet clita
gubergren, no sea t
sanctus est Lorem …
Item Title: 2
Item Subtitle: 2
Sarah Jessica Parker's blue and
gold baguette bag by Fendi
Item Description: At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem …
Item Title: 3
Item Subtitle: 3
Item Description: At vero eos et accusam et justo duo dolores
et ea rebum. Stet clita kasd gubergren, no sea takimata Item Title: 4
sanctus est Lorem … HBO's In Vogue: The Editor's Eye
Screening At The Met
Item Subtitle: 4

30. Product Page
Phone Version

31. Product Main - Phone
3G 8:00 3G 8:00
Shop Shop
In In
TV App TV App
Fendi Blue & Gold Hand bag HBO HBO’s Editors Eye 2012 Sho
Featu Featured
Item Title: 1
Item Subtitle: 1
Item
Description: At
vero eos et
accusam et
Sarah Jessica
Parker's blue and
gold baguette bag
Item Subtitle: 1 Item Subtitle: 1
by Fendi
HBO's In Vogue: The Item Title: 2
Item Title: 2
Editor's Eye
Screening At The
Met
Item Subtitle: 2 Item Subtitle: 2

32. Share Charm

33. Share Charm
Shop
In HBO’s Editors Eye – Sarah Jessica Parker
TV App
Fendi Blue & Gold Hand bag HBO’s Editors Eye 2012
Item Title: 1 Featured
Item Subtitle: 1 Search
Item Description: At vero eos et
accusam et justo duo dolores et
ea rebum. Stet clita kasd
gubergren, no sea takimata
sanctus est Lorem …
Share
Item Title: 1 Item Title: 3
SlideItem Title: 1
Sarah Jessica Parker's blue and
gold baguette bag by Fendi Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1
Start
Devices
Item Title: 4
Item Title: 2 Item Title: 4 Item Title: 2
HBO's In Vogue: The Editor's Eye Settings
Screening At The Met
Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2

34. Share Charm
Shop
In HBO’s Editors Eye – Sarah Jessica Parker
TV App
Fendi Blue & Gold Hand bag HBO’s Editors Eye 2012
Item Title: 1 Featured
Item Subtitle: 1 Search
Item Description: At vero eos et
accusam et justo duo dolores et
ea rebum. Stet clita kasd
gubergren, no sea takimata
sanctus est Lorem …
Share
Item Title: 1 Item Title: 3 Item Title: 1
Sarah Jessica Parker's blue and
gold baguette bag by Fendi Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1
Start
Devices
Item Title: 4
Item Title: 2 Item Title: 4 Item Title: 2
HBO's In Vogue: The Editor's Eye Settings
Screening At The Met
Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2

35. Share Charm
Shop
In HBO’s Editors Eye – Sarah Jessica Parker Share
TV App
Fendi Blue & Gold Hand bag HBO’s Editors Eye 2012
Mail
Item Title: 1 Featured
Item Subtitle: 1
Item Description: At vero eos et
accusam et justo duo dolores et
ea rebum. Stet clita kasd
gubergren, no sea takimata
sanctus est Lorem … Facebook
Item Title: 1 Item Title: 3 Item Title: 1
Sarah Jessica Parker's blue and
gold baguette bag by Fendi Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1
Twitter
Google+
Item Title: 4
Item Title: 2 Item Title: 4 Item Title: 2
HBO's In Vogue: The Editor's Eye
Screening At The Met
LinkedIn
Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2

36. Share
Phone Version

37. Product Main - Phone
3G 8:00 3G 8:00
Shop Shop
In In
TV App TV App
Fendi Blue & Gold Hand bag HBO Fendi Blue & Gold Hand bag HBO
Featu
Item Title: 1 Item Title: 1
Item Subtitle: 1 Item Subtitle: 1
Item Item
Description: At Description: At
vero eos et vero eos et
accusam et accusam et
Sarah Jessica Sarah Jessica
Parker's blue and Parker's blue and
gold baguette bag gold baguette bag
Item Subtitle: 1 Item Subtitle: 1
by Fendi by Fendi
Slide
HBO's In Vogue: The HBO's In Vogue: The
Item Title: 2 Item Title: 2
Editor's Eye Editor's Eye
Screening At The Screening At The
Met Met
Item Subtitle: 2 Item Subtitle: 2
Like Share Save

38. Product Main - Phone
3G 8:00 3G 8:00
Share
Shop Share
Shop
In In
TV App Blue & Mail
Fendi TV AppGold Hand bag HBO
Mail
Fendi Blue & Gold Hand bag HBO Item Title: 1
Featu Item Subtitle: 1
Item Title: 1 Item
Facebook
Item Subtitle: 1 Description: At
Item Item Title: 3 vero eos et
Facebook
Description: At accusam et
Slide
Item Title: 3 vero eos et
Item Subtitle: 3
accusam et Sarah Jessica
Item Subtitle: 3 Parker's blue and
Sarah Jessica gold baguette bag
Twitter
Parker's blue and by Fendi
gold baguette bag
Item Subtitle: 1
Twitter
by Fendi
Google+
Item Title: 4
Google+
Item Title: 4 HBO's In Vogue: The
Editor's Eye Subtitle: 4
Item
Screening At The
HBO's In Vogue: The
Item Title: 2 Met
Editor's Eye Subtitle: 4
Item
Screening At The
LinkedIn
Met
Item Subtitle: 2
LinkedIn

39. Purchase Product

40. Product Main
Shop
In HBO’s Editors Eye – Sarah Jessica Parker
TV App
Shopping List Comments / Review
Item Title: 1 Item Title: 1
Item Subtitle: 1 Item Subtitle: 1
Item Description: At vero eos et accusam et justo duo dolores Item Description: At vero eos et acc
et ea rebum. Stet clita kasd gubergren, no sea takimata et ea rebum. Stet clita kasd gubergr
sanctus est Lorem … sanctus est Lorem …
Item Title: 2 Item Title: 2
Item Subtitle: 2 Item Subtitle: 2
Item Description: At vero eos et accusam et justo duo dolores Item Description: At vero eos et acc
et ea rebum. Stet clita kasd gubergren, no sea takimata et ea rebum. Stet clita kasd gubergr
sanctus est Lorem … sanctus est Lorem …
Item Title: 3 Item Title: 3
Item Subtitle: 3 Item Subtitle: 3
Item Description: At vero eos et accusam et justo duo dolores Item Description: At vero eos et acc
et ea rebum. Stet clita kasd gubergren, no sea takimata et ea rebum. Stet clita kasd gubergr
sanctus est Lorem … sanctus est Lorem …

41. Store Site / App

42. Microsoft Ecosystem

43. Microsoft Ecosystem
Shop
In
TV App
Fendi Blue & Gold HBO’
Item
Subtitl
e:
1eos
et
Sarah Jessica Parker's
blue and gold baguette
bag by Fendi
HBO's In Vogue: The
Editor's Eye Screening
At The Met
Item Item
Title: 1
Item Subtitle: 1
Title: 3
Item Subtitle: 3
Shop
In HBO’s Editors Eye – Sarah Jessica Parker 0 G 526
TV App
Fendi Blue & Gold Hand bag HBO’s Editor
Item Title: 1
Sarah Jessica Parker's HBO's In Vogue: The Editor's
Item Title: 4
blue and gold baguette Eye Screening At The Met Item Subtitle: 1
bag by Fendi Item Subtitle: 4
Item Title: 4 Item Title: 4 Item Title: 2
HBO's In Vogue: The Editor's
Eye Screening At The Met
Item Subtitle: 2
Item Subtitle: 4 Item Subtitle: 4
A Select Y Search