SPlash: Loaders
Early on in my time at Splash, we decided to create a new, on-brand system of loaders for the web. We were in the process of launching a completely new navigation and UI, and wanted to replace our inconsistent legacy loaders with something that encompassed our new look and feel. We also needed a set of design guidelines to help our dev team implement them smoothly, and for a consistent experience across the product.
Team: Ross Gaither (Director of Product Design), Jon Saft (Product Owner), Dani Lewandowski (Tech Lead), Kyle Shanks (Frontend Engineer), Devin Marsh (Engineer), Izzy Bulling (Product Design, Motion Design)
01. EXISTING LOADER AUDIT
Step one was to understand how our current system of loaders was working. I went through the product and found that we were using multiple versions of multiple loader styles. Most common was a generic circular “worm”. This audit (kept in a simple spreadsheet) became useful for recognizing patterns within the product, and determining how many options we might need for a new set of loaders.
02. ITERATIONS
Next, I started experimenting with different types of motion and loops. In an initial brainstorming session with the greater design team, we had decided that a simple cube that our brand design team had created for marketing material would be the perfect starting point. Using this as inspiration, I started experimenting with 3D rotating cubes in after effects.
I started by using randomly chosen colors to differentiate the sides of the cubes, but switched to our brand colors as the team got closer to a the feeling we were going for. We wanted something playful but not attention-grabbing, interesting but not distracting when used inline.
Test Render 04
Test Render 08
Test Render 11
Test Render 05
Test Render 09
Test Render 13
03. TESTING IN CONTEXT
As we got closer to an execution of this style that we liked, we wanted to see how the loader would work in context, in our existing product. This would help us determine at which sizes it should be used, if/how it could be used with text, and other guidelines and specifications.
I worked on a series of mockups, combining samples of our interface with different versions and sizes of the loader.
04. STYLE + USAGE GUIDE
After rounds of testing, we were able to create a style guide, with full guidelines on where and how this loader could be used in the future. We also realized we needed a white loader for event pages, eliminating our brand colors to keep a fully white-labeled experience for our customers.
05. IMPLEMENTATION
I worked with one of our super talented developers, Kyle Shanks, who recreated the animated mockup I had made completely in JavaScript for faster load times and a top-notch implementation. We also worked together to create a “Save” animation, complete with a success state.
