Interaction Design - Second Screen final preso

465 views

Published on

Final presentation for our interaction design class project.

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

  • Be the first to like this

No Downloads
Views
Total views
465
On SlideShare
0
From Embeds
0
Number of Embeds
61
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Interaction Design - Second Screen final preso

  1. 1. Second ScreenTV ConceptCaris Hurd, Kim Johnson,Robert Newell, Kirk Yoshida
  2. 2. Agenda● Initial idea● User research● Design process● Prototypes● User testing & results● Prototype updates● Video demonstration● Final user testing & results● Future opportunities
  3. 3. Initial IdeaTwo areas for design improvements identified:● Update cable TV interface● Integrate TV content delivery to deal withnew providers (Amazon, Hulu, Netflix) anddevices (Mobile, Tablet, PC)We made major revisions to our initial conceptafter the completion of our research phase.
  4. 4. Initial Concept Diagram
  5. 5. User Research ProcessAs our concept matured, competitive research& user interviews were revisited throughout thedesign process.
  6. 6. Research Findings● Cable model is too restrictive○ Users complained of expense○ Does not easily timeshift○ Users want a la carte pricing & on demand content● Programming & other info lacks integration○ People use other devices to look up info○ Lack of synchronization between devices● There is a "finding" issue○ Content is distributed across many providers○ Users are overwhelmed by too much content○ Programming categories can be useless
  7. 7. Design ScopeConcept Attributes● Tablet-based app or part of a dedicated device● Connects to a larger system through wifi● Enhances a user’s viewing experience as a userwatches a program● Provides easy access to information (e.g. actor, creator,or subject) and related mediaConcept Definition: A mobile environment thatintegrates information & additional contentretrieval with the media viewing experience.
  8. 8. Final Concept Diagram
  9. 9. Design Process
  10. 10. Usage Scenario1. User is watching Homeland and thinks the lead actorlooks familiar.2. Looks him up to see what he’s been in.3. Finds a scene from one of his movies on YouTube, andstreams it either on her device or straight to the TV.4. Looks up the Homeland creators so she can view moreof their programs.5. Finds the series 24 online, downloads the first seasonand then puts the first episode in a queue or views it atthat moment on the TV screen.
  11. 11. Initial Design ImpulsesInspiration from metadata overlaidonto a moving image as seen inthis promotional video for GoogleField TripInspiration from touching animage to reveal information-richpop-up windows and hyperlinkedmetadata from digital collectionexhibit software
  12. 12. Low-Fi PrototypesExample of earlywireframe with videopanel, reading area &metadata tags.
  13. 13. High-Fi Digital PrototypeExample from 1st roundof high-fi prototypingthat shows selection ofitem in video withcorresponding actionsin tag and readingpanel areas.
  14. 14. High-Fi InteractivePrototypeExample from 2ndround of high-fiprototyping in Axure.The design staysclose to the previousiteration but creates aworking prototype fortesting.
  15. 15. High-Fi PrototypesAxure prototypeshowing built outVideos tab with resultsdisplay and viewingoptions.
  16. 16. User Testing - Round 1● Four users tested on the interactive prototype● 9 tasks, including:○ Finding out more about an actor on screen○ Adding another movie to the queue○ Finding out when the current movie was made○ Finding out about an item mentioned in the movie○ Making the reading area larger○ Making the video full-screen
  17. 17. Test Results andRecommendations● High Priority:○ Rename "Videos" tab○ Consider multiple video-related tabs● Medium Priority:○ Fix search term to match keyword from metadata● Low Priority:○ Incorporate an arrow in page element thatmaximizes the reading area○ Provide text instructing users to touch the videoscreen
  18. 18. Revisions to Prototype● Renamed "Videos" tabto "Watch"● Enabled full-screenreading view● Created more contentfor "Hanoi" tag● Added ability to switchto a West Wing episode● Enabled "Add to queue"● Added pop-upinstructional text tovideo area● Other bug fixes...
  19. 19. Revised PrototypeApp Demo
  20. 20. Final User Testing● Modified initial test scenarios based onextended functionality added to prototype● 9 tasks from the first test with one taskadded:○ Finding a TV series listing, and choosing an episodeto watch immediately● Tested 9 users on newer prototype using aniPad
  21. 21. Test Results andRecommendations● High Priority:○ Rename "Watch" tab○ Consider multiple video-related tabs○ Indicate that the video title is an active tag● Medium Priority:○ Provide more explicit instruction for how to use theapplications touch-screen feature.
  22. 22. Final PrototypeLink to finalprototype
  23. 23. Future Opportunities● Interactivity and gaming● Crowdsourcing of content● Advertising● Curation and recommendations● Augmented reality● Live events○ Social media
  24. 24. Questions?
  25. 25. Appendices
  26. 26. Research: Competitive● There is no consummate system● Internet and media content might go together, but noton a TV screen● Text entry is an unsolved design problem● Google TV provides a unified search for web and mediacontent● Apple TV moves content seamlessly from device toscreen● Browsing by category on cable systems is futileNotable findings from looking at media viewingplatforms, remote devices and cable systems
  27. 27. Research: User Interviews● Interviewed 17 users, 21-69 years old● 53% (9) "cord cutters" who had canceled TVsubscriptions (cable, satellite, etc.)● Many used TVs, with laptops and tabletsbeing secondary consumption devices● Asked about video consumption habits,preferences, hardware, services they use● Processed this qualitative data into affinitydiagram...
  28. 28. Research: Affinity Diagram
  29. 29. Affinity Diagram Summary
  30. 30. We had to narrow and further roll up the areasfrom the affinity diagram into themes or"problems" our design might solve.Research: ProblemDefinition
  31. 31. Design: Usage Scenarios● User is watching a commercial during a program hes only marginallyinterested in, sees a commercial for Boardwalk Empire, accesses 1stepisode in app/ device, then instantly streams/downloads/queues/orprograms to record while tv program is still running unobstructed anduninterrupted. If can view instantly or almost instantly, user moves theimage to the TV screen.● A user is watching a documentary about the National Parks and wants tolearn more about the Grand Canyon. She searches online for a topographymap, a map of nearby campgrounds and, finally, information on how tomake reservations, all while program is on TV. She then decides to look upthe movie Grand Canyon. She downloads it or streams it to device, thenquickly and efficiently, moves it to the TV where the film replaces thedocumentary.
  32. 32. Design: Task Flows1. Dashboard ("homepage")a. Finding contenti. Starting a new video (from queue [icon only] or findingprocess)ii. "Browse"iii. "Search"iv. Queueb. GO: Syncing between screensi. TV to tabletii. Tablet to TVc. Global function: Swapping or moving content (will exploreuse of a swipe motion)i. Instantii. Time-delayed (queued)
  33. 33. Design: Task Flows2. Metadata + Video viewa. Smaller video with touch box things that clickb. Fullscreen video button33. Metadata only view (Panel view)4. Fullscreen video
  34. 34. Design: Low-Fi PrototypesExample of earlywireframe with full-screen video andtabbed metadatapages in a pop-upwindow.
  35. 35. We each brought our ideas from our low-fisketches to pull together one concept for howthe app would work.Design: Workshop
  36. 36. User Testing: Round 1Tasks1. You are watching Apocalypse Now on a large TV and the second screen device. You see Martin Sheen in the movie andwant to learn more about him. How would you find out more about Martin Sheen?[Desired action: touching Martin Sheen’s image on the screen to display metadata]2. How would you find out about other movies starring Martin Sheen?[Desired action: pressing the Videos tab and scrolling through the movie list]3. You see the listing for The Amazing Spider-Man and you want to watch it after finishing Apocalypse Now. What would youdo?[Desired action: pressing the “Add to Queue” button next to the movie entry]4. You want to see web search results for Martin Sheen. How would you accomplish that?[Desired action: pressing the Web tab to view the Web search results]5. Martin Sheen looks pretty young in this movie so you want to find out when Apocalypse Now was made. What would youdo to find that information?[Desired action: pressing the Apocalypse Now metadata tag at the top of the Video Tags panel]6. How would you find similar movies to Apocalypse Now?[Desired action: pressing the Videos tab and scrolling through the movie list]7. You heard someone in the movie talk about napalm and you are interested in learning more. How would you find out moreabout napalm?[Desired action: finding and pressing the napalm metadata tag in the Video Tags panel]8. You want a larger reading area. What would you do to make the reading area bigger?[Desired action: pressing or simulating dragging the “shade” symbol up to the top of the screen]9. You are done reading and just want to watch the video on this screen. How would you make the video full-screen?[Desired action: pressing the full-screen icon in the bottom right corner of the video frame]
  37. 37. User Testing: Round 2Tasks1. You are watching Apocalypse Now on a large TV and thesecond screen device. You see Martin Sheen in the movie and wantto learn more about him. How would you find out more about MartinSheen?[Expected result: User touches video screen. (Helper textexists now when the page loads.)]2. How would you find other movies or TV shows starring MartinSheen?[Expected Result: User touches “Watch” tab]3. [Prompt user to Watch tab if not already there] You see thelisting for The Amazing Spider-Man and you want to watch it afterfinishing Apocalypse Now. What would you do?[Expected result: Add to Queue button]4. You want to see web search results for Martin Sheen. Howwould you accomplish that?[Expected result: Touching Web tab]5. Martin Sheen looks pretty young in this movie so you want tofind out when Apocalypse was made. What would you to to find thatinformation?[Expected result: Touching Apocalypse Now metadata tag atthe top of the list to get to Apocalypse Now content. Finding date inthe wikipedia page on the About tab.]6. How would you find similar movies to Apocalypse Now?[Expected result: Touches “Watch” tab]7. You heard someone in the movie talk about Hanoi and youare interested in learning more. How would you find out more aboutHanoi?[Expected result: Touches “Hanoi” metadata link on right.]8. You want a larger reading area. What would you do to makethe reading area bigger?[Expected result: touches (swipes) grey bar area.]8a. How would you make it smaller again?[Expected result: touches (swipes) grey bar area.]9. You are done reading and just want to watch the video on thisscreen. How would you make the video full-screen?[Expected result: grey bar to return back. Then video full-screen icon.]9a. How do you get out of full-screen video?[Expected result: minimize icon.]10. You’re tired of this movie and you’d like to watch some WestWing TV episodes right now. West Wing stars Martin Sheen. Howwould you go about doing this?[Expected result: touches Martin Sheen metadata tag,touches “Watch” tab, touches “Watch Now” button, touches “Watchnext episode” button in the pop-up window, then touches either “OniPad only” or “On both screens” button in the second pop-up window]
  38. 38. Final Prototype: FutureRevisionsRedesigning the tabs panel
  39. 39. Final Prototype: FutureRevisionsRedesigning the tabs panel
  40. 40. Final Prototype: FutureRevisionsRedesigning the tabs panel
  41. 41. Final Prototype: FutureRevisionsRedesigning the tabs panel
  42. 42. LinksInitial digital prototypeInteractive prototype - testing round 1Interactive prototype - testing round 2Final prototype

×