Hulu End Card
Summary
End cards offer a straightforward way to keep watching a current series or to discover new ones. This project aimed to redesign the mobile end card to enhance key performance indicators (KPIs) and user experience (UX) goals. The main KPI goal was to increase the time spent per playback session, while the UX goals are detailed in the section below.
Duration: 2 months
Tools: Sketch/Figma, Principle
Team: PM, TPM, Mobile Developers, UX Research
Contribution: iOS/Android
Current UX Problems
Because our KPI was vague from a design perspective, the first item I wanted to focus on was identifying possible issues with our current experience. The main UX problems I identified were:
Lack of visibility of the End Card
In landscape player (on the right), the end card replaces the episode/movie metadata, which blends with the background of the player.
In the portrait player (on the left), the end card (with the countdown) feels detached from the player.
CTAs were not clear.
While the landscape player has a clear ‘Watch Now’ button to go to the next option, the portrait player lacks the same clarity for ‘Up Next’ content
In both versions of the player, the end card cannot be dismissed. Users can either pause to temporarily stop the end card or completely exit playback. This means users cannot enjoy the credits if they wanted to, or if there were after-credit scenes, they would be skipped over.
Series to Series vs Episode to Episode
The metadata and designs for both ‘series to series’ and ‘episode to episode’ were the same, making it difficult to realize whether or not you were be transitioned to a new series or remaining in the same one.
Competitive Analysis
Netflix (Series to Series)
Amazon Prime
YouTube TV
Netflix (Ep to Ep)
Youtube
After defining these UX problems, I decided a good next step was to research and see how current end cards were designed in our competitors (Netflix, Amazon Prime Video, YouTube.) I was able to identify some patterns in our competitors.
Common Metadata Elements (Ep. to Ep.)
Up Next/Next Episode (100%)
Show Tile (⅗, 60%)
S#E# (⅗, 60%)
Episode Title (⅗, 60%)
Timer (100%)
End Card available in and out of player (portrait specific) (⅔ , 66%)
Common Actions
Doing nothing will autoplay the next episode when the timer runs out
Selecting the end card will automatically play the next episode
Cancel/Hide/Watch Credits removes end card
Leads to either the option to replay (YouTube TV)
Or to other forms of end card when credits finish (Netflix, Amazon, YouTube)
Option to close player/back out completely
Low Fidelity
Once I collected the findings from my competitive analysis, I began to ideate in Sketch different ways of displaying the end card, both visually and by adding/removing different items of metadata.
For both situations
Wanted to include an ‘Up Next’ with a ‘Timer’, as users need to know what is playing next in both situations, and will need to know how much time they have.
Introducing a new ‘dismiss’ action, so users have the option to dismiss in both situations. However, when users had the option to dismiss we could not disable autoplay completely, so the episode will need to continue playing.
Include clear CTAs
For Ep to Ep
There was a range of metadata we could use in this scenario, we could go the Netflix route where we only say ‘Next Episode’ or we could include a bit more information such as the S#E# and the Episode Title. I designed for both scenarios.
While we could introduce an episodic tile or a series tile, I leaned towards not including the tile as it creates a bigger distinction between Ep to Ep and Series to Series. There was also an issue with possible spoilers.
For Series to Series
Basically, let’s include everything. Especially as someone could get autoplayed in a series they’ve already started, so knowing the Series and Episodic information was key.
High Fidelity Pt. 1
From this, I took some of the previous concepts based on feedback and began to utilize our components to come up with higher fidelity designs. Through partner check-ins and design critiques, there were some issues brought up that I needed to consider:
Ep. to Ep could not just say ‘Next Episode’ as sometimes our library (especially Live users) could have missing episodes in their VOD library. So we needed to include at least S#E#, but I also believed adding the episode title would be beneficial to users. Some series don’t have the most reliable titles, but in other series, it could come in handy.
After having a conversation with a developer, he advised we do not add a new scrim to the player as there were already many layers to the current player. This could slow the experience / the player down. This means the metadata cannot just be free-floating in the player.
After trying to add the metadata and imagery around our component library buttons, the consensus was that the different end card pieces felt disconnected. So it was back to the drawing board.
High Fidelity Pt. 2
Home Component
Drawer End Card
Single Button End Card (Ep to Ep)
Single Button End Card (Ep to Ep)
Single Button End Card (Series to Series)
Single Button End Card (Series to Series)
Going back, I started to look into other possible components that could be used/modified as I only focused on using our main component library buttons complemented by surrounding text. There were two paths I worked through from here:
Single button end card:
I noticed that one of our home tiles had a button with two lines of text that could possibly work. By having all the text encapsulated into a button, we would not have to add a scrim and all the parts of the end card would feel connected. We ended up expanding the button to three lines, to accommodate more metadata.
The PM on our team liked how clear the play-action was, as the play icon was the first time that appeared. The icon was faster to interpret than a button with words.
Another item we considered was how we would dismiss the end card, I tried using words (like ‘hide’ or ‘dismiss) and the ‘x’ symbol. We went with the ‘x’ as the words were difficult to see on bright backgrounds (even with a bit of shadow it did not feel attached).
I considered adding color, but after discussions with our mobile platform lead, this would be considered a utility button. This means it should be white. Having the button white would also have it match the other player actions.
We ended up proceeding with this option for testing because of all the points listed above.
A drawer end card:
The drawer end card was based on the player drawer we have for secondary actions. This is a drawer that remains under the player controls when they are invoked (in both portrait and landscape).
While the design was clean, we ran into the issue of pieces of metadata feeling disconnected and not having the space to include the metadata we wanted to have (lots of truncation).
User Testing
While the design was still going through iterations, we wanted to test the general button design, metadata, and CTAs. I collaborated with one of our UX researchers to develop a test plan. We did not have Usertesting.com, so this was an in-person test.
Test Objectives
Was the end card visible enough to users while in playback (both portrait and landscape)?
Were the CTAs clear?
Did users understand how to dismiss the end card?
Did users see the value in the End Card for Ep. to Ep. and Series to Series? Can users tell the difference between the scenarios?
What were users’ thoughts on the timer?
Test Results
Most of the test was a success, users were able to see the end card, the CTAs were clear, and they knew how to dismiss the end card. Users also expected and appreciated the change in the metadata and artwork to help distinguish Ep. to Ep. and Series to Series. Lastly, users were comfortable with the autoplay in the Ep. to Ep. scenario.
“I like the little button in the corner and I honestly think that made me want to watch the next episode more...And it's like giving me an easy shortcut to watch the next episode...” - Quote from User
Items of Irritation
When it came to the Series to Series transition, users were mixed. Users either expected only familiar content, recommendation reasons, more choices, or further engagement with content (bonus content). We knew this was a possibility going in and decided to wait to design for this scenario with a future project (VOD Guide).
Users felt the end card was taking too much screen real estate in portrait. While we wanted to have the same designs for both portrait and landscape (both are on screen), we realized that we needed to rethink the portrait designs. This also became a future legal issue. The redesigns are in the upcoming section.
Users felt frustrated that one had to dismiss the end card in order to access player controls (so two taps, one to dismiss then one to access controls). We later allowed users to dismiss the end card by simply tapping outside the screen, which would normally invoke player controls.
Some users thought the Ep. to Ep. timer could be shorter (we went with 15 seconds). After discussing with legal, talking with the PM, and looking at competitors we decided to stick to 15 seconds and later look at data to see if we could shorten the time.
Finalizing Designs
Single Button Ep to Ep
Single Button Series to Series
No Credit Marker
Courtesy Timer
Autoplay Off
As for finalizing the designs from testing, some changes made were:
Pulling in the ‘X’ from the outside of the button to the right of the button. This just felt more visually cohesive.
Changing the timer from ‘x’ seconds format to ‘x:xx’ format. This was especially for the Series to Series end card, which could last for a very long time as it ran the whole length of credits, and interpreting 120 seconds is a lot harder than 2:00 (2 minutes).
Combined the play icon and the image for Series to Series to reduce the width of the button for that scenario.
Based on findings from our test, we also allowed users a way to dismiss the end card simply by tapping outside of the button. This would match the current player controls behavior.
But wait, there’s more! While we had designed for the main Ep. to Ep. and Series to Series scenarios, there were still 2 other scenarios to consider.
No Credit Marker scenario: These are episodes that have no credit marker for the end card to display because they either just don’t, or they have after credit scenes. Legally, we couldn’t use the same designs as we were not allowed to make this version of the end card actionable. We also wanted to keep as much of the screen as visible, which the button would end up covering.
Courtesy Timer scenario: Once users temporarily dismissed the end card by selecting ‘x’, the autoplay would still be running. We did not turn off autoplay as it could affect our KPI. We wanted users to know that they would still be autoplayed into a new episode/series in the last 5 seconds of the stream.
We revisited the drawer concept from earlier and were able to find a way to make it work for these scenarios. While these designs may provide less or more truncated metadata, they do not cover the screen, allowing users to enjoy any after-credit scene that appears.
Documentation
Table to map out design scenarios
Component spacing and visual design
Margins
TTS Script (Accessibility)
Interaction Flow for Player Controls
Once designs felt finalized, I went on to creating the spec for developers that consisted of:
Designs and visual details for the End Card component (size, font, colors, etc)
Interaction patterns (flows, scenario design chart, and player control interactions)
Final visual mocks
Accessibility (TTS scripts for Voiceover/Talkback)
Design QA + Launch!!
When the iOS developer was ready, they sent me updates via Testflight. I reviewed the visual design, metadata, and ensured the right end card showed for each scenario. I noted any problems in a Google Sheet and created bug tickets in Jira for the developer to fix. Once the issues were resolved, the end card was launched on iOS and Android.
Learnings / Reflection
Learnings
I did run into some miscommunication about adding two lines of Episode Title to change the component I was working on with the mobile platform lead, which caused some tension. Now I keep them updated when major decisions are made through Slack, so they can include their input before it’s too late.
We had some legal issues come up last minute with the portrait end card covering too much of the screen. One way to prevent this would have been to share with legal earlier on in the process to catch this problem earlier.
Reflection
Next time I would have liked to discuss the idea of autoplay control and the possibility of including that in the player (as it lives in the profile settings). This way users have further control over whether they would like the end card to appear or not.