PAW (Puppies at Work)

Project Overview

ISL is constantly exploring ways to take advantage of new technologies. In honor of National Puppy Day, I worked on the team that created PAW, or “Puppies at Work,” a Slack-integrated tracking system to keep track of dogs in the workspace.

The project comprised of connecting the physical and digital worlds through a bluetooth tracking system that linked to a web application for viewing the location of dogs in the office.

For an in-depth look at how it works, read more here.

My Role

As the latest ISL experiment, PAW was comprised of a small internal team that brought the product to life in a few short weeks.

I served as front-end developer for the public facing marketing page and also helped in the styling of the internal dashboard application.

I also had the opportunity to explore animating SVGs through CSS (thanks to the illustrative work of Sarah Sugarman) and worked with Andrew Krawchyk, the project’s development lead, to implement some of the front-end application.

Animating SVGs

As soon as I began development, I wanted to work on animating the various components of the marketing page’s hero illustration in order to create a playful and interesting experience.

I started by exporting three parts of the scene for animation: a coffee mug, the computer screen, and, of course, Watson – our PAW mascot.

After combing through the SVG code, I targeted specific shapes for animation and got them moving through the use of CSS animations.

I explored animation loops through relatively simple CSS properties. Elements like the coffee’s steam were particularly interesting because of the need for offset timing to achieve an effect of easing in and out.

Responsive Development

In addition to working on SVG animations, my other task at hand was to develop the public-facing marketing page and also to lend support for the internal application.

PAW is currently available to ISL employees only. To learn more about PAW, check out this blog post.