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.
Gfycat
Web Design, Android Design, iOS Design, Print Design, Creative Direction & Product Management
Sketch, Affinity Designer, Zeplin, Dropbox Paper, Photoshop, InDesign, Illustrator, Keynote, Paper & Sharpie
2015 – 2019
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.
Gfycat create final design
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's some of the solutions I came up with.
Trimming a GIF
Trimming hover states
Dragging the trimmer
Adding captions to a GIF
Caption dropdown
Adding one caption
Adding multiple captions
Caption drawer closed
Adding information
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 what it looks like when you're working on a short video
Here's what it looks like when you're working on a long video
Here's some final visual designs from the other phases.
Create landing page
Upload landing page
Results page
Create and Upload were released! You can play with Create here and you can play with Upload here.
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?”
I also learned a lot about working within constraints. This project not only had front-end constraints but also a lot of backend ones.
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 Homepage Redesign
Gfycat Sharepage
Gfycat Sharepage (your own)
Gfycat Profile
Gfycat Trending Feed
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.
