Dispatch Hub Hero Animation

We spent the last week in a pandemic-safe version of our yearly hackathon, "discovery week." Everyone in the company proposed ideas for what they, or a small team, would work on during that week, entirely separate from existing initiatives.

We saw an iOS developer optimize our app for iPad and Apple Silicon, while an Android developer built out voice navigation for the Android app, and a backend developer built out a Zello Alexa skill.

Myself, the dispatch hub PM, and Sam worked together on a webpage for the Dispatch Hub to prepare for its eventual release. We collaborated on content and layout, while Sam then optimized existing illustrations for specific sections while creating fresh work for others, and I worked in combined design and dev. For this animation specifically, I'm dev and design for the ui and overall layout, while Sam was responsible for a larger series of character illustrations I hope to start using throughout this and other material.

The above animation is a looping dom-based animation that will be used on the page's hero. It shows an incoming call being accepted, messages exchanging, a call being accepted by another dispatcher, and finally the call being ended.

What's cool about this—to me at least—is that it's built all on existing code. The same colors, icons, and largely same components that are used in our production app are referenced from my animation environment, and where they change in production, it requires minimal effort to pull those changes into dependencies like this one. It's a much smoother workflow than producing video-based animations or entirely dev-independent content, where everything would have to be manually updated where there are major releases.

Hope to have the page up soon, but in the meantime, here's a preview.