Adding ‘Favourites’ to Dplay - Discover channel
Discovery Channel
_
Adding ‘Favourites’ to Dplay (SVOD/AVOD)
_
Brief
Our users in Sweden are missing a ‘Favourites’ functionality that allows them to save the shows they want to watch later. How would you add this functionality to our digital product in web (browser)?
_
Research.
IKEA
Functionality: Add to Shopping List
Via: Product page
Action: Click
Feedback: Pop up confirmation
_
ASOS + H&M
Functionality: Save product
Via: Product List page
Action: Click
Feedback: Icon colour fill and hearts animation
_
AMAZON PRIME
Functionality: Add to Watchlist
Via: Show List page
Action: Hover + Click
Feedback: Button state change and copy
_
YOUTUBE
Functionality: Add to Watch Later
Via: Show List page
Action: Hover + Click
Feedback: Pop up confirmation and icon change
_
SPOTIFY
Functionality: Add to Playlist
Via: Songs list page
Action: Hover + Click
Feedback: Full screen overlay
_
NETFLIX
Functionality: Add to My List
Via: Homepage + Film page
Action: Hover + Click
Feedback: Button state and copy change.
_
BBC iPLAYER
Functionality: Add to My Programmes
Via: Episode page only
Action: Click
Feedback: Banner confirmation and button state change
_
_
Current templates audit.
I looked at all the templates that a video could maybe be 'Favourited' from to see if there were any changes in the show panels, or variants but they were all the same design.
_
Current shows panel styles.
I then, looked at the design of the current show panels as the 'Add to favourites' button would need to be integrated within the current design with minimum fuss. They would display: The episode name, premium highlight, launch date, series and episode number and length of the episode - Then on hover: would also display the channel and show description. 
_
Possible positioning solutions.
Displaying 'Add to favourites' button on hover
Similar to how Netflix and Amazon Prime currently do it, I looked at adding a small heart icon (similar to Asos and H&M) that would display in the top right of the show panel on hover. A white state would signify that the show had NOT been 'Favourited' while a pink state would signify that the show HAD been 'Favourited'. I also added tooltip feedback on both hover and on click to confirm the functionality of the heart icon for the user.
_
I also explored how the user could maybe not just add a show to their 'favourites' list but maybe they share the service with others and want to create their own playlist or add a show to someone else's playlist, very much inspired by the way you can add songs to a current or new playlist on Spotify.
_
Displaying 'Add to favourites' icon on load.
I couldn't think of any benefit of asking the user to hover over a show before allowing them to add the show to their 'Favourites' list, especially as there won't be a hover on mobile browser versions. I started to explore where where I could best position the icon within the design of the current panels and to the far right of the show title made the most sense as only maybe 10% of show titles were over 1 full panel width of copy.
_
The only downside I could foresee with the placement above would be when the show title was long, as it may be limit the character count before the title drops onto two lines or runs into the 'Add to favourites' icon.

To counteract that issue, I explored the option of moving the 'Add to favourites' icon on top of the show image. I ideally wanted it in the top right hand corner of the image but settles for the bottom right hand corner as when placed in the top right, it messed up the alignment of the 'Premium' highlight. 
_
'Added to favourites' confirmation.
Once I settled on how to 'Favourite' a show, it was important to create a feedback loop that clearly communicates that a show has been added but also a clear route to where to find the 'Favourited shows list'.
_
I thought it would be nice to have a small notification that could pop up in the bottom corner of the viewport once a show had been 'Favourited', that could maybe last for 5 - 7 seconds before disappearing. This could both help add confidence to the user that the show had indeed been added to their list but also, by having a link to the list itself, it would help teach the user where on the site the 'Favourites' list lives.​​​​​​​
_
I then looked at how the feature may work on a mobile browser and started to refine the confirmation pop up, simplifying it by adding the link to the 'Favourite shows list' into the title of the box and adding a the same hearted icon onto the thumbnail to help confirm the user's action.
_
'Adding to favourites' UI transition.
_
Adding complete series to favourites.
I then started to explore the idea of the user being able to add an entire series to their 'Favourites' list as well as just an episode.
_
Another option would be to add a checkbox to the pop up confirmation that displays when a user adds an episode to their 'Favourites' list, that allows the user to also add the remaining episodes in the series to their favourites too.
Adding ‘Favourites’ to Dplay - Discover channel
0
42
0
Published:

Adding ‘Favourites’ to Dplay - Discover channel

0
42
0
Published:

Creative Fields