Animating the Instacart World
Since we started, Instacart design has relied on static imagery to convey our services and products. With optimization techniques, static imagery has made significant improvements, but soon became a tale of diminished gains. Creativity was required to make progress. The latest initiative came from Himani, who introduced the concept of animations into our onboarding flow for our shopper app. It was clear that animations can be applied effectively to improve our messaging experience wide and encourage a user to move further down the funnel.
The right strategy to utilize animations
To understand the benefits of animations, we had to first reiterate our strategy for this project. We wanted to focus on users during the discovery phase who wanted to know what Instacart is and how it works. By conveying our message intuitively, we hoped to increase the number of signups for new users and increase the number of orders for current users. Just like any image asset, these animations will be scrutinized with A/B tests.
So, we do have a budget and understanding the ROI is crucial. However, it’s just as important to understand how the animated assets generated can be repurposed for other uses, such as in-app animations, shorter videos, and advertisements. This derivative can be utilized to amplify the ROI, while providing brand consistency. Think of this as design amortization.
We need to build a vibe around the experience so it feels meaningful and wholesome.
Yes I just put my own quote in a pull quote.
Benefits of Animation
Aside from the obvious motion, animating an asset allows us to make the individuals depicted in the scene homogenous and relatable as it removes a concept of race, gender, or lifestyle. On top of that, we don’t have to spend all this money on production including location, cast, and props (your CFO will love you 😘).
Beyond that we have a whole customer experience that doesn’t stop at a digital product, it comes to life in front of your very own eyes in the shape of your favorite foods and products that you love. It is extremely hard to recreate the feelings around this experience with static imagery. That’s where animation comes in.
Animation has a way of creating a universe, an atmosphere of feelings, and a chance to evoke emotion and delight. Whether it’s the subtle animation of a button or modal in the product, or a gif in an email, it’s the things that grab your attention and lock you for that split second — they can put a smirk on your face or make you remember that time you opened an ice cold La Croix at that picnic last weekend.
Executing
As the primary individual focused on Brand, I reached out to my friend Adrian Thompson, founder of Modio.tv and ThePlot.io (awesome storyboard creator/feedback app) to get the project off the ground and running.
With an understanding of what the strategy is, we collaborated on a script together that would depict the Instacart experience and our voice.
With brand assets in hand, we began to generate permutations of scenes that incorporated our visual ideas. These scenes were shared across our team to get feedback, which were then ready to add to our main frames.
Brand Integrity
With frames in hand, Adrian and his team utilized theplot.io and started a feedback loop of each screen. This was a crucial aspect in the project, as it was vital to understand the hierarchy and focus of each frame, all the while staying on brand.
I’m going to sidestep here and say this is a super crucial moment when working with anyone outside of your team when creating content. A lot of times a brand guide isn’t enough for someone to stay within and/or evolve your visual style. There are meticulous details that might go unnoticed or some that are unwritten.
For example, screens that depicted our UI such as ordering products by weight, or showing our delivery time selection, had to be carefully crafted as they are critical from a user satisfaction and revenue perspective.
In addition to each scene, brand guidelines must remain consistent whether they are an animation or not. This meant utilizing Instacart Green #43b09a, red for our Deals/promo items, red for our header, and having the carrot logo on our iconic green grocery bag and shopper t-shirts. All of these elements must be comprehendible in a span of seconds.
The largest deviation from images to animations is sound. We had to select music and voice that had the right vibe. For the voice, we submitted our script to Voices.com, where we found a standout candidate quickly.
With all the asset resources now gathered, the Modio team was able to create an animatic with the sketched frames. Each scene has a base frame that contains parts that can be animated. The layers utilized (e.g. fruits and vegetables) matched the style and aesthetic that we’ve used in other marketing collateral.
Our UI doesn’t match! gasp! 😱 This was intentional, don’t worry. The tradeoff here is simplifying the UI enough to get the point across in a matter of milliseconds. We kept our old fashioned green navigation bar just to show that we’re in the Instacart app, bringing that Instacart green with our white carrot again. Our store logos and item detail interface are a little exaggerated in sizing to help lead the viewers eye quickly through the fast transitions. Some elements are omitted to help this focus.
We iterated on the frames to get the compositions, colors, faux-UI and details to where we all were happy. As the team crafted the animation together, tightening the timing, the vision started to see the light.
With the voiceover in place, the jingle sitting just behind that, they added the final touches of sound FX and we reached a final version that we all were stoked to ship. Check it out below!
