A simple, adaptable video player for every device
Context
Sportsrocket's primary product was a video management platform allowing our customers to distribute content to various destinations. As part of this distribution model, we developed an in-house video player that customers could use on all devices.
Problem
📵 Mobile optimization
The existing video player scaled poorly to mobile devices. Touch targets failed to meet web accessibility guidelines.
The existing video player scaled poorly to mobile devices. Touch targets failed to meet web accessibility guidelines.
🦁 Heavy branding
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.
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.
🥱 Poor engagement
Viewers were dropping off because the video player did not sufficiently drive attention toward related content.
Viewers were dropping off because the video player did not sufficiently drive attention toward related content.
Goals
📲 Scalable
Optimize the video player for all devices with an emphasis on mobile.
Optimize the video player for all devices with an emphasis on mobile.
🤫 Neutral
Implement a neutral design language that doesn't clash with customer branding.
Implement a neutral design language that doesn't clash with customer branding.
🔥 Engaging
Increase discoverability and engagement for related videos and social platforms.
Increase discoverability and engagement for related videos and social platforms.
Identifying 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 organizing 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 with improved touch targets at a wide range of breakpoints.
Prioritizing mobile without neglecting desktop
Although mobile was a priority, nearly two-thirds of our views came from the desktop player. Therefore, it was vital to unify the experience across both platforms.
For mobile, I focused on improving touch targets through increased button sizes with expanded padding.
For desktop, I maximized the viewing area by moving obstructive UI to the peripheries of the screen.
Driving engagement
In addition to mobile usability, our customers wanted to drive more views to playlists and related videos and encourage users to share videos on social media.
To keep users engaged and watching videos, I designed solutions to autoplay the next video and allow users to view other videos in playlists.
To make sharing videos on social media easier, I designed a new share modal with quick actions for the most common destinations and a quick action to copy the direct link.
Lastly, users desired the ability to cast videos to their TVs, particularly fans of the NLL who wanted to watch live matches on a bigger screen. We listened to this feedback and implemented Chromecast as a core feature in the video player.
Simple, scalable design
I eliminated strong branding, enforcing a more neutral experience that could easily adapt to our customers' websites.
As part of this effort, I implemented simple, modern typography styles and custom icons.
Organic motion: a more human experience
I paid close attention to motion, adhering to a philosophy of organic animation and creating transitions that appeared smooth and snappy yet lively.
I used Principle to produce detailed animations, then sent these animations along with keyframe values to our engineers.
Examples in the wild
What I learned
This was the first opportunity I had in my career to work hand-in-hand with engineers—they literally sat right behind me. I learned to take an iterative approach, constantly engaging with my engineering partners to ensure quality and usability.
I also learned a lot about designing for mobile devices, as this was the first time I had delved into the nitty-gritty of mobile accessibility.
Looking back, I wish I had focused more on growth. Driving views was a crucial goal that was not prioritized sufficiently. If I could revisit this project, I'd work with PMs to identify viewership metrics and carefully track these to verify that our solutions are positively affecting engagement.
