Windows 8 Concept Design Project

1,143 views

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,143
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Windows 8 Concept Design Project

  1. 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. 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 • Doesnt 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 • Doesnt like to interrupt her gift programming • Doesn’t know which of her friends have liked or purchased
  3. 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. 4. User Story – Current Experience -Screenshots 1 2 5 3 4
  5. 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. 6. User Storyboard – Windows App
  7. 7. System Map– Windows App
  8. 8. Requirements Sheet (MVP) - WA Business User Technical Requirement Description Priority Priority Feasibility High Medium LowConnects to WiFi YConnects to YXbox/STBGeo-location YAudio recognition YConnects to YFacebookIdentifies programpicture and YdescriptionsShoppingalternatives and YlinksSocial mediaintegration (i.e. YPinterest)Save Recent YHistory
  9. 9. Sitemap
  10. 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. 11. Wireframes
  12. 12. Situation/Environment
  13. 13. Login
  14. 14. Login/Sign Up - 0.2ShopInTV App Login New User? Email Email (youremail@hotmail.com) Password Password Forgot User/Password? Login
  15. 15. Login/Sign Up - 0.2ShopInTV App Login New User? Email Email (youremail@hotmail.com) Password Password Forgot User/Password? Login
  16. 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. 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. 18. Panorama Main
  19. 19. Panorama Main Shop In TV AppFeatured 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 Parkers 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 HBOs In Vogue: The Editors Eye sanctus est Lorem … Screening At The Met Item Subtitle: 4
  20. 20. Panorama Main Shop In TV AppFeatured 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 Parkers 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 HBOs In Vogue: The Editors Eye sanctus est Lorem … Screening At The Met Item Subtitle: 4
  21. 21. Panorama Main Shop In TV AppRecent 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. 22. Panorama Main Shop In TV AppDiscover (List) Featured ProgramFeatured 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 Parkers blue and Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1 gold baguette bag by FendiRecommended Item Title: 4 Item Title: 2 Item Title: 4 Item Title: 2 HBOs In Vogue: The Editors Eye Screening At The Met Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4
  23. 23. Navigate to Product Page
  24. 24. Panorama Main Shop In TV AppDiscover (List) Featured ProgramFeatured 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 Parkers blue and Item Subtitle: 1 Item Subtitle: 3 Item Subtitle: 1 gold baguette bag by FendiRecommended Item Title: 4 Item Title: 2 Item Title: 4 Item Title: 2 HBOs In Vogue: The Editors Eye Screening At The Met Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4
  25. 25. Product Main Shop In HBO’s Editors Eye – Sarah Jessica Parker TV AppFendi 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 Parkers 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 HBOs In Vogue: The Editors Eye Screening At The Met Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2
  26. 26. Product Main Shop In HBO’s Editors Eye – Sarah Jessica Parker TV AppFendi 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 Parkers 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 HBOs In Vogue: The Editors Eye Screening At The Met Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2
  27. 27. Product Main Shop In HBO’s Editors Eye – Sarah Jessica Parker TV AppHBO’s Editors Eye 2012 Shopping OutletsFeatured 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. 28. Product Main Shop In HBO’s Editors Eye – Sarah Jessica Parker TV AppShopping 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. 29. Product Main Shop In HBO’s Editors Eye – Sarah Jessica Parker TV AppComments / 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 Parkers 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 … HBOs In Vogue: The Editors Eye Screening At The Met Item Subtitle: 4
  30. 30. Product PagePhone Version
  31. 31. Product Main - Phone 3G 8:00 3G 8:00 Shop Shop In In TV App TV AppFendi 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 Parkers blue and gold baguette bag Item Subtitle: 1 Item Subtitle: 1 by Fendi HBOs In Vogue: The Item Title: 2 Item Title: 2 Editors Eye Screening At The Met Item Subtitle: 2 Item Subtitle: 2
  32. 32. Share Charm
  33. 33. Share Charm Shop In HBO’s Editors Eye – Sarah Jessica Parker TV AppFendi 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 Parkers 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 HBOs In Vogue: The Editors Eye Settings Screening At The Met Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2
  34. 34. Share Charm Shop In HBO’s Editors Eye – Sarah Jessica Parker TV AppFendi 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 Parkers 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 HBOs In Vogue: The Editors Eye Settings Screening At The Met Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2
  35. 35. Share Charm Shop In HBO’s Editors Eye – Sarah Jessica Parker Share TV AppFendi 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 Parkers 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 HBOs In Vogue: The Editors Eye Screening At The Met LinkedIn Item Subtitle: 4 Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 2
  36. 36. SharePhone Version
  37. 37. Product Main - Phone 3G 8:00 3G 8:00 Shop Shop In In TV App TV AppFendi 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 Parkers blue and Parkers blue and gold baguette bag gold baguette bag Item Subtitle: 1 Item Subtitle: 1 by Fendi by Fendi Slide HBOs In Vogue: The HBOs In Vogue: The Item Title: 2 Item Title: 2 Editors Eye Editors Eye Screening At The Screening At The Met Met Item Subtitle: 2 Item Subtitle: 2 Like Share Save
  38. 38. Product Main - Phone 3G 8:00 3G 8:00Share Shop Share Shop In In TV App Blue & Mail Fendi TV AppGold Hand bag HBO MailFendi 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 Parkers blue and Sarah Jessica gold baguette bag Twitter Parkers blue and by Fendi gold baguette bag Item Subtitle: 1 Twitter by Fendi Google+ Item Title: 4 Google+ Item Title: 4 HBOs In Vogue: The Editors Eye Subtitle: 4 Item Screening At The HBOs In Vogue: The Item Title: 2 Met Editors Eye Subtitle: 4 Item Screening At The LinkedIn Met Item Subtitle: 2 LinkedIn
  39. 39. Purchase Product
  40. 40. Product Main Shop In HBO’s Editors Eye – Sarah Jessica Parker TV AppShopping 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. 41. Store Site / App
  42. 42. Microsoft Ecosystem
  43. 43. Microsoft Ecosystem Shop In TV App Fendi Blue & Gold HBO’ Item Subtitl e: 1eos et Sarah Jessica Parkers blue and gold baguette bag by Fendi HBOs In Vogue: The Editors 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 Parkers HBOs In Vogue: The Editors 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 HBOs In Vogue: The Editors Eye Screening At The Met Item Subtitle: 2 Item Subtitle: 4 Item Subtitle: 4 A Select Y Search

×