Xplorlabs - UL
Client story
The increasing availability of advanced technologies both in the classroom and at home is prompting a revolution in how we learn and how we teach. UL and Genuine saw an opportunity to leverage several web-based technologies to deliver STEM education in a new way: by bringing students directly into the lab to learn by doing.
The result was UL Xplorlabs, an interactive platform where students could learn the science of safety through video and experimentation. A joint effort between UL’s experts and Genuine’s development and video teams, we first built two educational modules for Xplorlabs: Portable Electric Power and Fire Forensics. While these original rich experiences from 2017 have since been reimagined to unify the presentation as more modules were added, they’re still a testament to the importance of creating high-value, high-effort educational content.
Module 1: Portable Electric Power. Electrons in a lithium-ion battery cross the Separator layer during discharge and while charging. The left side was all expression-driven 2D work, and the hoverboard on the right was done in Cinema with Sketch & Toon.
For Module 2: Fire Forensics, a combination of stock furniture models and simple Turbulence FD setups were used to illustrate the “anatomy” and life cycle of fire.
Craft story
Early on in the concepting phase, it was decided that everything from exploding hoverboards to a burning couch needed to be as realistic as possible. That direction limited our options in development, cutting out lightweight realtime solutions like Unity or Three.js. Instead, the front end team leaned heavily on Pixi.js, and I built the visuals for each interactive component with a combination of looping video and sprite sheets.
A growing data footprint and creeping load times were always top of mind for these experiences, so the main challenge was in stuffing lots of rich detail into as few frames as possible. This was easiest in the Fire Forensics module, where we could get away with as few as 36 unique frames to loop small crackling fires.
For two interactive tests in the Portable Electric Power module, the Drop Test and Abusive Overcharge Test, we had to cheat to reduce our reliance on sprite sheets. For example, rather than using rendered frames with the correct perspective to lift and drop the hoverboard in the Drop Test, we lifted and dropped the hoverboard sprite using CSS. This reduced the density of our sprite sheet by upwards of 96 precious frames, while keeping the experience immersive and interactive. I still got to blow it up in the end, though, so I tried not to sweat the small stuff.
Personal story
Aside from the always-worthy goal of teaching kids in a fun way, one of the most rewarding parts of this project was the back and forth between myself, our team, and the experts at UL, in order to learn the entire curriculum front to back. Through multiple rounds of sketches and conference calls, we visualized everything from how electrons move between cathodes and anodes, to the difference between a "vented" and "unvented" house fire. The entire experience brought me back to my days working in broadcast documentaries, where becoming an instant expert in a historical or scientific subject was part of each and every job.
By the end of the project, I had a few cool clips for the reel to be sure, but that was only a small part of why I was glad to be a part of this project. The chance to learn, and then teach, was much more valuable than even the very coolest finished animation.
Credits
All 3D execution (excluding select stock models) and compositing by Jared Flynn.
2D animation and editing by Jared Flynn, Alex Morrow, Omar J. Cruz Rubio, and Giovanni Carbonell.
Agency: Genuine
Client: Underwriters Laboratories