Pandemic-Era Employee Recognition Portal

A web-based method to recognize health care workers when large gatherings were forbidden.

Problem

The only place that wasn’t shut down in 2020 was hospitals - they are the ones who really know how bad it was. Boston Medical Center was no exception, so when the time came for their annual employee appreciation event, an in-person gathering was out of the question. This appreciation and recognition was never needed more, though, so they turned to us to develop a solution.

Solution

The portal is meant to work like a dynamic, controllable film. The client provided videos and images to represent the different years at which employees began working at the hospital, and my job was to orchestrate them and animate them in time with a video provided by the hospital CEO. There were a few parts to this feature set that stood out: the client would need a content management system to coordinate all these assets, and it would need heavy animation.

For a flexible, quick-and-dirty content management system, we used Google Sheets. This is a little ironic since it was hosted on a Drupal site, but the short duration of the project, coupled with the (hopefully) one-time nature of the project didn’t warrant building out custom content types. Instead, the client would define the order, timing, and assets in a sheet, and I would parse the sheet to run accordingly.

For the animation, I turned to GreenSock (GSAP). This is a little atypical in React applications, since there are other more “React-friendly” libraries available. However, GSAP has an excellent coordination abstraction with timelines, which are critical to this application. While many React animation libraries are great at “flair” animations that are self-contained, I needed something more robust to coordinate animations across minutes of video playback. This meant an odd mixture of React and vanilla JavaScript to interop with one another to achieve the client’s desired effect.

Results

You can see the results on BMC’s website!

We received very positive feedback across the thousands of employees at BMC and on LinkedIn when BMC posted our efforts there. More importantly, the client was pleased enough with the result to bring us back the following year for another remote recognition portal.