Breathing Life into Threads: A Plaid Logo Animation Case Study

Animating a logo is no ordinary task; it’s a journey that transcends mere motion skills. Over many months, we delved into a multitude of creative experiments for the Plaid logo reveal, striving not only to set the standard for other motion assets but also to redefine the essence of motion at Plaid. Below is a summary of the steps we took to undertake this intricate process.

Ideation: Brand Story

The process took off with an engaging exercise in word association and open-ended inquiries. Our brand team came together to brainstorm words and concepts that encapsulated the dynamic essence of the Plaid brand. From this pool of ideas, we meticulously sifted through and selected keywords that harmonized with Plaid’s core values.

Among the many contenders, three keywords rose to prominence: Connections, Connectivity, and Centralized. These words not only resonated with our brand’s ethos but also mirrored its pivotal role in the fintech and open banking landscape. Picture it as the company at the epicenter of a seismic shift, where external forces and diverse entities converge to construct a resilient network of secure and dependable connections.

The open questions we posed during this process served as a compass, guiding us to articulate the precise emotions and impressions we aimed to evoke while also helping us steer clear of any misaligned narratives. In essence, these keywords symbolize Plaid’s position as a driving force at the heart of the fintech revolution, where the amalgamation of external influences results in a centralized, robust, and interconnected ecosystem.

Word association exercises kick-started our journey, setting things in motion.

Storyboards: Logo Deconstruction

We purposefully selected reference material to focus on what is inspiring and relevant based on our goals. We looked at logo reveals and motion examples from other brands that matched our keywords and picked the ones that more closely resembled ours.

After collectively considering the reference material, I began deconstructing the logo, which has a geometric and angular design, then created various build options in storyboards, including some color, 3D elements, and differently choreographed logo versions. When looking at storyboards, it was important to detail each step so we could understand the choreography and movement of the animation. In what order do the lines emerge and connect to form the final shape? We wanted the right mix of sequenced strokes from the logo’s exterior and interior to inspire diverse connectivity.

The keywords that resonated most where connections, connectivity, geometric, evolving and mathematical.

Initial Explorations

At this stage, the focus was on symmetry, with plans to address timing and easing later. We considered forming the logo geometrically, adding a hard shadow between the threads for an overlapping effect, and seeking to create some depth. The overlapping threads initially appeared too sharp, and we opted not to proceed with that approach. Eventually, we arrived at a minimum viable product (MVP) with potential. However, our brand continued to evolve in real-time. With the launch of new products and our keynote event on the horizon, we recognized the need for a logo reveal to tie it all together and support our ongoing design needs.

The first of many attempts at forming the logo mark, the theme of “weaving the thread” was already there — the sharp shadows show an overlap between the threads.

First Iterations

We carefully selected the direction that resonated most with Plaid as a brand during this stage. As we brought the various concepts to life, we started to see the themes of connectivity and networks emerge. The story of multiple financial entities converging to solidify the final mark. Amongst the options, the far right stood out as it effectively captured the heart of a network. We combined the idea of interconnectedness, resembling a woven fabric, and symbolized protection through interlocking arms. This choice truly embodied Plaid’s core values and identity as a brand. However, it was not quite there yet. The sharpness and hard edges were at odds with the approachability of our brand. A logo is often the first handshake with our audience, introducing our products and services. We want to invite our users to collaborate and build with us; the motion had to move away from seeming abrasive and move toward human and artisanal.

We moved forward with the third option; the threads weaving and upwards mobility aspect seemed to resonate with “connectivity,” Plaid being the formation of an extensive network of financial entities that work together.

Use Case Examples

To go a step further and help us choose, placing the logo within some in-product and real-world application examples was necessary to better understand where the logo could eventually live. Some versions lend themselves better as loaders, and others serve to tell the brand story in an animated intro or presentation slide. The use cases that worked best were in the context of a mobile splash screen. When inserted into a presentation or event branding slides, we learned that when paired with other graphic elements, the reveal can compete for attention and is best shown as the main character. From here on out, we involved our marketing partners to get their take on the logo and help us decide.

Each option was applied to a loading screen, splash screen and presentation slide to test in a real-world application.

Second Iterations

I rounded off the edges and played with the timing to make the threads appear approachable and as if they were being stitched together. As an exploration, I incorporated a “fake 3D” design inspired by the earlier storyboards. It seemed promising, reflecting the ambition to add depth to the animation. Sometimes, a vision doesn’t always land, and function wins over form. The logo’s contrast ratio and easing strayed away from the main themes. It complicated our intended message and was sometimes barely noticeable. Though the design lacked longevity and flexibility, the planned timing was close overall. It became apparent that applying the 3D illusion would not significantly enhance the overall visual experience or convey the message effectively. The upward mobility and elastic look and feel resonated with our themes, onward and upward.

The 3D effect (left) was a noble attempt. The choreography of the upward trajectory and the threads’ stretch resonated with the group, this was embedded into the final versions.

Final Review

These versions underwent refinements with slick adjustments in timing, easing, and duration. However, the crux of the matter was determining the direction in which the threads should form. We explored options like left, right-to-center, and bottom-up (as depicted in the left-side option below). To fine-tune the animation, I also dialed back the stretch and bounce on the threads, as it had begun to feel slightly overstretched. Our intent was to achieve a well-balanced movement while retaining a subtle elasticity.

There were some subtle differences in duration and timing, but the main point of comparison was the direction of the threads.

Final Outcome

The logomark forms in three beats. As the full Plaid logo is revealed, the lines converge and lock in precisely, connecting and interlocking to represent connectivity and interlocking forces that weave together.

And Voila! the threads final reveal.

Closing thoughts

Some learnings for designing a logo reveal for an existing brand:

Start from scratch: Don’t hesitate to sketch and brainstorm ideas, even after getting into animation. Understanding the brand’s essence and target audience is crucial for a successful logo reveal. Do the groundwork, and don’t be afraid to start over and try again.

Stay adaptable: Do your best to keep timelines on track and share progress regularly but don’t compromise on quality or experimentation. Flexibility allows for the best possible outcome, even if it takes some time to develop.

Seek external input: Valuable feedback often comes from non-designers. Involving marketing partners and product designers can help refine the vision and explore new directions and other potential use-cases.

Aim for shareability: Create logos that can be easily shared and used in various formats like Lottie, Gif, and MP4. Enhancing experiences and creating memorable brand moments should be the ultimate goal.

Credits:

Creative Director: Chris Warner
Motion Designer: Rodrigo De Lima
Thanks to the Plaid Brand Design team for all their thoughtful feedback.
For more visit https://dribbble.com/plaid