What’s behind a video player’s UI

The first thing was getting an understanding of what was expected from the redesign. The UI worked fine when there weren’t many options users could adjust, but as we added more features like languages, playback speed, bitrate, subtitles, casting, and so on, the layout really didn’t adapt to it well. Specially on mobile.

The video player is at the heart of any video solutions company. It should not only reflect the reliability and common functions users expect from it when watching any video but it also should have a unique look and feel. One should be able to recognize a Sardius Player the minute it sees it.

On top of that, we wanted to make sure that the player also adapts to the type of video it’s being watched, wether that’s a live event, a video library or a short clip. Same for if it’s being watched either on desktop, mobile or tablets.

‍The research phase consisted on two main elements:

Talking with the people involved with the current version of the player I found out it was mostly a re work from an open source video player with very few tweaks of the UI. Improvements were aimed mostly at some technical needs that improved its performance for streaming video.

Reading the documentation of that “source” player actually led me to change a little bit the order of my research plan. I started reading about other players as well. Clearly there are some gold standards and the changes for different use cases started to became apparent.

I asked myself what was specific about our use cases that may help us differentiate from other platforms. By the time I met with the PMs I had questions based on what I’ve learned so far. From my conversations with them I concluded we should prioritize two use cases: live events and video library.

For live streaming the user ideally interacts a lot less with the player itself, meanwhile users watching a video on demand can change the playback speed, the quality of the video, move forward or to the next video, that is to say, interacts way more with the player.

Also learned about some specific scenarios like for example some events need tens of different languages to choose from, and our current UI really didn’t work well for those cases.

With the information I gathered I put together some really lo fi wireframes to discuss with the product owner and the developer some basic ideas. I also took this phase as an opportunity to get a better understanding of any technical constraints I should be aware of.

Then I started brainstorming on different ideas.

I found something I really liked. It was a mix of two main ideas: a centered floating container of the main actions and using the progress bar as the container of said buttons. After looking at hundreds of players it felt like a fresh idea. In short, the design consists of three main sections: The metadata at the top, main controllers at the bottom and added functionality at the top right of the player.

Time to get into the weeds. I worked on the prototype to not only see all the different screens but also get a feel of how they should interact. Video is inherently dynamic, so the player shouldn’t be static. I wanted to make sure every transition was clear and intentional. Most of the interactions where made using the prototyping capabilities of Figma, and some more nuanced interactions where made in Framer (for instance how the player loaded or how elements moved when hovering the mouse). Since this was going to be how I tested what I had so far with users, I wanted to make sure that making improvements or small adjustments would not be too much of a hassle so I used components and variants in a way that making changes wouldn’t mean a wasting a lot of time.

Hosted interviews where I shared the prototype with some users and gathered feedback. Overall the reception was positive and changes that needed to be made were related to things like the size of some icons and buttons that needed to be adjusted. After making those changes and presenting the results to the product owner it was decided to move forward with development and make some more test with a functioning version.

I’m really happy with the result and with the process itself. I believe the player has a personality of its own and covers the main needs of ours users in a way that feels unique to our product.