Nubank —Motion Brand
Created with:
Paulo Assunção - Brand designer
Duda Di Pietro - Design Manager
Ariane Morganti
Isabelle de Vooght - Design Manager
Maltchique - Photographer
The primary challenge was to develop a system that ensured consistency and scalability for a design team that expanded from 20 to 100 members across various disciplines—UX, graphic design, motion, and writing—in less than a year. Our goal was to maintain creative freedom and individual expression for designers while ensuring a cohesive brand experience.
To unify our approach to animation at Nubank, we established a set of motion patterns categorized by function. These behaviors were designed to foster unity across the brand while providing enough flexibility.
Choreography
The main motion pattern we adopted in our choreography was what we called the inverted symmetry. We decided to reinforce one of the features of our logo, which is the fact that it’s an ambigram, with the "n" and the "u" inverted in a symmetrical way.
Additionally, we knew that the sign for Nubank in Libras (the Brazilian sign language used by people with auditory disorders) is a symmetrically inverted motion with both hands. So, we decided to incorporate this motion pattern for our logo, transitions, and other animations.
Timing
The second category we added to our Motion Brand has guidelines on acceleration curves, suggested durations based on the distance being covered by elements, and other tips on how to grant a good flow in animation.Animated Assets
We created standard behaviors for most of our design assets like typography, photos, icons, calls to action, etc. The Brand System would let motion designers make their decisions for animation based on the narrative they were working on, but would advise them to stick with the branded behaviors every time a design asset didn't need to express a very specific idea or was entirely functional.Templates
Since we were creating standard behaviors for visual elements, we took the opportunity to create part of them as customizable templates inside After Effects.Although this is a presentation focused on the Motion aspect of our Brand System, animations were just a part of it, and the one I worked on in more depth. We also worked on every other aspect of our brand identity, such as typography, photography, grid, iconography, and layouts.
Brand refresh
In 2021, as part of Nubank's brand refresh, we developed the animations for our new logo. The logo features two primary behaviors: an entrance/exit animation—ideal for film openings and end cards
and a looping animation—perfect for app splash screens and other loading or idle states.