How they made it

We reached out to the creative minds behind GIPHY Arcade to learn just how they made this Webby-nominated interactive game. Hear from their Director of Design and Senior Product Engineer on early concepts and sketches, to how they gave users the power to remix games.

Timeline of the creative process

Inspiration: We boiled down the task to the basics: who does this product serve, what functionality do we want to deliver, and what feelings do we want to inspire in those people.

Workflow: Our process adapts by eliminating distractions and relentlessly focusing on the primary features needed to deliver an MVP version of the project

Results: By focusing first on the bare essentials, we ensure that the resulting work is strong and focused and will be delivered to users in a timely manner.

You can do it too with monday.com

Webby Awards partner monday.com is so impressed with GIPHY Arcade that they created a workflow inspired by the project!

Try this template

Tips from the Team

"Generating excellent work is hard to do, however I find that excellent work happens when you design for it again and again. Know yourself, know your team and know how to optimize for the best possible outcome. Consistent excellent work is not the result of random pieces falling in place, but a concerted effort to work at your peak abilities again and again. This might mean providing yourself a distraction free environment, continuously refining for the best ideas or surrounding yourself with the most talented individuals you can find. Then repeat your process with outside feedback from people you trust, or at least enough feedback from strangers that forms patterns of feedback you can act on." - Ralph Bishop, Director of Design, GIPHY

"My tip for designing excellent work is to continually ask yourself if what you're designing is something that you yourself would love to use and something that you consider interesting and useful. If not, ask why and change course. While we're often designing for people whose needs could differ from our own, the importance of trusting your gut and relying on your own instincts as a creator, consumer, and human being cannot be overstated. If you're building something that you truly believe in, and that you honestly feel offers something the competition doesn't, others will too." - Nick Santaniello, Senior Product Engineer, GIPHY

See the full team
Inspiration

It seemed a natural evolution to explore allowing our users to send bite-size pieces of interactive content to each other.

What was your inspiration?

Expanding on GIPHY’s success with GIFs and Stickers, it seemed a natural evolution to explore allowing our users to send bite-size pieces of interactive content to each other.


Many of us fondly remembered the freewheeling, accessible nature of playing Flash games on the web, and thus the idea to allow our users to quickly whip up and share topical, funny and bizarre games that require no knowledge of how to code or how to create animations was born. By leveraging the GIPHY Sticker library in lieu of spritesheet animations, we figured we could create a super low-lift tool for creating games, and a universally accessible way for users to share and play them.

How did you approach this challenge?

We boiled down the task to the basics: who does this product serve, what functionality do we want to deliver, and what feelings do we want to inspire in those people (for us, designing for emotion is just as important as the technical details).

By simplifying the challenge to two or three key goals, we stayed focused and made sure the product delivered. We also isolated any potential pain points or challenges ahead of time and devised a plan to mitigate them. That prep work helped us set expectations appropriately and ensured everyone felt like they were working towards the same goal.

Workflow

Cardinal to any successful collaboration is a profound respect and appreciation for what your colleagues do.

How does your team work across capabilities and disciplines?

Collaborating across capabilities and disciplines can be extremely challenging. Cardinal to any successful collaboration is a profound respect and appreciation for what your colleagues do. If a task is something you can’t do yourself, it must be something that takes someone else’s expertise, skill, and commitment.

 

By constantly being grateful for those qualities and envisioning what we can do with our own expertise to make our colleagues’ lives easier, we strike to create a culture of generosity and goodwill that makes overcoming hurdles more painless and allows us to focus instead on the excitement and enthusiasm of delivering the final product to our users.

How does your approach adapt to the needs of a project?

Our process adapts by eliminating distractions and relentlessly focusing on the primary features needed to deliver a MVP version of the project.


Sometimes it’s painful to cut a favorite feature or sacrifice a beloved design, but by focusing first on the bare essentials, we ensure that the resulting work is strong and focused and will be delivered to users in a timely manner. From there, we collect feedback and continue to iterate to add depth and functionality that compliments and enhances the user experience.

Was there anything out-of-the-box about your approach for this project?

One unconventional approach we took to GIPHY Arcade was to embrace the possibility that the works created with this platform could look inherently discordant and raw.

 

Often in our other web-related work (and in game development) the goal is to make the overall presentation appear as polished and seamless as possible. By embracing contrasts in the wildly varying visual styles of GIPHY Stickers and our in-house backgrounds and UI, we simultaneously harkened back to the nostalgic days of Flash games and glitch art on the web, while also making the platform accessible and inviting for everyone to participate.

How do you digitally manage your projects?

We use an array of different collaborative platforms to stay organized, informed and in communication with one another. Some examples include management platforms like JIRA and Github, communication platforms like Slack and Google Meet, and then Google Drive and Dropbox for file collaboration and organization.

How is the pandemic and remote working impacting your team?

Despite the multitude of challenges remote work presents, GIPHY has been able to maintain momentum by keeping in touch frequently via Slack and Zoom with an increased understanding and compassion for what everyone is going through, and never questioning each other’s need for space or time away. By keeping these communication channels comforting (rather than pressuring), we’re encouraging each other to continue to participate and to deliver the same great work.

Watch The Case Study

Results

The importance of trusting your gut and relying on your own instincts as a creator, consumer, and human being cannot be overstated.

Any advice for creative teams looking to make great digital work?

(From Nick Santaniello) My tip for designing excellent work is to continually ask yourself: would I love to use this? Would I consider it interesting and useful? If not, ask yourself why and change course.

 

While we’re often designing for people whose needs could differ from our own, the importance of trusting your gut and relying on your own instincts as a creator, consumer, and human being cannot be overstated. If you’re building something that you truly believe in, and that you honestly feel offers something the competition doesn’t, others will too.

What does being named "best of the Internet" mean to you?

Being named “Best of the Internet” is a huge honor for GIPHY Arcade as it means we’ve succeeded at our goal to deliver something unique and interesting into the landscape of creation tools and web-based games. It’s great encouragement to continue to embrace what’s weird about ourselves and about the web!

You can do it too with monday.com

Webby Awards partner monday.com is so impressed with GIPHY Arcade that they created a workflow inspired by the project!

Try this template
Drag