BACKGROUND

While at Betaworks, my team decided to work on a side project just for fun. We'd been using animated GIFs in our previous project, and happened to be working alongside the Giphy team at the office. At this point, Giphy was in the early stages of its evolution and was still focusing on the core goal of building a search engine for GIFs. So we happened to be discussing the challenges of GIF creation...

PROBLEM

Before the proliferation of accessible creative tools, the creation of animated GIFs was a real challenge for most people. It required access to (and knowledge of) professional-grade software like Adobe Photoshop and could be a time-intensive activity. Around this time, animated GIFs were really starting to take off as a form of self-expression, especially in social media and messaging. My team identified an opportunity to make GIF creation accessible and efficient. Could we create a tool that would be so straightforward, that someone would create an on-the-fly, non-premeditated GIF for a social media post or message they were composing?

DISCOVERY

Given the amount of time we had to dedicate to this project, we had to set some constraints for ourselves both in terms of implementation and functionality. After some discussion, we determined that we could build a browser extension that would sit on top a streaming video, extract frames, and combine them into an animated GIF. While there were some othere tools emerging, none were straightforward (dithering anyone?) and none provided the ease of use of an extension.

We conducted some quick feedback solicitation an uncovered a problem that casual GIF creators were constantly encountering: file size. Animated GIFs tend to take up a lot of space, and as the length, dimensions, and quality increases, file size grows exponentially. At this time, Tumblr was perhaps the biggest social media platform in which GIF usage normalized, and they had a 2 megabyte file size limit. This restriction forced creators to use trial-and-error to produce GIFs that met the requirements. So we realized that by not only making GIF creation accessible, but also predictable, we could dramatically improve the experience.

EXECUTION

The focus of the interface was simplicity. Most people know anything about dithering, frame delay, or lossy compression (nor should they have to!) So a lot of thre work that went into the design was what's left out. We also spent significant effort on the clip selection, making it quick to choose keyframes using the sliders, but enabling more discerning creators to move frame-by-frame if desired.

Screenshot of the Homeslice extension for Chrome browsers

RESULTS

We successfully submitted the extension to the Chrome Web Store, where it was quickly adopted by our neighbors at Giphy. Of course, they had already been working privately on their own web-based GIF creation tool, which launched shortly thereafter. You can still install Homeslice in your Chrome browser, although we haven't maintained it, and subsequent changes to the YouTube and Vimeo APIs have rendered it non-functional (although you can still see the nifty loading animation I created.)