Using the internet to watch TV

Jeff Romi
10 min readSep 9, 2019

Challenge

People who can’t decide on what to watch are more likely to drop off and cancel their memberships.

When deciding on what to watch, our users struggle to make a choice due to hesitance, as they need large amounts of reassurance that their film / TV show choices have been made as a collaboration, this will then create an onslaught of questioning, such as, ‘did I make the right decision?’, ‘Let’s just watch the first ‘10 minutes and decide’, ‘are you sure its okay?

Finally my favorite line, ‘we can watch anything that you like’, after already having previously agreed, creating even more doubt. 💆🤦‍

Solution

As a user, when I want to watch anything, I rather not spend my time on endless browsing, dealing with its frustration but would like to spend my time effectively, by having the platform of my preference to have chosen the content for me and initiating the watching experience automatically.

What to expect from this experience:

  • Stream, Not Just a Library
  • Immediate
  • Constant
  • It’s always-on, always-there
  • Always-new
  • Skip through and sample (Zapping)
  • Do nothing
  • Channels are the interface

Is watching television addictive?

On average, people in Europe spend 226 min watching TV a day, in the United States TV viewing, on average, amounts even to 297 min per day. In Turkey however, viewing time goes up to 330 min a day, leaving Europe and Unites States behind the line.

What is binge watching?

the practice of watching multiple episodes of a television show in rapid succession

A more recent study found that most Netflix members choose to binge-watch their way through a series versus taking their time — finishing an entire season in one week.

Shows that fall in the Sci-Fi, horror and thriller categories are the most likely to be binged. Three hundred and sixty-one thousand watched all nine episodes of “Stranger Things” second season on the first day it was released.

I never have time for Ghostbusters, but I always have time for the last 30 minutes of it.

“It’s comfortable. It’s almost automatic,” said Smith. “We didn’t do enough in our experience to help the users in transition.” Ben Smith, head of experience at Hulu

Flow Diagram

  • You sit down in front of the TV after a long day at work
  • You are granted access to several channel options
  • You decide to start watching the first show comes up on display
  • Upon watching, chemicals are released in your brain. “When engaged in an activity that’s enjoyable such as watching TV”
  • Your brain produces dopamine
  • Reward of pleasure and happiness
  • Your brain reinforces continued engagement in that activity
  • You keep zapping through channels
  • Your body experiences a drug-like high

Your body does not discriminate against pleasure. It can become addicted to any activity or substance that consistently produces dopamine.

Similar Patterns

  • They sit down on a comfy chair after a long day at work
  • They think of something to do
  • The big screen in front of them stares lovingly at the viewer
  • The viewer reaches to the remote control on the coffee table and grabs it
  • They hit the red and inviting on/off button
  • Although they are alone, they enjoy the noise in the house
  • Knowing that there is a “flow” outside of their life satisfies and intrigues them, hence they start zapping in order to pick a flow based on their current mood
  • Finally, they stop when they find the sound that they enjoy or an actor they are fond of
  • They watch for hours however the magic is broken at commercial breaks, causing distraction
  • They keep zapping
  • They move on to a different channel as they do not want any distractions and would like to get away from reality
  • TV is ready to comply with this desire and show a different content
  • The viewer starts becoming knowledgeable about the broadcast streaming and possible contents that will be shown through social media accounts after a point
  • Now, they can be active in discussions relating to the shows on social mediums

Please see full research from the link below:

Wireframe

Ideation + Validation

version #1
version #2
version #3

Users Interviews

You can access full report on usability test below

Usability Test Preview

What kind of personas were used to conduct the test?

  • Ozge, Web Designer, spends 30+ hours weekly on web-related content. Watches Westworld, Masum, G.O.T. Is an active user of Puhu, BluTV and Youtube.
  • Atakan, Student, spends 30+ hours weekly on web-related content. Watches Fi, Masum, G.O.T. Is an active user of BluTV, Youtube, Puhu and Netflix.
  • Esra, Designer, spends 40+ hours on web-related content. Watches Full House, The Handmaid’s Tale and Shameless.
  • Selahattin, Art Director, spends 15+ hours weekly on web-related content. Watches G.O.T, Westworld, Mr Robot. Is an active user of Digiturk: BeIN Connect.
  • Hakkı, Front End Developer, spends 6–7 hours weekly on web-related content. Watches The Handmaid’s Tale, Sense8, La Casa de Papel. Is an active user of Netflix and BluTV
  • Volkan, Programmer, spends 5–10 hours weekly on web-related content. Watches movies. Uses content-bootlegging websites.

General Results— Happy Moments

  • The users resembled their experience to a regular TV use (5/7)
  • The concept of “previous channel-next channel” was comprehended (7/7)
  • The main page screen (video) was highly attracting and made the user feel as if they are in a special platform (4/7)
  • All of the channels were comprehended (5/7)
  • The users were able to understand the video content on the main page (7/7)
  • The users were able to understand the live function (5/7)
  • The channel names within the categories were comprehended, (Aksın gitsin, Vurdulu kırdılı) (5/7)
  • “Watching Now” section was clear (7/7)
  • All of the controls on the “Player” were noticed and comprehended (7/7)

General Results — Pain Points

  • The live TV badge on BluTV was not clear (4/7)
  • The region indicated in blue, demonstrating the content playing live on the channel, was not understandable (2/7)
  • The live stream option was not clear(2/7)
  • User was concerned with spending too much internet data due to the opening page with the video (2/7)

Acceptance Criteria

  • In this phase, the feature is only available and can be viewed by the users who are logged-in and have the permission to watch the content
  • When the user accesses the website, a live stream video player starts playing on the page
Final version
  • Based on the user’s preferences this feature remains either active or inactive during the next visit
  • The cursor becomes a pointer when the user hovers on any part of the footer showing the main navigation and when clicked on, the video player collapses, the video pauses on the last scene and the relevant page appears slides up on display
  • When collapsed, the player becomes a sticky header and when scrolled down, still appears at the top.
  • When the player is off, the cursor becomes a pointer when hovered in any field. When clicked on, the video player expands and resumes playing.

Video Player

  • The content of the video to be played is recalled from the EPG module, created on CMS
  • The content related to the timestamp of the day plays during the initial access, which is recalled from the first channel on the EPG list.
  • When the user changes channels, the latest-watched channel is saved and opens as the selected channel on the next access.
  • Based on the user’s previous preferences the subtitle and dubbing options are selected as on the current player and maintains the same functionality.
  • Previous and next channels are demonstrated on both sides of the play/pause button. The name of the channel is indicated below.
  • When clicked on the Previous / Next buttons, a 1–2 seconds snowy cable TV reception animation is activated, during this period, the content on the next channel is recalled from the EPG and begins playing. (Important: the broadcast (meaning the audio) should not cut off, the audio of the present broadcast should be active. The transition should occur when the content on the next channel is ready to be viewed. It is crucial that this process runs smoothly as possible.)
  • The left/right, up/down keys on the keyboard are used for zapping on the active player.
  • The colors etc., on the visual of Seek bar are revised.
  • The relevant channel name and the name of the live content appear on the lower left corner of the player
  • If a TV show is being viewed, the corresponding episode and season information appear next to the content’s title.
  • When clicked on the title of the content, the page transitions in to the detail page of the content, during this transition the header of the website disappears, the content area found below animates toward the top and the player collapses. The detail page is in modal view, when closed, the player appears once more and the header appears on the footer. The same structure functions when on full-screen.
  • The total run time of the content and the current minute is viewed on the Seek bar.
  • Although the content plays live according to the EPG information, the user can seek fast forward or rewind the content. In this case, a different color is used to indicate the current minute and the minute the live stream is on, on the Seek bar. The “live” icon is used to indicate where the live stream is. When clicked on, the user comes back to the timing on EPG and the “live” feed marker disappears.
  • If the user zaps to another channel, the manually sought minute is disregarded, it is played from the relevant timing of the EPG on the respective channel.
The “live” icon is used to indicate where the live stream is
  • When the users seeks backward, the content on the relevant channel might have ended according to the live stream
  • In this case, the “live” icon and the marker appear at the very end of the seekbar. When clicked on, it transitions to the live timing on EPG and the relevant content.
  • If the user watches a content for more than 10 minutes, then the “resume playing” feature appears for this content on the homepage.

EPG View

Story

As a user, I would like to use the EPG screen so I can access the channels and explore other live stream channels.

  • “All Channels” button is placed on the upper right corner of the live player.
  • When clicked on the button, the EPG screen appears with a drop down animation.
  • Picture-in-picture will allow to continue watching the current channel while making a selection on this page.
  • On the left hand side of the screen, the names of every channel running on EPG are listed.
  • The active channel appears in blue.
  • “Now Playing” icon appears on the active content on player.
  • 30-minute time frames, starting from the current time, appear on top
  • The marker on the current time appears on the whole page
  • The current time marker updates itself every second
  • The active and next contents are listed on the rows of every channel, based on the EPG information.
  • The size of the content should correspond to the run time of the content. (eg. a content beginning at 12 with a run time of 1 hr 42 mins is placed within 1:42)
  • Each content visualized with horizontal posters can be monitored in the CMS settings.
  • When clicked on any content, the EPG closes and the relevant content starts playing on the player.
  • If this is a content from the live stream, it begins from the current run time.
  • If the content is not from the live stream, it starts from the beginning.
  • Based on the status on EPG, forward / backward buttons appear on the upper left and right corners.
  • When clicked on forward / backward buttons, if the user is not following the live stream, they can preview up to 2 hours prior to the live stream. (The marker indicating the live stream scrolls as well)
  • On EPG, one can scroll forward for up to 6 hours for each channel.
  • One cannot scroll back to over 1 hour based on the current time on EPG. (Meaning scrolling backwards is not a viable option on default, one can scroll backwards only if they previously scrolled forward.)
  • On the EPG page, one can scroll up and down with their mouse. During this time, the EPG timeline becomes sticky and keeps showing.
  • When exited from the EPG page, the screen shifts back to the video player.

Logged-Out User Flow

  • Users who do not have a subscription can also experience this feature. However, this feature will have a 5-minute of preview length.
5-minute preview
  • The time remaining for the preview is shown on the lower right corner of the player with the text indicating that is it free of charge.
  • The user benefits from all the features of the live player
  • When the preview time is over, the video stops, all the controls on the player’s panel disappear and a directing message appears on the screen
  • The length of the preview is stored in the browser’s cookies and if the preview session has expired before, the user will not be able to preview the feature again.
  • The length of the preview should be controlled and changed in CMS settings.

Final Prototype with Framer

--

--

Jeff Romi

I’m a multidisciplinary designer 🚀. Bringing design thinking, innovation and mentorship