Final presentation for our interaction design class project.

1. Second Screen
TV Concept
Caris Hurd, Kim Johnson,
Robert Newell, Kirk Yoshida

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

3. Initial Idea
Two 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.

4. Initial Concept Diagram

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

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. 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.

8. Final Concept Diagram

9. Design Process

10. Usage Scenario
1. 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.

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

12. Low-Fi Prototypes
Example of early
wireframe with video
panel, reading area &
metadata tags.

13. 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.

14. 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.

15. High-Fi Prototypes
Axure prototype
showing built out
'Videos' tab with results
display and viewing
options.

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. 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

18. 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...

19. Revised Prototype
App Demo

20. 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

21. 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.

22. Final Prototype
Link to final
prototype

23. Future Opportunities
● Interactivity and gaming
● Crowdsourcing of content
● Advertising
● Curation and recommendations
● Augmented reality
● Live events
○ Social media

24. Questions?

25. Appendices

26. 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

27. 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...

28. Research: Affinity Diagram

29. Affinity Diagram Summary

30. 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

31. 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.

32. Design: Task Flows
1. Dashboard ("homepage")
a. Finding content
i. Starting a new video (from queue [icon only] or finding
process)
ii. "Browse"
iii. "Search"
iv. Queue
b. GO: Syncing between screens
i. TV to tablet
ii. Tablet to TV
c. Global function: Swapping or moving content (will explore
use of a swipe motion)
i. Instant
ii. Time-delayed (queued)

33. Design: Task Flows
2. Metadata + Video view
a. Smaller video with touch box things that click
b. Fullscreen video button3
3. Metadata only view (Panel view)
4. Fullscreen video

34. Design: Low-Fi Prototypes
Example of early
wireframe with full-
screen video and
tabbed metadata
pages in a pop-up
window.

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

36. 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]

37. User Testing: Round 2
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?
[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]

38. Final Prototype: Future
Revisions
Redesigning the tabs panel

39. Final Prototype: Future
Revisions
Redesigning the tabs panel

40. Final Prototype: Future
Revisions
Redesigning the tabs panel

41. Final Prototype: Future
Revisions
Redesigning the tabs panel

42. Links
Initial digital prototype
Interactive prototype - testing round 1
Interactive prototype - testing round 2
Final prototype