Friends with Gifs is a multiplayer game that allows players to create and join a game.

Overview

A creator can decide the number of rounds they will play, and other players will receive a shared code from the creator. The game provides a prompt, and players have to select the funniest gif from a set of randomly chosen gifs. Players rate each other’s choices, but cannot vote for themselves. At the end of the round there is a winner, and at the end of the game we show a final winner who received the highest likes from players. Play Gifs Against Humanity with Your Friends!

Team

Hyejun Youn - designer | Navya Suri - software engineer
Blake Williams - software engineer | Xavier Jean - software engineer

My Role - UIUX Designer

Worked on ideation, prototyping, front-end coding, video editing using After Effects

Tools

Sketch, Boostrap, HTML, CSS, Zeplin Giphy SDK, Google Cloud, Javascript, Docker, Photoshop After Effects

Concept Background

Play Gifs Against Humanity with Your Friends!

We were inspired by Apples to Apples, Use your Words and other such game. We thought we could build a user friendly game using Giphy's API and Google Cloud that you can play with your friends!

Concept Background

Play Gifs Against Humanity with Your Friends!

We were inspired by Apples to Apples, Use your Words and other such game. We thought we could build a user friendly game using Giphy's API and Google Cloud that you can play with your friends!

How We Built It

Our team was divided into two groups: front-end and back-end developers. Front-end developers started from wire-framing the game using Sketch and Zeplin, then we moved to coding the pages using HTML and Boostrap. Back-end developers worked on NodeJS, SocketIO, Giphy's API and Google Cloud Engine.

GIPHY SDK

"The first and largest GIF search engine, user can gain free access to our ever-growing content library of GIFs and Stickers, plus brand new features like animated Emoji and Text"

Competitive Analysis

We searched for several card game application.

Mission

Create a “Cards against humanity” game application that use GIPHY SDK to generates random GIFs and multiple users can easily choose and vote from the list of GIFs.

Userflow

We decided to have two different users. An inviter who starts the game and chooses the number of players and games. The inviter also generates code that can be shared to another user visitor. A visitor needs to receive automatically generated code from an inviter to join a game that the inviter created. The game requires at least two users to begin playing.

Challenges

Initially we struggled to even settle on an idea. For the longest time we were set on making a VR/AR experience. 3 hours of discussion led us nowhere and this idea spawned out of nowhere. We decided to go forward with it mostly because we really wanted to play this game. We started by building the entire app using Flask but realized the need for sockets soon and had to switch everything over to a NodeJS server instead. SocketIO was new to all of us, and we really struggled with understanding it. For the longest time, we were not able to fix the issue of sockets disconnecting on redirects.

What we learned

It was our first time using Zeplin to export from sketch Artboards. We never used SocketIO and struggled with that. Giphy's API was a first time use too, and it turned out to be a lot of fun and laughs while testing. It took a while to figure out how everything worked together, but we managed and learned a lot!!

Next Step

We have to continue creating a user interface to enhance user experience, making it more playful and entertaining. Minor bug fixes that will improve the user experience. We are open to feedback too! Please hit us up :)

What we learned

It was our first time using Zeplin to export from sketch Artboards. We never used SocketIO and struggled with that. Giphy's API was a first time use too, and it turned out to be a lot of fun and laughs while testing. It took a while to figure out how everything worked together, but we managed and learned a lot!!