Loading ...

Responses by Lee Martin, developer

Background: Therapy Studios joined forces with Dave Grohl and Roswell Films to present “Play,” a mini-documentary that culminates with the Foo Fighters founder performing a solo 23-minute instrumental of epic proportions. Our web experience is an alternate location to stream the documentary, where we’ve provided the ability to switch between performance videos so users can isolate any of the instruments Dave performed. We also provided supplemental materials, like sheet music, floor plans and a list of music education organizations.

Highlights: The video player and the info area. Users can scroll up and down to switch between the two. However, the player always stays present at the top, so users can see the info while staying engaged in the performance. Switching instruments is achieved via a dropdown. The overall visual design is based off the excellent work Morning Breath put together for the physical release packaging.

Challenges: Switching between videos while retaining the user’s current time. Since the master video performance includes the intro doc, it has a different duration than any of the performance videos. This required a bit of logic to understand what video users were coming from and how the current time might be altered. In addition, we also had to figure out how to educate users about this untypical feature of switching instruments.

Favorite details: The user interface decision to cover the instrument select with a piece of masking tape that says “Choose video” to help steer users into using that feature. I despise those tutorial elements that float above websites with little arrows, and I asked myself, “How do we label things in a studio?” The answer was masking tape and sharpie.

Navigational structure: There was a real temptation to build a more experimental user experience for the video player, but since users expect a video player to work a certain way, anything out of the ordinary will likely be more confusing than interesting. I was also highly inspired by YouTube’s work on its core player and the YouTube TV user interface. This is where collapsing video into the info section came from.

Anything new: If you’re signed up to a certain tier of Vimeo, it will provide links to your actual video files, which you can use to create a custom experience around. We used these files alongside the Javascript library Plyr to build our player.

play.roswellfilms.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In