Collective Idea loves animated gifs.

Our Slack channels have Giphy and RightGIF integrations, and a few of us have a large collection of reaction gifs in gifwit. We have a lot of fun with gifs, and reaction gifs find their way into most methods of communication we use on a daily basis.

Animated Gifs as a Development Tool

We found another use for animated gifs that has proven to be a powerful tool in development. In order to proactively communicate and show our progress to clients sooner in the process, we started screen capturing features into animated gifs and posting them into our pull requests or user stories. It had an immediate positive impact on our relationship with our clients and had many side effects that were unexpectedly awesome. Now, many of our project teams use animated gifs to capture progress, demo new features in pull requests, and document features.

On our cron monitoring service Dead Man’s Snitch, we recently added a Code Language Switcher to improve display of code in the docs.

The animated gif was created to facilitate communication and a feedback loop early in the process, allowing the team to collaborate on the direction the feature was heading.

Awesome Side Effects

Creating animated gifs of features had several unexpectedly awesome side effects on our development process.

Our Shipped Code Quality Improved

When implementing a feature, our tendency as developers is to click through only the portion of the feature we are working on at the time. This allows us to code efficiently while working through each piece of a feature. Unfortunately, it can result in each piece of the feature working independently, but the full feature fails to work cohesively.

By screen capturing ourselves clicking through the feature start to finish, we are able to pinpoint and rectify flow issues and bugs before we ship a feature. This means that we are catching the issues and not our clients or their users.

Team Hive Mind

When working on a team, it can be easy to get siloed into a specific part of the application or a specific type of problem space. Animated gifs on pull requests allow all members of the team to understand how the feature should work, where in the application the feature exists, and how to use the feature.

It means that any developers that are code reviewing the feature do not necessarily need to be intimately familiar with the codebase or product to be able to comment on the functionality or flow of the feature in the gif.

Developer Handoff and Documentation

The animated gifs serve as documentation for a completed feature. It’s a visual representation of a feature and how it works. It can serve as a reference point or training material for future developers or clients.

If a developer needs to handoff feature development, they can use an in-progress gif to understand where the feature stands and what is left to complete. The gif is a concrete base to continue to build from or improve on. Any changes that need to be made can reference the gif so the improvements can be visualized more clearly by both client and developer.

Client Relationships

Animated gifs are a wonderful way to show your client how a feature works and interacts within their system before it is shipped.

The gifs gave our clients confidence.

They had visual proof of the work we had completed. They could see that we had made progress and that the work they requested is getting done.

They were confident that the work we were doing was in alignment with their expectations.

And, when the work we were doing was misaligned, they had the opportunity to course correct with us before the work ever reached their users.

---

Want to adopt using animated gifs for your team? Many of us use LiceCap as our screen capture software. There are other options, find one you like! Happy screen capturing!