Vimeo and Instagram
As Vimeo focuses on becoming a world class platform for video creators, we wanted to help empower our users to share and distribute their content directly from the Vimeo site. Welcome, the Export to Instagram button and modal!
This project was completed with a team of designers and engineers as part of a summer long hack project. I led the product vision (need-finding and ideation) as well as the design and prototyping. Vimeo’s Business Intelligence team helped us get numbers around the percentage of Instagram profiles linked on Vimeo profiles as well as the breakdown of uploads by device.
Vimeo’s Instagram Users
Many of our creators are avid Instagram users. If you go onto one of their Instagram profiles, you’ll likely see a grid populated with videos. These videos are often clips of the creator’s new Vimeo content.
Problem: Sharing your Vimeo video on Instagram is a long process involving multiple devices
Since Instagram has a 60 second limit for videos, users have to post trimmed clips of their original Vimeo video. Let’s think about how someone might have gone about doing this.
Sharing Vimeo Videos to Instagram — The Hard Way
- Upload video onto Vimeo (desktop site)
- Transfer video file from computer to phone
- Upload video to Instagram using phone
A 3-step process isn’t too bad, right? Well, it can be pretty terrible when the file size of most videos are quite large. Video files take time to download and time to transfer. Even regardless of the time spent, the whole process of posting a video from Vimeo to Instagram likely involves a handoff from desktop to mobile, since 94.13% of Vimeo’s users upload videos from desktop.
Our Solution: Upload to Instagram, Straight from Vimeo’s Website
To ease this process,we wanted to remove the annoying intermediary step of transferring large video files.
Sharing Vimeo Videos to Instagram — The Easy Way
- Upload video to Vimeo
- Upload video to Instagram (without leaving Vimeo!)
Designing the Flow
Since our users are uploading to Instagram from within the Vimeo site, we have to ensure that much of Instagram’s built-in video editing functionality is preserved within our own uploader. This includes: trimming, cropping, choosing a thumbnail, and writing a description.
The user first selects the portion of their video that they wish to upload to Instagram and then they can choose between a square crop or white borders for their video, as well as choose a thumbnail and write description.
Taking it One Step Further: The Staff Pick Overlay
An interesting idea that came out of this project was the decision to include the Staff Pick Overlay toggle in the modal flow. Staff Picks are coveted symbols for Vimeo’s creators, as these videos are hand picked by Vimeo staff and are featured across the Vimeo site. Staff Picked videos are worthy of recognition and we want our creators to be able to easily flaunt their Staff Picked status, especially on their Instagrams.
Currently, the marketing team manually creates custom Staff Pick Instagram assets to send to each Staff Picked creator. That’s a lot of assets!
We wanted to expedite this process by allowing users, whose videos have been Staff Picked, access to the Staff Pick toggle in the Export to Instagram Flow. Users whose videos have not been Staff Picked will only see the Square Crop toggle.
I had an amazing time working with my fellow interns to get this idea built and working. We demo’d our hack at the end of the summer and the company loved it! Check out the demo below.