Friends with Gifs
A multiplayer game that allows players to create and join a game.
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!
My Role
Lead Designer | DeveloperWorked on idation, prototyping, front-end coding, video editing using After Effects
Team member
Blake Williams - software engineer, Xavier Jean - software engineer, Navya Suri - software engineer
Tools
Sketch, Boostrap, HTML, CSS, Zeplin Giphy SDK, Google Cloud, Javascript, Docker, Photoshop After EffectsConcept 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!
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.
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"
Research
User Flow
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 learnedIt 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!!