Vadio

Channel Maker

A web app for building ad-based video playlists around artists and their music

position

Frontend Developer

roles

UI Designer

Frontend Developer

Vadio Channel Maker | Video Playlist Generator App | UI Design and Frontend Development

Overview

Channel Maker provides a way for Vadio partners to quickly and easily generate custom playlists to embed into various music engagement platforms.

This gives partners a new revenue stream and a chance at new fans. This app contributed to partnership deals with Warner Music, Metro Lyrics, and Shazam.

Playlist Editing

Browse video playlist and recommended
videos
Browse video playlist and recommended videos

Challenge

Users wanted to see their existing playlist and be able to edit it directly while also being able to find and discover new videos.

Solution

The UI was designed with the playlist being central, visible, and actionable at all times. This gave the user context for picking videos and ads. We shortened the users editing time by making the playlist 'live'; a user could add, remove, or edit the playlist without going into any secondary menus or views.

Usability

No matter what other feature the user engaged, they could awlays see and edit the playlist. A user could:

  • Place a video in the playlist from search or explore panels
  • Place other videos while actively editing another
  • Move an item in the playlist while it is being edited
  • See real-time playlist length changes while editing or replacing a video
  • Place, move, delete, and adjust ads while editing a video

Video Search

Select and edit a video from search
results
Select and edit a video from search results

Challenge

Users wanted to find, select, and place videos into the playlist directly from search results. The goal was to remove as many steps as possible between finding a video and adding it to a playlist.

Solution

The search results were kept right next to the playlist so users can compare and immediately take action on results. And there was no strict flow for how users added or edited videos. A user could immediately add a video or edit first, whatever workflow they preferred.

Usability

Async search allowed the user to see results faster and promoted discovery by showing partial string matches. Showing results directly in a list view alongside the playlist allowed for real time playlist experimentation. A user could:

  • See results alongside their playlist for comparing versions or durations
  • Drag one or more resulting videos to the playlist
  • Play a resulting video without needing to add it to their playlist
  • Edit a resulting video before commiting it to their playlist
  • Filter active results by adding additional values to the search query

Video Replacement

Replace a video in the playlist with one from
search
Replace a video in the playlist with one from search

Challenge

Users wanted an easy path to swap out multiple or old videos without having to pre-delete the videos being removed.

Solution

A replace feature was embedded into video editing. And with the editing feature being accessible from any video, a user could start a video swap from the playlist, search, or explore panels.

Usability

Faster and more flexible video replacement increased playlist building. A user could:

  • Replace a video without having to delete the old video first
  • Replace one or more videos in the playlist with one or more new videos
  • Replace all instances of a single video without having to select them manually
  • See the impact of the playlist time length before committing to the replacement
  • Use the replace feature to creatively reshape playlists around artists or genres

Ad Placement

Insert and position an ad into the video
playlist
Insert and position an ad into the video playlist

Challenge

YouTube and other video platforms have limits on how they monetize videos which impacts ad placement and duration. But users wanted to be able to insert revenue-generating ads with little fuss and without having to read long ad placement rules.

Solution

Ad insertion was simplified by allowing the user to insert ads separate from finding an optimal location in the playlist. Once ads were placed, the user could move them around. Ad placement validation was done on the “save” step to avoid error messages from disrupting the user’s experience. The user could enable an auto-correct feature in settings which would adjusts ad placements and durations for the user at validation time.

Usability

Separating ad insertion from validation—combined with the auto-correct feature—reduced friction in monetizing playlists. Users saw less errors, spent more time focusing on video content, and could publish playlists faster.

A user could:

  • Insert ads at will without worrying about the limits
  • Validate and optimize their ad placements automatically
  • Learn about the ideal ad placement through the auto-correct feature