Identifying issues with the old player
Users found it particularly hard to press buttons on smaller touch devices. Controls were crammed into a fraction of the screen, yet there was plenty of usable space available. Buttons were also haphazardly placed in the bottom toolbar with little regard for usability. I researched a number of video players including YouTube, Facebook, Dailymotion, Streamable, and Twitter. I made note of functions, button sizes, animations, and other factors, then discussed with our developers which features they could implement.
Objective: improve the mobile experience without sacrificing desktop
Although mobile was a priority, nearly two thirds of our views came from the desktop player. It was therefore vital to refine the desktop experience as well. I began my overhaul by writing a list of all functions, then organized them by type and grouped these functions in dedicated places on the screen. I prioritized touch input for mobile breakpoints, placing controls front and center to ease interaction. On desktop, the controls are moved to the peripheries of the screen so the video is not obscured.
One step further: adding new features
We used this opportunity to implement features for discoverability and integration with our services. Playlists were used extensively by our clients, so adding a playlist function directly to the video player was a common sense feature to keep the user invested. We also listened to feedback from mobile users and added support for chromecast. This was especially important for NLL subscribers who wanted to watch live games on their TV.
Organic motion: a more human experience
Below are a few UI animations created in Principle. I worked directly with our video developers (they sat literally 5 feet from my desk) to implement animations and thoroughly test them on multiple devices before going live.
Branding (or lack thereof)
An early requirement was to remove branding and color. This was to create a more neutral experience that would look appropriate when used by different clients. Our job was to support their content, not market our player to the general public.
Making a custom icon font with love
One issue we encountered during development was how to update and animate icons. We started using SVG assets, but a custom icon font would streamline updates and allow us to implement more complex animations. I set about designing a set of video icons from scratch and converted them to an icon font using Glyphs. This saved the devs from hours of work updating icons with every minor tweak.
Examples in the wild
