🚧 I'm developing and designing this site in the open. Learn more. 🚧

Mobile Player Refresh

In the Spring of 2017 we set out to make our mobile player more useable. There had been very little innovation work on the mobile player and we knew things like scrubbing on a small device like a phone weren’t easy.

While we didn’t expect this test to significantly move any business metrics, we knew that usability and engagement with various aspects of the player were important nonetheless.

Design

In some of our early concepts, we were exploring ways to making scrubbing on a small device easier. In the following concept we added a “filmstrip” across the bottom that would allow you to swipe it to progress forward or backward. We relied on momentum to determine how far the film would advance.

Filmstrip

In this next concept, you could interact with the traditional forward/back buttons as usual by tapping to advance forwards or backwards by some pre-set amount of time or by tapping and holding on the button, you could expose a UI that would allow you to scroll within a much smaller time frame for finer grain scrubbing.

Range

At the end of the day, many of these concepts proved to be a bit too complex from a usability standpoint and we ultimately settled on the tried and true forward/back UI buttons:

This concept is much closer to where we ended up.

Prototype Development

This was one of my first forays into building a fully native iOS prototype using Swift. Besides getting much better performance when it came to video playback and events like scrubbing, it also allowed us to add some nice native touches like haptic feedback for some of the player controls.

Results

As I mentioned, we didn’t anticipate moving any business metrics – our main goal was increasing overall usability – however, we were pleasantly surprised that our new design also lead to increase in overall streaming.

The team that worked on this project was also granted a U.S. patent for the player design and functionality.