Adaptable and efficient video player optimized for every device.
Problems
The existing video player scaled poorly to mobile devices. Touch targets failed to meet web accessibility guidelines.
The design featured obvious Sportsrocket branding. This was an issue for clients who licensed the video player to use on their own websites. They desired a more neutral design.
Viewers were dropping off because the video player did not drive attention to other content.
Goals
– Optimize the video player for all screen sizes with a particular focus on mobile usability.
– Implement a neutral design language that wouldn't clash with customer branding.
– Increase engagement with related videos and social platforms.
Discovering usability issues
I began my process by auditing the existing video player.
Accessibility was a major issue. Users found it particularly hard to tap buttons on small mobile devices. This was because controls were undersized and crammed into corners of the screen. Essentially, the desktop UI was lazily scaled down to mobile with no regard for touch. Furthermore, there was little regard for the organization of controls into logical groups.
I researched competing video players such as YouTube, Facebook, Dailymotion, Streamable, and Twitter. I made note of layouts, button sizes, animations, gestures, and other ways these video players were designed to delight on mobile.
Finally, I created wireframes at a wide range of breakpoints with improved touch targets.
Improving mobile viewing without neglecting desktop
Although mobile was a priority, nearly two-thirds of views were on the desktop player. Therefore, it was vital to carry through all improvements to the desktop experience as well.
On mobile, the emphasis was placed on larger buttons with expanded padding to improve accessibility. On desktop, emphasis was placed on maximizing the viewing area. As such, controls were moved to the peripheries of the screen to avoid obscuring the video.
Driving engagement
In addition to mobile usability, our customers wanted to drive more views to playlists and related videos. They also wanted to encourage users to share exciting videos on social media.
I designed solutions that would autoplay the next video and allow users to view other videos in their current playlist. I also added a new share modal.
Lastly, users were highly interested in being able to cast their videos, particularly fans of the NLL who wanted to watch live matches on their TVs. We listened to this feedback and implemented Chromecast as a core feature in the video player.
Neutral design language
One of our goals was to eliminate strong branding and create a more neutral experience that customers could adapt to their own websites. For example, AS Roma used our video player on their website and desired a neutral design that wouldn't clash with their team colors of red and gold.
Organic motion: a more human experience
I paid a lot of attention to motion. In particular, I wanted to design an experience with smooth animations that felt friendly and alive.
I worked in Principle to produce detailed animations that were delivered to the engineering team and implemented in the final video player.
Examples in the wild
