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.

THREE_CUBES_COLOR_04.gif
 

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 04

Test Render 08

Test Render 08

Test Render 11

Test Render 11

Test Render 05

Test Render 05

Test Render 09

Test Render 09

Test Render 13

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. 

loader_modal_mock_02.gif
loader_paper_mock_02.gif
loader_paper_mock.gif
 

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.

 
loader_mock_save_05.gif