Second Screen TV ConceptCaris Hurd, Kim Johnson, Robert Newell, Kirk Yoshida

Agenda● Initial idea● User research● Design process● Prototypes● User testing & results● Prototype updates● Video demonstration● Final user testing & results● Future opportunities

Initial IdeaTwo areas for design improvements identified:● Update cable TV interface● Integrate TV content delivery to deal with

new providers (Amazon, Hulu, Netflix) and devices (Mobile, Tablet, PC)

We made major revisions to our initial concept after the completion of our research phase.

Initial Concept Diagram

User Research Process

As our concept matured, competitive research & user interviews were revisited throughout the design process.

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

Design Scope

Concept 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 user

watches a program● Provides easy access to information (e.g. actor, creator,

or subject) and related media

Concept Definition: A mobile environment that integrates information & additional content retrieval with the media viewing experience.

Final Concept Diagram

Design Process

Usage Scenario1. User is watching Homeland and thinks the lead actor

looks familiar. 2. Looks him up to see what he’s been in. 3. Finds a scene from one of his movies on YouTube, and

streams it either on her device or straight to the TV. 4. Looks up the Homeland creators so she can view more

of their programs. 5. Finds the series 24 online, downloads the first season

and then puts the first episode in a queue or views it at that moment on the TV screen.

Initial Design Impulses

Inspiration from metadata overlaid onto a moving image as seen in this promotional video for Google Field Trip

Inspiration from touching an image to reveal information-rich pop-up windows and hyperlinked metadata from digital collection exhibit software

Low-Fi Prototypes

Example of early wireframe with video panel, reading area & metadata tags.

High-Fi Digital Prototype

Example from 1st round of high-fi prototyping that shows selection of item in video with corresponding actions in tag and reading panel areas.

High-Fi Interactive Prototype

Example from 2nd round of high-fi prototyping in Axure. The design stays close to the previous iteration but creates a working prototype for testing.

High-Fi Prototypes

Axure prototype showing built out 'Videos' tab with results display and viewing options.

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

Test Results and Recommendations● 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 that

maximizes the reading area○ Provide text instructing users to touch the video

screen

Revisions to Prototype● Renamed "Videos" tab

to "Watch"● Enabled full-screen

reading view● Created more content

for "Hanoi" tag● Added ability to switch

to a West Wing episode● Enabled "Add to queue"● Added pop-up

instructional text to video area

● Other bug fixes...

Revised PrototypeApp Demo

Final User Testing● Modified initial test scenarios based on

extended functionality added to prototype● 9 tasks from the first test with one task

added:○ Finding a TV series listing, and choosing an episode

to watch immediately● Tested 9 users on newer prototype using an

iPad

Test Results and Recommendations● 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 the

application's touch-screen feature.

Final PrototypeLink to final prototype

Future Opportunities

● Interactivity and gaming● Crowdsourcing of content● Advertising● Curation and recommendations● Augmented reality● Live events

○ Social media

Questions?

Appendices

Research: Competitive

● There is no consummate system● Internet and media content might go together, but not

on a TV screen● Text entry is an unsolved design problem● Google TV provides a unified search for web and media

content● Apple TV moves content seamlessly from device to

screen● Browsing by category on cable systems is futile

Notable findings from looking at media viewing platforms, remote devices and cable systems

Research: User Interviews● Interviewed 17 users, 21-69 years old● 53% (9) "cord cutters" who had canceled TV

subscriptions (cable, satellite, etc.)● Many used TVs, with laptops and tablets

being secondary consumption devices● Asked about video consumption habits,

preferences, hardware, services they use● Processed this qualitative data into affinity

diagram...

Research: Affinity Diagram

Affinity Diagram Summary

We had to narrow and further roll up the areas from the affinity diagram into themes or "problems" our design might solve.

Research: Problem Definition

Design: Usage Scenarios● User is watching a commercial during a program he's only marginally

interested in, sees a commercial for Boardwalk Empire, accesses 1st episode in app/ device, then instantly streams/downloads/queues/or programs to record while tv program is still running unobstructed and uninterrupted. If can view instantly or almost instantly, user moves the image to the TV screen.

● A user is watching a documentary about the National Parks and wants to learn more about the Grand Canyon. She searches online for a topography map, a map of nearby campgrounds and, finally, information on how to make reservations, all while program is on TV. She then decides to look up the movie Grand Canyon. She downloads it or streams it to device, then quickly and efficiently, moves it to the TV where the film replaces the documentary.

Design: Task Flows1. Dashboard ("homepage")

a. Finding contenti. Starting a new video (from queue [icon only] or finding

process)ii. "Browse"iii. "Search"iv. Queue

b. GO: Syncing between screensi. TV to tabletii. Tablet to TV

c. Global function: Swapping or moving content (will explore use of a swipe motion)i. Instantii. Time-delayed (queued)

Design: Task Flows2. Metadata + Video view

a. Smaller video with touch box things that clickb. Fullscreen video button3

3. Metadata only view (Panel view)4. Fullscreen video

Design: Low-Fi Prototypes

Example of early wireframe with full-screen video and tabbed metadata pages in a pop-up window.

We each brought our ideas from our low-fi sketches to pull together one concept for how the app would work.

Design: Workshop

User Testing: Round 1 Tasks

1. You are watching Apocalypse Now on a large TV and the second screen device. You see Martin Sheen in the movie and want 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 you do?[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 you do 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 more about 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]

User Testing: Round 2 Tasks1. You are watching Apocalypse Now on a large TV and the second screen device. You see Martin Sheen in the movie and want to learn more about him. How would you find out more about Martin Sheen?

[Expected result: User touches video screen. (Helper text exists now when the page loads.)]2. How would you find other movies or TV shows starring Martin Sheen?

[Expected Result: User touches “Watch” tab]3. [Prompt user to Watch tab if not already there] You see the listing for The Amazing Spider-Man and you want to watch it after finishing Apocalypse Now. What would you do?

[Expected result: Add to Queue button]4. You want to see web search results for Martin Sheen. How would you accomplish that?

[Expected result: Touching Web tab]5. Martin Sheen looks pretty young in this movie so you want to find out when Apocalypse was made. What would you to to find that information?

[Expected result: Touching Apocalypse Now metadata tag at the top of the list to get to Apocalypse Now content. Finding date in the 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 you are interested in learning more. How would you find out more about Hanoi?

[Expected result: Touches “Hanoi” metadata link on right.]8. You want a larger reading area. What would you do to make the 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 this screen. 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 West Wing TV episodes right now. West Wing stars Martin Sheen. How would you go about doing this?

[Expected result: touches Martin Sheen metadata tag, touches “Watch” tab, touches “Watch Now” button, touches “Watch next episode” button in the pop-up window, then touches either “On iPad only” or “On both screens” button in the second pop-up window]

Final Prototype: Future RevisionsRedesigning the tabs panel

Final Prototype: Future RevisionsRedesigning the tabs panel

Final Prototype: Future RevisionsRedesigning the tabs panel

Final Prototype: Future RevisionsRedesigning the tabs panel

LinksInitial digital prototype

Interactive prototype - testing round 1

Interactive prototype - testing round 2

Final prototype