User Story
As a user, I would like to be able to watch the trailer of a content and switch to the other contents available within its category all while viewing the details of the content so that I can have an easier time making a decision regarding whether or not to watch the show and explore new content.
Türkçe versiyonu için lütfen aşağıdaki link’i kullanın;
https://medium.com/@jeffromi/movie-tv-show-page-d9177e7054a5
Design process
Ideation + Validation
- 2 variation and responsive mobile screens have been designed
- We tested our idea with our product team as well as our current users outside of the office.
Objective
- Viewing the details-> Increase in the views
- Total session -> Increase in the views
- 10–20% of the detail page views switch to the other contents available within its category
Acceptance Criteria
The development and the new design will solely be for the desktop in the first phase and an A/B test will be conducted priorly. The A/B test plot will be similar to the previous A/B plots that we have used. All of the users visiting our website from Desktop will be subject to the test.
User Interviews
You can access detailed information from the link below: https://drive.google.com/file/d/1m7J0oFp34z6k10M5a89is2BrPo9ECpzJ/view?usp=sharing
What kind of personas were used to conduct the test?
- Hakkı, a programmer spends 8+ hours weekly on web-related content. Is an active user of Netflix and BluTV.
- Ezgi, a student spends 20 hours weekly on web-related content. Is an active user of Netflix and BluTV.
- Sinem, an industrial engineer spends 30 hours weekly on web-related content. Is an active user of Youtube and Bootleg websites.
- Ruba, content engineer and editor spends 25 hours weekly on web-related content. Is an active user of Netflix and Bootleg websites.
- Emre, a CRM coordinator, spends 6 hours weekly on web-related content. Is an active user of BluTV and Bootleg websites.
- Ahmet, spends 50 hours weekly on web-related content. Is an active user of Netflix and BluTV.
- More…
The Features That We’d Like the User to Explore
- Watching the Trailer mode
- Accessing the details of each episode by clicking the “More” button visualized with three dots
- Signing up and watching when the second episode hovers
- Accessing more information on the content by clicking on the “More” button at the end of the page
- The appearance of the hover pop up for the next show
- Accessing the details when clicking on the “More” button
The Trailer-Watching Mode (Version1)
The first thing that grasped the attention of the users was the Trailer Mode. The users were able to explore the content quickly. They were able to understand that the trailer appears when they click switch on the button (8/9)
Clicking on the More Button From the Episode
The users were able to use this feature in order to access more information on the episode and discovered that this feature displays the summary of the episode. (9/7)
Signing Up and Watching When the Episode Hovers
The users were able to understand the warning that popped up directing them to signing up and watching when they got to the second episode. When they clicked on it, they assumed that they would be directed to the “Log In/Sign Up” page. They understood that they could watch the first episode but would have to log in/sign up for the second one, which made it easier for them to understand what the lock signs stand for next to the episodes. (9/9)
Pain Points
- The users could not understand the binge watching term (6/9)
- The users could not comprehend the + symbol next to the button that indicates changing a season. (3/9)
- The users could not see the “Free” writing written on the first episode. They assumed that they would not be able to watch the show without signing up.(4/9)
- The fact that the more button and the specific button for details showed the details on the content confused the users. (3/9)
- The users were confused based on what the next / similar content would show.(3/9)
Users Suggested
- The “free of charge” writing can be more visible. (2/9)
- A descriptive writing on the function of the button can show when the cursor is on + “Add to my List”. (2/9)
- The user searched for a scroll after opening the detail page in order to get back to the previous page. (1/9)
- The name of Binge Watching can change. (1/9)
Navigating Through the Logos / Titles and the Contents
- If the content opens in a collection or category page, the related category of collection’s title show up on the upper left corner (eg. in the design in the attachment, the user has accessed the detail page of “Yaşamayanlar” from the “most viewed shows” collection)
- The logo of every content, if available, or its title with a pre-determined font and text is shown.
- When opened initially, the logo of the content shows on the left as active.
- The logo or the title of the active content is scaled at 1.2 and it’s opacity is 100%. The opacity and the size of the inactive contents’ titles are lower.
- If the selected content is not the first content of the relevant collection/category, a button to go left is shown on the right. In the meantime a part of the collection’s previous content’s logo shows on the left. When clicked on either one of these, the previous content is accessed.
- If, in the collection or the category, there are different contents than the chosen content, the logos line up on the right. When the user clicks on the logos, the corresponding content becomes active. During this transition, the logo’s row shifts, with the selected logo staying in the middle. If the selected logo is already in the middle, the rows do not shift. If the logo belongs to the last content of the collection, the rows do not shift and the logo appears active on the right side of the row.
- The next and previous buttons located on the upper right corners, only appear if there is a previous or next content that can be shown. When clicked on, the aforementioned animation appears. With every click, only one content shifts. If clicked multiple times, the upper line shift with the same speed, however the details of the content do not update. The detail page shows with a 3-second delay (when the rapid clicking is over).
- When clicked on the video area, one can access the next content (It should function the same way when clicked on the right arrow)
Trailer & Video Screening
- If the related content does not have a trailer, the gallery images are used in the field of the video. The relevant images should be shown 2x in retina. The images change in every 4 seconds, in a loop. The animation here should be a fadein/fadeout.
- If the related content has a trailer, the first image is shown for 4 seconds, then fades out and the video starts playing.
- The audio state of the trailer remains active during the first use. When the user clicks on the audio off icon found at the lower right part of the screen, the audio mutes and the icon state changes to mute. Based on the user’s preferences, this is saved in between the following sessions.
- When the trailer starts playing, the line on logo of the active content moves as a progress bar.
- When the trailer is over, it rewinds to the beginning just as the progress bar.
- If this content has more than one trailer, the progress bar is separated based on the amount of trailers (eg. showing 2 lines rather than one). When the first trailer is over, it moves on to the second one and its corresponding progress bar moves accordingly.
- If the content has more than one trailer, the shift to the right features firstly plays the other trailer and after the last trailer switches to the next content. (Clicking on the video field, clicking on the right arrow)
- After the trailer starts playing, the mouse movements of the user start to be tracked. If the location of the cursor does not change for 8 seconds, the lower panel of the screen disappears and the opacity mask on the video or the images disappear as well. Only the opacity mask on the top part (where logos and navigation are) is maintained. When the user moves their mouse, it comes back to its previous state.
The General Feature of the TV Show Pages
- When it is initially opened, the “episodes” tab becomes active
- While the episodes tab is active, the seasons of the show appear below
- The related episodes of the active season appear below
- On the TV show pages, the lower field runs over towards under the screen when initially opened. This causes only a part of the posters to show
- If the user scrolls down or hovers to the field where the general features are with their mouse, this screen animates upwards. (Animation should occur during scrolling, so it’s not natural scrolling)
- If the user hovers from the lower field to the outside of the screen, the lower part disappears downward after 2 seconds
- If the user opens the lower field by scrolling, hovers to the lower part and hovers back to another field, the panel closes the same way in 2 seconds
- If the user already watches the show, the season and episode where they have left off actively appears (The season is active, the latest episode that has been viewed appears on the top of the row. If it’s the last episode then it shows at the bottom)
The Trailer View on all of the Detail Pages
- The trailer plays at the background, if the TV show/movie has a logo, the logo shows instead of text
- If it is a BluTV original production, the required tag shows and it functions just like the other tags
- When clicked on the button below or the “more” link in the description, further information on the episode can be viewed
- All the detailed information is hidden with the trailer switches and provides an audible, full screen viewing
- A similar content is shown, when hovered
- When the user hovers on the watching list, the “add to my list” tool tip appears
- The play button indicating that the first episode can be viewed free becomes active while when the user hovers on the others, it requires a log in/ sign up
Final Prototype with Framer
Conclusion
According to a research done by ‘The Stories Landscape Today’ snapchat is the one app where Stories has reached maturity, with around 81% of daily users engaging with the feature, Instagram has seen swift and steady adoption, with 60% of daily users on Stories and 300 million daily Stories users overall which is more people than Snapchat’s entire 187 million daily user base.
I know that the story design pattern used by these social platforms is the format of the future and therefore can result in increase on total sessions as well as switching between pages up to 10–20%.
