X – Hanna Xu logo Large x logo Twitter account – @hannaxu Twitter logo linked to the twitter account @hannaxu LinkedIn account – hannaxu LinkedIn logo linked to the LinkedIn account for Hanna Xu hello@hannaxu.com Email icon linked to hello@hannaxu.com Gfycat Gfycat Blue Logo

Gfycat

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.

Company

Gfycat

My Deliverables

Web Design, Android Design, iOS Design, Print Design, Creative Direction & Product Management

Tools

Sketch, Affinity Designer, Zeplin, Dropbox Paper, Photoshop, InDesign, Illustrator, Keynote, Paper & Sharpie

Year

2015 – Present

Team

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

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

Gfycat create final design

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.

Create old designs

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.

Create and Upload IA / Flow

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).

Create A
Create B
Create C
Create D
Create E1
Create E1
Create E1

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.

Trimming

Trimming a GIF

Trimming Hover States

Trimming hover states

Dragging the trimmer

Dragging the trimmer

Captioning

Adding captions to a GIF

Captioning dropdown

Caption dropdown

Adding one caption

Adding one caption

Adding multiple captions

Adding multiple captions

Caption drawer closed

Caption drawer closed

Adding information

Adding information

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.

Trimming final
If the video is a short video

Here's what it looks like when you're working on a short video

If the video is a slong video

Here's what it looks like when you're working on a long video

Phase II & Phase III

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

Create landing page

Create landing page

Upload landing page

Upload landing page

Results page

Results page

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!

Homepage

Gfycat Homepage Redesign

Sharepage

Gfycat Sharepage

Sharepage

Gfycat Sharepage (your own)

Profile

Gfycat Profile

Trending Feed

Gfycat Trending Feed

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.

iOS app screen
iOS app screen
iOS app screen
iOS app screen