top of page
Itaú Design System
Creating one Design System for all brands and segments
Client
Itaú Unibanco
Year
2021-2022
Type
Design System
Challenge
As part of the strategy to integrate services offered in different apps and brands in one super app personalized by login, the Itaú bank needed to create a new Design System to support all its brands and segments during the years of transition.
The challenges were:
• Optimize collaboration by eliminating time wasted on overlapping screen flows among teams.
• Elevate the efficiency between designers and developers
• Bring a high-level ecosystem experience to customers
• Reduce time to launch products across platforms, brands, and channels
• Strengthen trust and engagement in the Itaú brand
The main infrastructure pillar that enabled the greatest customer interaction transformation since the beginning of Itaú Unibanco's digital age.
+22
brands and segments served
+460
designers benefited
+5k
devs front-end benefited
using 4 different stacks
+6k
Product Managers benefited
67
components available with +2k variations, 329 icons and +500 illustrations
˜60%
more efficiency
from design to code
Results
What I did
-
discovered use cases of different products and brands;
-
defined design tokens and brands themes;
-
built optimize components and their good practices in documentations;
-
ensured accessibility standards;
-
measured the use of components;
-
acted as focal point for component use and interface guidelines;
-
trained team member to use and apply DS;
-
defined the design system contribution process.
xx%
Lorem ipsum dolor sit amet nsectetur
xx%
Lorem ipsum dolor sit amet nsectetur
Lorem ipsum dolor sit amet consectetur. Id ipsum vel dictum et integer in. Non lectus mi sit ipsum non etiam quis. Placerat amet tempor gravida amet volutpat dui nam odio nunc. Metus sed lacus massa pellentesque purus nullam.
xx%
Lorem ipsum dolor sit amet nsectetur
xx%
Lorem ipsum dolor sit amet nsectetur
Awards
IF Design Awards 2018
Brazilian Design Awards 2023 -Silver
Exploration
& Build
Section small
As a focal point working together with Itaú's Design System team, I met weekly with Work & Co. designers to align the new layout concept according to Itaú Design Language principles.
Besides that, I also talked with different teams and mapped use cases and pain points about iti, Itaú Personnalité, and other components brands, which until then used more than 3 different design systems mixed in their flows.
With an inventory of primitive tokens by brand, I defined descriptive color, sizes, typography, spacing, borders, opacity, and shadow semantics tokens to make easy design decisions.
Then I mapped stylesheets, and we decided to create a white label Core component library and mirror them in separate core brand libraries with styles of each brand.
This allowed us to centralize shape modifications and swap libraries, reusing flows between brands and segments (Figma variables didn't exist yet; it was released in 2023).
Each component created using design atomic methodology was made considering WCAG AA accessibility criteria and documented in Figma, exemplifying their variations and good practices to use.
Use
Section small
Along with other focal points, we built a use and contribution flow that was based on consultations with the focal point closest to the designer squad. Contributions could be of 3 types: correction, evolution or creation of a new component, be it team or core. As Design Chapter Lead, I was also responsible for taking the needs of designers from shared product squads to discuss design system improvements at iDS focal points meetings every two weeks.
Contribution flow
Performance in Design Critiques and consulting of component use
Portal
& Evolution
For visibility across all teams, a portal was built with documentation and roadmaps of component versions in each technology. It contains recorded training and space to report improvements. In addition, together Design Ops team I tracked usage metrics and also provided a form for designers, developers, and business people to give feedback every quarter.
Learnings
1.
DS it's a product that enables other products
it's not about just libraries of components and guidelines; it's about governance, alignment, use culture and collaboration to help teams to create and evolve higher quality products.
2.
Brand flexibility and autonomy
separate global colors from brand colors, bring velocity for Design System squad, and autonomy to the brands.
3.
Training and playbook are part of the adoption culture
each product squad has its own transformation pace and adopts a new component library at different times; that's why easy-to-find good documentation with onboarding, playbook training, and personal support sync and async is so important.
4.
Training is not enough if there is no close monitoring
the ops design team is reduced, so focal points and recurring meetings are needed to answer questions and communicate updates to each squad tribe.
_
Initial time of Voxel iDS:
Design Manager: Natasha Garcia
Coordinator: Ingrid Neuman
Product Designers: Adriano Ricci, Eduardo Bessa, Vinicius Perussi, Adriana
Motion interaction specialist: Gabriel Lopes
Product Manager: Beatriz Assis
Tech Lead: Victor Assis
Accessibility Specialist: Malu Dini
bottom of page