To improve customer sentiment when using custom ShotGrid tools, I worked with my Development team to create engaging Loading Screens which our users enjoyed immensely.  When users had to wait for a tool to load or process data, they were treated to a loading screen assigned to their project.

UX Design is important.  Not only does it improve the usability and accessibility of a digital product, but it also focuses on the emotional design aspect, which helps create positive emotions and feelings for users when they interact with the product.  It is vital for any product looking for adoption.

Created for Mickey and Minnie's Runaway Railway projects installed in Disneyland and Disney World:

Created for Tiana's Bayou Adventure projects installed in Disneyland and Disney World:

The following is an example of the very first loading screen created for ShotGrid projects at Walt Disney Imagineering. After the developer that created this left the company, I made a plan to create more (and more interesting) loading screens to keep our users engaged in the product.

One morning in December, when work had slowed down due to the holidays, I invited my development team to join me on a Zoom call to create some custom loading screens. Everyone joined the call in their pajamas, and we figured out how to do it! From this fun and engaging call, we created loading screens for Cruise Lines (a spinning wheel), Frozen (a jumping Olaf), Marvel (Spiderman spinning a web), and a couple screens for Tiana's Bayou Adventure (the Crocodile above, and a Firefly). The Train was my pet project.

Reference photos are a necessity to creating physical and digital assets, whether they are being built, drawn, or modeled in the computer. Here are a couple reference photos of the Train prototype used for the attraction.

Using the reference photos, I created an Scalable Vector Graphics (.svg) file of the Train using Boxy SVG. I then exported the .svg and used it in the .css file that was read by the Loading Screen mechanism in ShotGrid. Here is a snapshot of the .svg file:

Finally, I found a great picture of Goofy on the internet. I extracted his waiving arm, moved the arm so the elbow was at the center of the picture (so it would pivot correctly) then combined the images with the train and added animation.

And finally, the completed Loading Screen: