Gfycat

MY ROLE

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.

Create & Upload

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.

Understanding the problem

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.

Too confusing & too much text: users were confused about the differences between create & upload. We needed to make sure the entry points were more clear.
Flow was disjointed: elements on create were all over the place. Captions was in one place, trimming another, adding GIF information a third place. We noticed that some users would edit their GIF then... take a while to find the Finish button.
GIF editing did not work well with certain GIF sizes: vertical gifs pushed editing below the screen. Users were unable to edit and preview what they were editing without scrolling. Small GIFs were also artificially bigger.
Consistency: we recently rebranded Gfycat. Last time we edited the page was 2 years ago and it was still light themed. We needed to move this page into our new design system.

Understanding our users

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.

Organization, flow and structure

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.

Phase I: Create

Redesign. Address immediate problems we found
Refine. Improve the overall experience
Modernize. Utilize our new design system
Caption. Add needed functionality in captioning to be competitive

Phase II: Improve Entry Points

Diminish Confusion. Make it easier to tell the difference between upload / create

Phase III: Improve Results Page

Improve Flow. Improve flow for where you land after creation
Add Functionality. Make it easier for users to delete & edit their GIF
Make Responsive. Make results page usable on mobile and small devices

Business Goals

More Users. Reduce create & upload bounce rates
Increase Captions. Improve captioning engagement
More GIFs. Improve creation numbers & creator MAUs

Early Wireframes

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.

Visual Design Solutions

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.

Updated Trimmer

Here's the final trimmer we launched.

Phase II & Phase III

Here's some final visual designs from the other phases.

CONCLUSION & TAKEAWAYS

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.

Other Gfycat Projects

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 Mobile

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.