Written by Fernando Marar, Natalia Hazarian, Ariane Morganti, Dandara Hahn and Isadora Stevani
Nubank is one of the largest digital financial services platforms in the world. With more than eight thousand employees, a recent IPO, and a fast growth that achieved more than 70 million clients in Brazil, Mexico, and Colombia, Nu has reached another level of maturity of its business. With one important note: its consistent growth as a company brings along new challenges on how Nubank will maintain the consistency of its brand as well.
Consumers want to buy from brands they know and connect with. That’s what makes consistency such an important element for building brand strength and relevance. Repetition leads to higher identification, which is essential to create and maintain a deeper connection with our audiences.
A brand is a living organism that constantly evolves. Elected the strongest brand in Brazil in 2022 by WPP, Nubank has always stood for customer-centricity and for fighting complexity to empower people. Now, on a bigger scale—and on its 10th anniversary—, Nubank’s global branding team developed a tool that expands Nu’s core roots and purpose to a wider context, helping Nubank to maintain consistency and quality in its output across all platforms, countries, or services.
Here is a quick look at the Nu Brand System:
Video: Nu Brand System case. Source: Nu Brand Design Team.
The problem: a little here, a little there
Imagine a team with hundreds of marketing and creative professionals, besides external partners and suppliers, working on the strongest brand in Brazil which continuously launches new campaigns and products for its current and new segments. Orchestrating all brand strategy, guidelines, and assets in a simple-to-find, user-friendly, and always-updated platform, to guarantee that no content is ever lost, isn’t exactly—let’s say—trivial.
For this new step of the brand’s maturity, developing a new way to organize all of Nubank’s brand-related content was inevitable. The real question, in this case, was how it was going to be developed.
The solution: brand playground
We translated our Nu Brand System into a new and interactive BrandBook Tool—a public and online platform that can be accessed by everyone—to stimulate curiosity and adherence in the use of brand guidelines.
It also helps to deliver a great experience by showcasing our design foundations through interactive content and tools, where all the brand assets can be stored, delivered, and downloaded.
“The idea was to break the boring format in which brand guidelines are usually built—most often a static PDF. Our goal was to make a simple and eye-catching platform to make people want to access, interact, and learn from and with the brand guides.”
Fernando Marar, Sr. Brand Design Lead – Branding Team
Video: BrandBook Tool navigation. Source: Nu Brand Design Team.
Having in mind that it was built to keep up with Nu’s international expansion, the BrandBook Tool is currently available in English, Portuguese and Spanish.
The design process
Being simple is always the end, and the journey to get there is exciting. There was a long cycle of explorations from designing the homepage to understanding how to dispose of the content and the search engine, aiming for the most accessible and friendly way of navigation. Below you can find the main rationale behind the decisions made for the development of the tool.
Image: BrandBook Tool – Home evolution. Source: Nu Brand Design Team.
Modular Structure
After deciding to create an online tool to centralize and share all of the content, the next thing decided was its visual format. The modular shapes were used to create a more flexible structure to keep expanding for future contents: it facilitates new uploads and updates by allowing Nubank to easily modify or include one whole new module without interfering in the previous ones. With the brand expansion, that felt crucial.
Each block is dedicated to one different element of our Brand System. And all thumbnails become animated when the user hover the cursor over them, revealing a sneak peek of the content they’re about to see.
Navigation & Research
There are four different ways to navigate in the Tool:
- Infinite Board: infinite boards give a feeling that the work that is being input on the board is in constant expansion, exactly the case for the Nu brand. Combined with the modular structure, our Tool’s infinite homepage (vertically and horizontally) offers all users another way to visualize the Nu brand and creative assets, in a more organic and fluid experience.
- Search Bar: A search field that fastens the search for subjects or visits to specific sections, eliminating distractions.
- Index Menu: An index that arranges all of our main sections in a simple list, giving the users the possibility to access our guidelines in a more straightforward way. Matching the blocks in the main home, animated thumbnails appear when hovering over the titles.
- Login section: there is also a login section on the top left corner which can be accessed only by Nubankers and external patterns who work closely with our brand. The Tool unlocks confidential content when the user is logged in, like our brand positioning, design system (NuDS), and features dedicated to Nubankers.
Image: BrandBook Tool – Home screen. Source: Nu Brand Design Team.
“We started thinking about the best way of research and invariably we created the search bar. But that was just not enough to call attention, so we decided to create a modular canvas for eye-catching thumbnails and also a list menu, to cover all the different habits.”
Ariane Morganti, Sr. Brand Designer – Branding Team
Content & Tools
The content of each section is disposed of in tabs. They were created for online and offline consultation, on the website and also in a PDF version. In the online version, all sections also have an explanatory video about the importance and correct use of the brand asset disposed on the screen.
There are several interactive sections with tools to help the collaborators in their design routines. Here are some examples:
Color picker: When navigating on Nubank’s primary and secondary colors, by hovering the mouse over the colors the user discovers more information about each one and, with just one click, can automatically copy the HEX code.
Grid generator: The “Grid Tool” helps the user to produce and download grids according to the specifications needed. The user can change the height and weight values and click on the arrow to update the shape, and then download it.
Typeface settings: The “Type Tester” allows the user to browse and test Nu’s Gellix font in different settings. You can choose the type of font you want, change the font size to view the correct spacing between lines and characters, and test it in dark mode, for instance.
Eye-catching thumbnails
The thumbnails were animated with the objective of being visually appealing and grabbing the user’s attention. Our design team crafted specific icons with animation loops to clearly convey the essence of the content.
“We decided to use motion not just by the aesthetic approach but mainly to help the users understand what they are looking for. The animations bring a surprising aspect and help distinguish each section’s content.”
Isadora Stevani, Sr. Motion Designer – Branding Team
 Illustration |  Brand Positioning |
 Brand Prisma |  Brand Verbal Expression |
 Icons |  Templates |
Lessons learned & takeaways
Consolidating the Nu Brand System, and making it available through Nubank’s Brandbook Tool, is an important step for a new moment of maturity of the brand. If Nubank is all about fighting complexity to empower people, the way we promote our brand guidelines should also be able to translate that purpose and ambition.
Idealizing the Tool was definitely a team learning experience regarding the power within creating simple and friendly tools not only for customers on the “outside”, but also on the inside, helping every collaborator or partner to have an easy and friendly access to the Nu’s brand assets.
Come continue to build this journey with us!