An example of quick design refresh
.:TV Playlist Player:.
The Problem
A Playlist is a collection of clips within a single asset that is aggregated into a single player session. Currently playlist player on TV devices hasn’t been updated since the launch of peacock and along with many UI updates and backend tweaks is starting to show some buggyness and lack of parity with our other players.
The Strategy
We identified two primary mental models of users watching a playlist. The first are users who are interested in a specific clip or group of clips within the playlist. These users need the ability to browse the available clips and select the ones they are interested in. The second are users who are interested in the playlist as a whole who have an interest in the entire subject of the playlist without knowing specifically of clips within.
Our Key Play player design can function as a base to facilitate both mental models: A browse browse rail for users in the first mental model (searching for specific clips) and “Next” and “Previous” button within the control bar for users who are interaction with the playlist as a whole.
Browse Clips
For users who have a higher interest in specific clips within the playlist
Quick “Next” “Previous”
For users who have a higher interest in the overall playlist
The Solution
The pieces are in place working agile with a smaller dev team we only need now to figure out some of the complications around the user flow and context of the playlist position.
Users at the first clip in the playlist will see no “Previous” button and likewise users at the end of a playlist would see no “Next” button either. After a conversation with the engineering leads, we are confident this shouldn’t be an issue on the backend.
Though there are some custom components for this refresh mostly around meta data, the overall visual specs are based on previously delivered video player assets (the rail from Key Plays and the control bar from VOD Channels Player) therefor I only need to support the devs with a series of templates. These templates will also keep our design system clean for future designers.
Future designers will be treated to a series of custom Figma components that fit nicely into our current UI kit - I reach out to the design systems team and give them the heads up that these new components needs to be added and nested into our other video player master components.
And thats it! The ask was to see this refresh delivered for TV asap and I was given a couple of weeks…. but it only took a few days :P