Itaú BBA
About the Company
The Itaú Bank is one of the leading financial institutions in Brazil and Latin America, playing a crucial role in the banking sector. Founded in 1945, Itaú Unibanco was formed through the merger of Banco Itaú and Unibanco in 2008, creating a more robust and comprehensive entity.
Itaú Unibanco has expanded its global presence, extending its operations to several countries beyond Brazil, including the United States, Argentina, Uruguay, Chile, and others.
Itaú BBA is a division of Itaú Unibanco focused on serving corporate clients by offering specialized financial solutions. It stands out for its performance in investment banking and corporate finance. Its activities include expertise in Corporate Services, investment banking services, financial solutions tailored to the specific needs of its corporate clients, and risk management and governance.
Context
The context involves the creation of a platform designed to assist Officers, Middle, Large, and CIB (Corporate and Investment Banking) in managing client products through dashboards and the IBBA 360 platform. The entire development is being carried out using Salesforce and the Salesforce CRM. The primary goal is to offer an integrated solution that enables more efficient and comprehensive management of the products and services available to high-net-worth and corporate clients, providing a complete and up-to-date view of their portfolios and financial needs.
My Role
As a UX/UI Designer, my activities encompass several crucial areas essential for developing high-quality digital products.
- Design System
I contribute to the creation and maintenance of a consistent and scalable Design System. - I develop and update reusable components to ensure visual and functional consistency across all platforms and products.
QA Designer
- I conduct usability testing and evaluations to identify issues and potential improvements in products.
- I collaborate with development teams to ensure that design and quality standards are met throughout all stages of the development cycle.
UX/UI Activities
- I conduct user research to understand their needs, behaviors, and preferences.
- I create wireframes, interactive prototypes, and high-fidelity designs that meet user requirements and business goals.
- I collaborate with cross-functional teams to translate business requirements into effective design solutions.
- I perform usability testing and iterate based on feedback and performance metrics.
- I develop user flows, journey maps, and other tools to visualize and optimize the user experience across all product interactions.
This comprehensive approach ensures that the products I work on not only meet the users’ needs but also align with business objectives, delivering functional and visually engaging solutions.
1. Design System IBBA 360º
The Challenge
The challenge was to integrate the IDS (Itaú Design System) into the design system available on the Salesforce platform. This required the creation of an easy-to-use component consumption system, made available via Figma, and the quality assurance of interfaces, as well as their implementation in production.
Salesforce
Salesforce is one of the leading CRM (Customer Relationship Management) software companies in the world. It offers a variety of cloud-based solutions to help businesses of all sizes manage customer relationships, automate business processes, and drive growth.
The Salesforce platform includes a wide range of products and services, from traditional CRM to marketing automation tools, data analytics, team collaboration, and custom application development. Salesforce is known for its flexibility and ability to adapt to the specific needs of each client, as well as its customer-centric approach and focus on continuous innovation.
Design Process
Identification of Salesforce and IDS Components
The development of the IBBA 360 Design System (DS) began with a detailed survey of Salesforce components and their adaptation to reflect the style and visual standards of the Itaú Design System (IDS). The goal was to ensure a consistent and brand-aligned identity without compromising functionality and scalability within the Salesforce ecosystem.
Process Steps:
- Component Survey: A comprehensive analysis of Salesforce standard components was conducted, identifying their functionalities and limitations. In parallel, IDS components were analyzed, mapping their visual, interactive, and accessibility characteristics.
- Correspondence Between Design Systems: Each Salesforce component was compared with its equivalent in the IDS, seeking similarities in structure and style. For components without a direct match, visual and functional adaptations were proposed to align with Itaú’s design guidelines.
- Visual and Functional Adaptation: Salesforce components were adjusted to incorporate IDS elements such as colors, typography, spacing, and more, creating a visually consistent experience.
- Documentation and Standardization: All adapted and newly created components were documented in a centralized library. The documentation included usage examples, variations, and technical specifications to facilitate use by design and development teams.
Construction of Complex Components
In the development of the IBBA 360 Design System, complex components were created, such as:
- Tables
- Charts
- Filter Bar
- Header with Big Number
Additionally, in Figma, features were implemented to enable and disable component variations, allowing designers to quickly adjust the configurations of each element. This functionality streamlined the design process, making it more efficient to create custom layouts and meet the specific needs of each page.
The main idea was to develop reusable components and standard pages, enabling faster design and implementation of new interfaces.
The components were developed in the Salesforce environment, using LWC (Lightning Web Components). This approach provided the following benefits:
- Scalability: Components optimized for various use cases.
- Process Agility: Reduced delivery time for new screens and workflows.
- Visual and Functional Consistency: Alignment with the Design System standards and brand identity.
Special Tokens: Colors and Charts
The Design System colors were developed based on the bank’s official palette but adapted to meet accessibility criteria. The goal was to ensure the colors were functional, visually aligned with the brand identity, and accessible to all users.
Colors for Charts
For charts, it was necessary to create a custom color palette, as the IDS (Itaú Design System) did not include specific colors for charts.
- A palette was developed based on combinations that prioritize visibility and contrast, mapping as many variations as possible.
- The palette was tested to ensure that color combinations did not hinder legibility and were accessible to users with visual impairments, such as color blindness.
Tools Used
- Adobe Colors: To create and organize the palettes.
- Stark: To test color contrast, ensuring compliance with accessibility guidelines (WCAG).
- Color Blind: To identify issues related to color blindness and adjust the combinations accordingly.
Tests and Validations
- Interactions between colors and their combinations with font overlays were tested to ensure text readability in different contexts.
- Colors were applied to chart prototypes and iterated based on feedback and technical validations.
Results
- A functional palette aligned with the bank’s visual identity and accessible to users with diverse needs.
- Optimized charts that ensure clarity and efficiency in data communication, regardless of context or user visual limitations.
Promotion of Libraries and Usage Guide
After the development of the IBBA 360 Design System (DS), it was essential to create strategies to promote the libraries and guide teams on the proper use of the established components and standards.
Promotion Strategies:
Centralized Library:
- The libraries were made available on platforms such as Figma for design teams and Salesforce for developers.
- The structure was organized clearly, with categories that facilitate the location and reuse of components.
Comprehensive Documentation:
- A detailed usage guide was created, including:
- Descriptions of components and their variations.
- Examples of application in different scenarios.
- Best practices to ensure consistency and accessibility.
- The documentation was hosted in an easily accessible environment for all stakeholders, such as Confluence or internal sites.
Continuous Support:
- A support channel was made available to address questions and gather feedback on the use of the libraries and guide.
- Regular updates were implemented based on the needs identified by the teams.
New Toolkit
With the updates to the Lightning Design System, it became necessary to create a dedicated space for improvement and integration of the new components.
A new environment called New Toolkit was established, serving as a platform for:
- Study and Exploration: Allowing teams to explore and understand the capabilities of the updated components.
- Component Development: Providing a collaborative space to design and prototype new elements that align with the updated system.
The New Toolkit ensures continuous evolution of the design and development processes, fostering innovation and maintaining consistency with the updated Lightning Design System standards.
2. Quality Analysis in UX
The Challenge
During my work as a Product Designer, I identified the need to develop a UXQA (User Experience Quality Assurance) method to ensure that the implementations under development maintained the quality and fidelity of the prototypes created.
The main challenge was to ensure that the designed experience was consistently translated into the final product, especially within the Salesforce ecosystem, known for its technical complexity and customizations.
To guarantee a high level of quality and a quantitative way to compare products, I created an evaluation table that measures the acceptance rate of the deliveries, based on the main UX quality heuristics. This model allowed for:
- Objective quality monitoring: Evaluating interface elements, usability, and consistency with clear metrics.
- Deviation identification: Facilitating the detection of differences between prototypes and implementations in the development stage.
Process
The first phase of the UXQA Method development focused on the research and structuring of metrics and quality criteria for UX and UI. The main goal was to establish a solid foundation to evaluate the quality of deliverables throughout the following stages.
Phase 1:
Research of Articles and References:
I conducted a detailed analysis of academic articles, case studies, and market best practices, focusing on quality methodologies applied to digital product design. This research was essential to understanding challenges and identifying reliable benchmarks.Mapping Metrics and Quality Criteria:
Based on the research, I organized and categorized the relevant metrics for UX and UI. Among the main mapped criteria are:- Visual Consistency: Fidelity to the design system.
- Usability: Evaluation based on classic heuristics, such as Nielsen’s.
- Accessibility: Compliance with WCAG guidelines.
- Efficiency: Response time and navigation flow.
Definition of a Set of Indicators:
From the metrics identified, I defined a set of key indicators to be used in measuring the quality of each development stage. These indicators served as a foundation for both quantitative and qualitative evaluation, ensuring greater objectivity in the process.
Phase 2
In the second phase of the UXQA Method, the focus was on developing a practical tool to facilitate the evaluation and ensure efficiency in applying the defined quality metrics.
- Steps of Phase 2:
Creation of the Excel Spreadsheet:
I designed a structured spreadsheet to organize all the metrics, quality criteria, and indicators defined in the previous phase. This spreadsheet served as a centralized repository for data collection and analysis, enabling a clear and systematic evaluation process. Automation of Calculations:
To ensure efficiency and eliminate manual errors, I automated the calculation processes within the spreadsheet. This included:- Dynamic Scoring: Formulas to automatically calculate the acceptance percentages based on the results of each metric.
- Weighted Metrics: Integration of weight factors for specific criteria to reflect their importance in the final evaluation.
- Real-Time Results: Automatic generation of consolidated scores and visual indicators to provide an immediate overview of quality leveloth quantitative and qualitative evaluation, ensuring greater objectivity in the process.
Phase 3
In the third phase of the UXQA Method, the focus shifted to the practical application of the process through testing and validation of the implemented screens.
Steps of Phase 3:
Testing with Development:
- Collaboration with the development team was critical in this phase to ensure the alignment of expectations and deliverables.
- The implemented screens were tested using the previously defined metrics and evaluation criteria to identify deviations from the prototypes.
- Tools such as Figma and Salesforce’s development environment were used for side-by-side comparisons to validate fidelity to the design.
Acceptance of the Implemented Screen:
- Screens that met the predefined acceptance criteria were marked as approved.
- For those that required adjustments, feedback was provided to the development team with clear, actionable points for improvement.
- Metrics from the automated spreadsheet (created in Phase 2) provided objective insights into the acceptance rate, ensuring transparency in decision-making.
Work Flow
After discussions and analysis of the process stages, it was decided, in alignment with the business and development teams, that the UXQA Method would be applied before entering the production environment, ensuring that the deliverables comply with the prototypes and the defined quality criteria.
Process Stages
After the Design Handoff:
- The process begins as soon as the designers hand over the prototypes and specifications to the development team.
- This initial stage ensures that the implementations are evaluated from the start, promoting clear alignment between design and technical execution.
In the Testing Environment:
- UXQA is implemented at this stage, when the screens have already been developed but are still in a controlled environment, with no direct impact on the end user.
- This step allows for identifying and correcting inconsistencies quickly and efficiently, reducing risks before production.
Before Entering the Production Environment:
- The final stage of UXQA ensures that the implemented screens meet the established quality standards.
- Only after approval are the deliverables released to the production environment, becoming accessible to the end user, with full confidence in the results.
Advantages of Implementing at This Point:
- Strategic Alignment: The consensus between the business and development teams ensured that the method was efficiently integrated into the process.
- Early Error Correction: Adjustments can be made before issues reach the end user, reducing rework and delays.
- Quality Delivery: Ensures that the final product accurately reflects the prototypes, meeting the expectations of all stakeholders.
UXQA Spreadsheet - V1 Complete
The first version of the spreadsheet was designed to be comprehensive, providing a detailed analysis of UX and UI quality.
Key Features:
Extensive Criteria: Includes all metrics and heuristics mapped in the initial phase of the method, such as visual consistency, usability, accessibility, and efficiency.
Automated Calculations: Advanced formulas to calculate the acceptance percentage based on multiple weighted indicators.
Results Dashboard: Graphs and visualizations to facilitate data analysis.
Ideal Use:
Complex projects with multiple flows and a greater need for detailed analysis.
Processes requiring extensive documentation and in-depth reports for stakeholders.
V2 Spreadsheet - Simplified Version for Salesforce
Based on the learnings from V1 and the specific context of Salesforce, a simplified version of the spreadsheet was developed.
Key Features:
- Focus on Essential Metrics: Reduced the number of criteria to prioritize those most relevant to the Salesforce ecosystem, such as adherence to the design system and performance.
- Simplified Interface: A more intuitive structure to make it easier for design and development teams to use.
- Automated Calculations: Maintains basic calculations but reduces the complexity of formulas, prioritizing agility.
Ideal Use:
- Quick evaluations in Salesforce projects, where execution time is critical.
- Processes requiring frequent iterations, focusing on efficiency and team alignment.
Results and Impact:
- The V1 Complete Version provided a robust foundation for more complex projects and was essential for establishing detailed benchmarks.
- The V2 Simplified Version optimized the use of the method in the Salesforce context, ensuring greater agility and practicality without compromising evaluation quality.
Performance Analysis Management Spreadsheet
A spreadsheet was developed with a focus on comparing quality percentages among the evaluated screens and generating charts for performance analysis, offering a clear and quantitative view of the project’s progress and overall quality.
Automatic Chart Generation:
Dynamic charts are automatically generated for visual performance analysis, including:
- Bar Chart: Side-by-side comparison of acceptance percentages by screen.
- Line Chart: Evolution of percentages over time or by iteration.
Benefits of the Management Spreadsheet:
- Continuous Monitoring: Track the quality of screens in real time, ensuring objectives are met.
- Pattern Identification: Detect performance trends across screens or criteria, enabling targeted adjustments.
- Visual Communication: Clear and intuitive charts facilitate stakeholder understanding and promote team alignment.
- Support for Iteration: Focus on continuous improvement by highlighting the greatest opportunities for enhancement.
Results
The method has been implemented in direct collaboration with the development team, ensuring alignment throughout all stages of the process. This integration has facilitated:
- Significant Quality Improvements: The method has contributed to more consistent and aligned deliverables with the initial prototypes.
- Broader Adoption: Designers from other teams have started using the method, recognizing its effectiveness in UX and UI quality control.
- Smooth Implementation: The process was structured to be seamlessly incorporated into the development workflow, strengthening collaboration between design and development teams.
Positive Feedback:
The adoption of the method has received highly positive feedback, praised for its ability to:
- Reduce rework.
- Simplify quality monitoring.
- Foster better alignment between teams.
3. Plataforma IBBA 360º
The IBBA 360 is a platform designed for portfolio management (the sum of clients) and individual client information. It centralizes strategic and operational data, allowing officers to monitor the consolidated performance of their portfolios and access detailed information about each client in a practical and efficient manner.
Its goal is to facilitate decision-making and optimize the officers’ work by providing tools that integrate essential data into a single environment.
O Desafio
The development of the IBBA 360 platform presented significant challenges, including understanding the needs of different user profiles and overcoming technological, cultural, and infrastructure limitations.
Understanding Different User Profiles:
- Officers had varied profiles, with distinct routines and demands, requiring an in-depth analysis to identify both common and specific needs.
- Some users prioritized a consolidated portfolio view, while others required detailed client information or tools for quick reporting.
Salesforce Limitations:
- The Salesforce platform, used as the foundation, presented restrictions in customization and the creation of specific functionalities.
- Technical limitations included difficulties in customizing the home page, adding specific buttons, and creating direct integrations with more advanced dashboards.
Competition with Excel for Management:
- Many officers already used Excel to manage their portfolios and clients, representing a significant cultural barrier.
- Transitioning to IBBA 360 required the platform to offer clear and superior benefits compared to Excel, such as greater automation, improved data visualization, and a more intuitive interface.
Migration from the Hub Experience:
- The previous user experience was based on the Hub, a platform developed by an external third-party company.
- This solution made it difficult to implement quick fixes and improvements, as any changes depended on the external vendor.
- The migration to IBBA 360 had to be carefully planned to avoid negatively impacting the officers’ routines while bringing flexibility and internal control over system adjustments and upgrades.
Consistency in a Multidisciplinary Environment:
- The platform was developed by multiple teams, involving various designers and developers, which created challenges in maintaining visual and functional consistency.
- It was essential to align design efforts with a centralized Design System and clear collaboration processes to ensure that the interfaces and functionalities provided a unified user experience.
These challenges were addressed through detailed research, iterative prototyping, and strong collaboration between design, development teams, and stakeholders, ensuring a robust solution aligned with user expectations.
Meu Papel
As a Product Designer in the development of the IBBA 360 platform, my role was essential in various stages of the process, strategically and collaboratively ensuring a robust solution aligned with user and business needs.
Activities Performed:
Discovery Research:
- Conducted interviews, observations, and analyses to identify the officers’ needs in different contexts, considering their specific demands by area (e.g., financial statements, investments, credit limits).
- Prioritized functionalities that would have the most significant impact on the users’ routines, connecting identified needs with the project’s goals.
Solution Creation and Prototyping:
- Developed high-fidelity prototypes, ensuring the interfaces were visually consistent and functional.
- Conducted user testing to validate and iterate on proposed solutions, improving the experience based on real feedback.
Cross-Team Activities:
- Design System: Collaborated with multiple teams to maintain the platform’s visual and functional consistency. Worked on the creation and adaptation of components for the Design System, ensuring scalability and alignment with the IBBA identity.
- Quality Assurance (UXQA): Performed detailed validations to ensure implementations remained faithful to the prototypes and defined standards. Worked directly with the development team to identify and fix deviations during the delivery process.
Collaboration with Development:
- Partnered with developers to ensure the designed solutions were technically feasible and aligned with Salesforce’s limitations.
- Participated in regular alignments to address technical challenges, such as customization restrictions and the migration of functionalities from the Hub to IBBA 360.
Process Facilitator:
- Acted as a liaison between design teams, development teams, and stakeholders, promoting clear communication and alignment to ensure high-quality, on-time deliveries.
Impact of My Role:
- Visual and Functional Consistency: Integration with the Design System ensured a unified experience, even with the involvement of multiple teams and designers.
- Quality Deliverables: Detailed UXQA analysis reduced rework and delivered a final solution aligned with user expectations.
- User-Centered Focus: Research and iterative testing ensured the platform accurately met the officers’ needs, providing a functional and intuitive experience.
Processo de Design
The design process for IBBA 360 was carefully structured around key topics, focusing on addressing the primary areas of interest and operational needs of the officers. Each topic was treated as an independent module, allowing for tailored solutions that aligned with the unique requirements of each context while ensuring seamless integration into the overall platform.
How It Was Done:
Topic-Specific Research:
- Each topic was thoroughly explored through interviews, data analysis, and observations, allowing the design team to fully understand the officers’ workflows and pain points.
- Research included identifying critical data points officers needed for decision-making, as well as the tools they currently relied on, such as Excel or other external systems.
- Key areas such as financial statements (DRE), investment portfolios, credit limits, and client applications were prioritized based on user feedback and business objectives.
Modular and Integrated Design:
- The modular approach ensured that each area of the platform could operate independently while contributing to a cohesive user experience.
- Modules were designed with flexibility, allowing officers to access and interact with specific data sets without navigating through unnecessary screens.
- The integration between modules maintained consistency in visual design, navigation, and functionality, ensuring a smooth transition between topics.
Prototyping and Iterative Testing:
- High-fidelity prototypes were created for each topic, incorporating the insights gathered during the research phase.
- These prototypes were tested extensively with officers to validate the solutions, ensuring they met real-world demands.
- Iterations were made based on feedback, addressing areas such as clarity, usability, and the prioritization of information.
Focus on Scalability and Usability:
- The platform was designed to scale, allowing future modules or features to be added seamlessly without disrupting the existing experience.
- Usability principles were at the forefront, ensuring that officers, regardless of their technological expertise, could easily navigate and utilize the platform effectively.
Impact of the Topic-Based Approach:
This topic-focused design process ensured that the IBBA 360 platform met the diverse and dynamic needs of its users. Officers benefited from tailored solutions that addressed specific pain points, while the modular design ensured that each component functioned optimally both independently and as part of a unified system. By combining deep user research with iterative prototyping, the platform achieved a balance between functionality, scalability, and an intuitive user experience.
Exemples
–
–
–
–
–
4. Mobile IBBA 360º
At the beginning of 2024, the need to enhance the IBBA 360 platform for mobile was identified. Officers, responsible for managing high-value client portfolios, have the primary role of conducting visits, monitoring account performance, and offering tailored solutions to meet their clients’ needs.
The Challenge
The main challenge was to create a solution that enabled quick access to relevant information during client visits, considering that officers often need to retrieve updated data quickly and efficiently. Additionally, it was necessary to address other specific demands of these professionals’ routines, such as:
- Viewing consolidated portfolio performance.
- Accessing detailed information for each client.
- Generating reports and logging information after meetings.
The mobile experience needed to be intuitive and focused, ensuring easy access to essential data, even in situations outside the office.
My Role
As a Product Designer, I was responsible for:
- Discovery Research: Identifying the needs and primary workflows of the officers.
- Solution Design: Creating interfaces and experiences tailored to the mobile context.
- Prototyping and Testing: Validating the proposed solutions with users before implementation.
- Collaboration with the Development Team: Ensuring the deliveries maintained the designed quality.
Design Process
User Research:
- Interviews and observations were conducted to understand the officers’ needs during client visits.
- The main demands included monitoring key indicators and having a consolidated view of client portfolios.
Defining Solutions:
- Portfolio View: A consolidated summary with the average performance of all clients.
- Client View: A detailed perspective with the main information about each client.
- Client Briefing: An automated summary, aided by artificial intelligence, of the client’s key information.
- Contact Report: A feature for drafting or sending reports about client meetings.
Prototyping and Iteration:
- High-fidelity prototypes were created and tested with users to ensure the solutions met their real needs.
- Feedback obtained during testing led to adjustments in interfaces and workflows, improving the overall experience.
Success Metrics
- App Adoption: The number of officers using the app daily.
- Average Query Time: Reduction in the time required to access relevant information.
- User Satisfaction: Positive evaluations regarding the app’s ease of use and efficiency.
Principais Problemas
During development, some challenges were encountered, such as:
- Excessive Information: It was necessary to adjust the hierarchy and prioritize the most relevant data.
- Salesforce Limitations: The platform presented restrictions in creating apps, particularly in its customization capabilities.
- Home with Native Buttons: The app’s home included native buttons that could not be removed in the 2024 version, complicating customization.
- Page Redirection: Some buttons failed to redirect to specific dashboards, limiting the user experience.
- Visual and Functional Consistency: Adjustments were made to align the new features with the existing Design System standards.
- Real-Time Feedback: Issues reported by users during early testing were resolved through quick iterations, ensuring a more robust delivery