Go Rascal: Project Background

Go Rascal is a Mortgage broker company based in Brooklyn, New York. It is co-owned by mortgage broker Scott Valins and David Williams, a corporate finance and operations professional. Their website was designed by TinyWins, for whom I was contracted by to create animated snapshots for the branding studio’s project case study.

The Problem

The branding studio had existing animated snapshots created by a motion designer they previously hired, which is uploaded below:

While the previous contractor demonstrated their animation ability through the compiled work above, a few problems can be noticed right away, from a functional standpoint.

1. The overall cropping composition of the tablet scene leaves out the logo and navigation bar of the website, which are vital from a UI/UX perspective.

2. The design of the website was not prominently featured in the tablet snapshot due to the speed of the animation; too much ease in the beginning and too quick of a scroll at the end to make out what you’re looking at. The transition into the next scene also does not leave enough breathing room at the end of the shot.

3. In the NYC subway advertisement shot, the house icons appear a tad too early, disrupting the hierarchy of the overall animation. Our eyes are drawn to the house illustrations first since they appear before the text, which throws us off. The shot also needs to stay on screen for a beat longer for legibility purposes. Finally, the placement and sizes of the house illustrations could be improved as the images are too close to the text.

4. Some three dimensional depth would have made the snapshots a lot more dynamic and interesting to look at.

Solutions

Tablet scene:

Since the purpose of the case study is to highlight the beautiful design work done by the studio, my thinking is that we shouldn’t spend most of the screen time on the animated banner. In fact, the animation of the banner can be pretty distracting so I opted to have the banner static. Through the strategic use of quick and eased scrolling, I wanted to highlight specific areas of the website that prominently feature the layout of the site.

To make the tablet shot more dynamic, I figured I’d utilize the background image as well through the use of eased zooms, a blur effect as well as synchronizing motion along the Y-axis.

Logo animation:

A good way to feature logo design is to have it animated in a way that captures the attention of the viewer. I had the logo reveal in a way that not only features its anatomy, but also having a couple of tiny details that really brings it together, primarily the landing of the dog’s cap and its wagging tail.

I appreciate the design of the location list snapshot and wanted to push it a step further aesthetically by taking it into 3D space, so I jumped into Cinema 4D.

First, I created a scene backdrop using Go Rascal’s brand colors and lit the scene up using a pretty standard three point lighting. Next, the animated video of the location list was applied onto an existing Apple iPhone 3D model from my library before animating the phone itself, adjusting the f-curve properties to get the ease I wanted. The position and angle of the lights had to be adjusted to make sure the reflections on the phone were just right.

One of my favourite assets from this project is the dog driving a car with a surfboard mounted on top. While this wasn’t specifically requested, I saw an opportunity to create a fun little moment as I thought the original animation of the driving dog on the website can be improved on.