GIPHY GIF Maker

Overview

Project Type: Desktop Web Application (General Assembly Course Project)

Description: Create a GIF Creator on the GIPHY website to allow users to create their own content

Problem: GIPHY, the largest online database of GIFs, needs a GIF creator feature for their website so that they can remain competitive amongst other content hosting sites that have created similar tools, build a community of users, and increase user engagement on the website.

Solution: Our design team proposed a  make a GIF Creation Tool that allows users to create GIFs that they can export, download, share, and add captions.

Tools & Techniques: Surveys, Interviews, Sketch 3, Invision

Final Assets:

• Project Plan
• Research Plan
• Annotated Wireframes
• High Fidelity Prototype

Team: AHA! (Andrelie & Hector & Annie)

My Role: Research Lead

I developed the research plan and delegated tasks amongst the team. I also reviewed all research and distilled results into specific design considerations.

Andrelie - Project Coordinator

Drelie kept a careful watch over the project and kept us from straying too far from the design objective.

Hector - Design Lead

Hector was our go-to guy to make the best diagrams, infographics, and wireframes. He took the lead on the implementation of design ideas into wireframes and the working prototype.

User Research: The Wonderful, Wacky World of GIFs

We employed the following research techniques to explore the fabulously expressive, hair-flipping, eye-rolling world of GIF users.  

• Competitive Analysis
• Comparative Analysis
• Heuristic Evaluation
• Feature Analysis
• Surveys
• Interviews

RESEARCH OBJECTIVE:

To find out where GIPHY stands amongst its competitors and learn how users create, share, and download GIFs on the GIPHY website. 

COMPETITIVE/COMPARATIVE ANALYSIS:

We wanted to compare GIPHY to major competitors with similar business models, specifically Tumblr and Reaction GIFs. Because GIPHY is the most extensive GIF database, its competitors lag far behind in hosting GIFs. However, in our search to find GIF creation tools, we found that only Gifyt and Imgur had free web applications that allowed users on their site to create their own GIFs.

We found that the Imgur and Giphyt GIF creation tools had very intuitive and simple interfaces and control elements.

Although it would have been tempting to design a video editor from scratch, we looked at what the competition to see if there were basic elements of a GIF editor that we should include.

We thought that the YouTube import function was an interesting way that these two sites were allowing users to increase content.

Design Considerations:

• Be simple and intuitive in design

• Make finding content easy/improve access to content so that the user does not need to be fatigued by the creation process

• Allow users to create and preview captions

• Offer reliable saving and downloading options so that users can keep their work

• Maintain shareability with social media

SURVEYS 

Once we had an understanding of the competition and their approach, we directed our attention to GIPHY users to inform our design.

To examine behavior, we distributed a survey to 38 respondents, ages 20-57, mostly women (60%), who almost all identified as being “very comfortable” with technology. Most shared GIFs using iMessage, Facebook, and email.

• Not many users had even attempted to make a GIF (only 4 said that they had)

• A few users with design professions found making a GIF to be easy with the right tools

• One user enjoyed making them because it offered a rewarding feeling that they could express themselves

INTERVIEWS

We asked survey respondents if they would be willing to be interviewed so that we could have an in-depth understanding of how they use GIFs, why they use them, and how they would create one. 

Interview Findings:

• Users loved exposing themselves with GIFs  but making a GIF was a mysterious process to most
• Users who had tried to make GIFs before found it to be time-consuming or difficult to do
• Users don’t often have the tools (such as video editors) to make GIFs

Users Defined:

We created two personas to represent the two main groups of users on the GIPHY website.

Designs:

We held a design studio where we drafted many ideas for the GIF Creator. So that we could keep the design simple and usable, we narrowed down the features so that we were building a product that best met the needs of the user without going overboard.

User Testing

User testing began with a hand-drawn low fidelity paper mockups, which users found to be easy to navigate. Those early wireframes were developed into a medium fidelity prototype that was tested successfully on five users. During this testing round, users mentioned that they wanted to log into the website to save their work, some wanted a text editor with multiple fonts, and others suggested that color may help them distinguish some of the various elements of the web page, which may have been confusing within the black and white schema of our mockup.

While user feedback was helpful, we had to be careful not to take in too many suggestions. Although having an extensive text editor would have been appreciated by some users, we wanted to focus on the functionality of the design.

FEATURES

VIEW FINAL PROTOTYPE