Upgrading the GIF viewing experience to the 21st century. The world is changing, and content is changing with it. We watch GIFs more than YouTube videos, read Tweets instead of New York Times articles. Content is becoming shorter and its distribution more democratic.
Gfycat is one of the largest GIF platforms out there. We keep all the awesome things about GIFs—concise, visually appealing, works everywhere—while vastly improving the speed and quality. We provide superior tools for creating and sharing GIFs in stunning visual quality. We're one of the top 100 most visited website in the United States.
2015 – Present
Hanna: Product Design Lead
Kasey: Senior Product Designer
Ativ: Product Designer
John: Business Development & PM
Masha: Senior Software Engineer
Amanda: UX Research & Copywriter
And the rest of the Gfycat team
I lead design. I determine design priority and scope of projects & manage deliverables. I work closely with engineering and the rest of the Gfycat team to create experiences from ideation to execution. When we were bigger I managed a small team of designers where I delegated projects and facilitated critiques.
While I was the sole designer on everything shown in this portfolio, much was based on user research from Amanda and some were inspired by old wireframes & previous iterations from Kasey. Nothing could be where it is without the critique and collaboration of John (our PM), Masha (our front-end engineer), and of course our talented backend engineers.
Full case study is still in progress. Want to see all I worked on at Gfycat? Jump here to see a collection of my projects.
One project I worked on at Gfycat, was the Create and Upload project. Gfycat is an entirely user generated platform and all the content on our site is produced by our Create, our Upload, or directly through our API.
With help from Amanda (user research), Dan (support), and talking to internal stakeholders I made a list of some of the problems our previous design (above) had that we wanted to address.
We had two sets of users.
High Quality Giffers: users who were super into GIF making. These more savvy creators preferred to use After Effects, Photoshop, Mocha AE. GIFs were serious business for them and they tended to prefer our Upload.
The Everyday Creator: users who wanted to make simple edits. These GIFs tended to be shorter, less than 15 seconds. These creators were usually making GIFs from a video they found from around the web. They wanted to trim, maybe add a caption or two, or make memes. Most of them only created a few times a month. They did not want software to download or to watch tutorials. They wanted it simple and easy. And these were our create users.
I started the project by analyzing what we already had and doing a competitive analysis with what's already out there. Using this, I created a hybrid flow/information architecture of the Create and Upload pages. Throughout this, I paired up with John in order to figure out priority and what exactly the project requirements were.
Realizing that it was a large project both design wise and development wise, John and I decided to break the design into different phases.
Here are some of the early wireframe explorations for Phase I (create).
I explored a few different directions and discussed with the team. We felt like the one that resonated with us the most related back to our users.
“As an Everyday Creator and not a High Quality Giffer, I want to make GIFs quickly and easily without learning a program or having to think too much.”
A step by step creation tool was less overwhelming and held the user's hand while they were creating.
Here's some of the solutions I came up with.
We discovered fairly quickly a problem with the design. The dragging area became tiny if the user was trimming a longer video.
Here's the final trimmer we launched.
Here's some final visual designs from the other phases.
What did I learn? When I began this project I was very focused on using our components and staying within our design system. I think to the detriment of what was actually best for our users. I learned that sometimes I need to take a step back and think “does this component make sense? Or do I need to adapt and create a new one?”
What else did I work on at Gfycat? A ton! Here's some of them. All of these are live, click the link in the caption to see them in action!
Gfycat has more than just web. Here's Gfycat's iOS App.
Important note: While I worked on the app store screenshots & was lead designer at Gfycat, Kasey was the talented designer who did the bulk of the UX & the UI work for our iOS app.