Nubank Brand System

During 2019/2020 we worked on Nubank's Brand System and the update of our brand assets. Part of this project is a system of guidelines and templates for animation.

The main challenge was to build a system that could guarantee consistency and scalability for a team that went from 20 to 100 designers of all disciplines (UX, graphic, motion, writers) in less than one year without limiting the creative possibilities and individual explorations for our designers.


A project made with:
Paulo Assunção (Brand designer)
Duda Di Pietro (Design Manager)
Maltchique (Photographer)



Motion Brand


In order to bring unity to the way we use animations at Nubank we established some motion patterns split into categories. We aimed to build these behaviors so that they "anchor" the animation in a way that it looks like Nubank's while still leaving space for motion designers and videomakers to create motion that is new and creative.







Timing


The first 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 to grant a good flow in animation.









Choreography


The choreography section of the motion system would show guidelines for relationship among multiple elements, trajectories on the screen, spaciality etc.



One motion pattern we adopted in our choreography was the inverted symmetry motion. We decided to reinforce one of the features of our logo which is the fact that its an ambigram, with the "n" and the "u" inverted in a symmetrical way.


Addtionally, 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.









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're 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 chance to create part of them as customizable templates inside After Effects.







Although this is a presentation focused in the Motion aspect of our Brand System, animations were just a part of it and the one I worked on in more depth. But we we also worked on every other aspect of our brand identity such as typography, photography, grid, iconography and layouts.

 









Grid generating tool


After defining the framework for the grid in our layouts we used javascript to create a grid generating tool. The designers in our team used it by defining the specific kind of grid they needed and then downloading it to whatever application they were using


 










©evertonguilherme2021