Itaú Experience

From UX Designer to UX Lead: The challenges that shaped my career in UX.

Overview

During my time at Itaú Bank, I went through several projects in the frame of the bank's Digital Transformation with the goal of turning the #1 bank in clients satisfaction in Chile. This is a summary of some of the most relevant projects I had, that led me from UX Designer to UX Lead, leading and mentoring the team in several initiatives and UX cases.

My roles

UX Designer, UX Researcher and hands-on UX Lead. Mentoring, defining methods and guidelines.

March 2017 to June 2021.

Background

I spend almost five years at Itaú bank.

I entered as an external UX Desginer from a partner company while Itaú was starting with their Digital Transformation process after their fusion with another bank called Corpbanca. For Itaú, the whole concept of UX and Agile was new so, for several years (even until the end) one of the core pillars of the Experience Team was to teach and evangelize our discipline within a still conservative company. I started along with five other members and we conformed the Experience Team, without a clear structure or processes. So as we did our daily job in our respective projects, we had to define, teach and defend the ideal way of doing things with the User at the center of all decisions.

During my stay, I polished a UX process which I applied in every project I worked on, and it's acted as my base for approaching every Experience challenge so far.



As this section title says, the projects and experiences I went through while being here shaped my career in UX. They gave me both technical and soft skills every UX practitioner needs in this discipline, opened doors and made me grow in every aspect of my life.

Money Transfer flow

UX Designer

Web Structure Agile Cell, 2018


In the context of an Agile Cell focused on Customer Satisfaction, measured through a monthly Quality Survey, whose metrics defined the KPIs of the project and the Cell, the new Bank Transfer focused on satisfaction was addressed.

Due to the usage of Itau's Desktop page over its mobile app and tablet version. The Cell was focused on improving this specific channel first, so most initiatives were worked for web versions before jumping to mobile in the years to come.


With the information the bank had thanks to the Quality Survey, we, along with the PO, lifted some experience issues and aligned them with the Cell's goals:

Main pains

  • Not very friendly
  • Very old
  • Transfer with many steps
  • No notices of duplicate transfers or service problems and more.

Goals

  • Increase KPIs of satisfaction in transfers
  • Solve customer pains
  • Apply new Itaú UI Kit

Research

For more diving into users needs, I conducted some User testings on the Transfer flow as it was, and validated those pains detected before. There were about 5.000 money transfer per day, and variety of users were high, so with the help of a databse document the bank provided, it wasn't hard to get the testers I needed for my insights.

With that information, and the help of a Benchmark on which I studied how transfers behaved in the different banks in Chile at the level of structure, steps, interactions, glosses, etc. I was able to design the new approach for transfering money in the bank's website.

Design & Testing

After a few sketches, I came up with a solution that was both more friendly to users and viable for Devs to develop (technology was an issue for many years at the bank). Thus, I tested it and came up with results that showed improvements in the experience, comparing to the results for the old version of the transfering page.





“It looks much neater and more modern!”

“It helps me a lot to always see the data of my recipients.”

“The last transfers made give me an overview of the movements to that specific person.”


Measurement

After the new design was in production, I tracked its behaviour by reading the Convertion Funnel to see how it was performing.

The results showed an improvement not only in the first screen of the flow, which it was the heavier step, but an improvement in the final step and completition of the Transfer flow.



Credit Card Summary page

UX Designer

Web Structure Agile Cell, 2018


In the same year I faced another big project that ended up with relevant improvements towards the users. This time, I needed to tackle on the Credit Card page, which it had many Information Architecture and Storytelling issues.


Same as before, with the information the bank had thanks to the Quality Survey, we lifted some experience issues and aligned them with the Cell's goals:

Main pains

  • I don't see my extras
  • Very old
  • It reads messy
  • I don't see the international movements
  • Does not notify duplicate payments and more

Goals

  • Increase KPIs of satisfaction in Credit Card Information reading
  • Solve customer pains
  • Apply new Itaú UI Kit

Research


"If we're going to improve this page, let's start by the name." I suggested.

The original name for this section was "Estado de Deuda" or "State of debt" in english. I had the hypothesis that the name "State of debt", not only did not align with how the rest of the banks in Chile communicate this product, but also generated a negative status, making reference to the meaning of the word “debt”.

To validate that, I conducted an online survey where users were asked to choose the most appropriate name in relation to the specific context, also requesting that they indicate the reason for their choice.

More than 60% of users responses concured with the name that we ended up using: Credit Card Summary.


Due to the amount of information the page had, and the different levels of importance of it, it was necessary to conduct a quick Cardsorting for prioritization of the contents.

The result of that activity gave me the order of the proper reading, considering the needs of the users. The structure ended up with the following order:

  • Card balances
  • Billing and payment
  • Billing Cycle
  • Last movements
  • Other information

The next step was to test the State of Debt page, as it was called back then, and with all this insights and information, jump to the design phase.


Design & Testing

Following the same process of the previous project, once I came up with a prototype worth to be tested, I tested it and compared it with the old version that we're working on changing, reaching very positive results.


With the definition of six hypotheses, I worked on four main scenarios with key questions for each one. With that method I could validate those hypotheses and see if the new architecture worked as expected.





Although the general response was really good and definetly better than the old version of the page, there were still some details needed to be fixed in order to get an even clearer design: Confusion between the dates (why are they separated?), naming of glosses and lack of visibility of the Billing Cicle specifically.

So I iterated the design and test it again.







With some changes on the way the information looked and clustered, plus some improvments in the naming of the titles, the overall design improved and the results were immediately visible in the User testing.



Digital Onboarding

UX Designer

Digital and Sales Cell, 2019


In 2019 I took the challenge to lead the user experience on one of the most defiant and visible cells of the bank. This cell was in charge of projects searching to improve both Satisfaction and Sales, so the initiatives were many and the timing for each one of them was short.

The most important and defiant challenge of this cell was the Digital Onboarding initiative. This project searched for simplify the account opening process for users and internal teams that were involved, by reducing the amount of information the forms had, making it digital, reducing the time for deliverables and including external services that would make the experience a lot smooth than it was.


Context

The challenge for the Digital and Sales Cell was to simplify that experience in all ways, but mostly in terms of the amount of information needed. Questions like is all the information actually needed? came to mind and that implied a series of interviews with the executives to validate that and heavy meetings with the Operational Risk Area to negotiate what fields we could skip or delete to make the process a lot seamless.

Goals

  • +47.000 New Account openings per year
  • +60% on Digital Share

Research

Before making any action, as I use to work I did some deep diving into the product in order to understand completely how the creation of accounts worked in terms of front and back ends. What types of plans the bank offered, what types of cards and the average delivery of products by segments of clients.


The first thing we did was to dive into Analytics to see how the actual flow behaved and its convertion rate. We learned that almost all of the clientes except a 0,7% of them bounced at some point of the flow, being the most impacted ones the first screen (User basic data) and the screen before the last (Document uploading). With this quick view, I had a much clearer path to follow next.


Testing & Pains

I tested the actual flow with special focus in those two screens and obtained relevant Cualitative data that opened the team towards what we needed to improve, not just in usability but in business model too. With the help of Usabilla, we discovered that A: The plans wasn't very appealing for users and neither was the way the screen presented them, and B: Users had a lot of problems while uploading the documents thanks to none existent explanations and suggestions, but in terms of documents size and the posibility to upload several at the same time.

"Why don't you take all the information out of the documents you ask me for?" They commented.

It was clear what users wanted. They were asking for a flow completely digital, with just the precise amount of inputs to full and hopefully to get everything automated in terms of data reading.

It was a heavy task and implied the inclusion of external services and a lot of talks with several areas of the bank. Before ideating the solution, I conducted a series of workshops to fix the flow in terms of order, to remove unnecesary fields and try to polish the experience as a whole.came up with a solution that would improve most of these problems detected.



Designing

With all the steps and actions we took by this point, I was in condition to draw a solution and test it. That solution included Sinacofi service to quick identity validation, best practices on usability matters and the reduce of cognitive load and steps for the user.

By testing this design, we confirmed that most issues lifted in the research phase were fixed, though there were still some banking rules that we weren't able to modify entirely due to the weight they have in this industry here in Chile. We tried our best to reach the models of Digital Banks such as Monzo, Revolut and Sterling, but considering the context and the efforts the entire team put in this initiative, our solution fullfilled business expectations and most important, the needs of the users.








Redesign 2020

UX Lead

Itaú, 2020


Last part of 2019 and the early days of 2020 were very important to the bank in terms of changes. After a bad evaluation on a National Survey on Banking called Servitest, made by Ipsos Loyalty with focus on digital channels, the bank decided to take actions and put efforts to change the experience of the website in several releases, starting with the home page and the most used flows within the portal.

The UX team was in charge of understood what pains the users had, and execute the further actions to change that on the next year's survey.

As UX Lead of the team, my job was to plan the strategy along with the Head of UX and guide the team through every step we needed to take to get the job done. The plan was at it follows:

  • Deep diving into the results of Servitest
  • Lifting data from several sources to formulate hypotheses (complainments, stores, Customer Service, Analytics, etc.)
  • UX Research: Heuristic Evaluation, Design Benchmark, Content Benchmark and Workshops
  • Ideation and Experience Review
  • Iteration and Testing
  • Delivery

Research

With the collected data from different surveys, we recognized three pillars that we needed to improve to get in the top positions on the year to come. Overall, we needed to change the perception the users had about Itaú in terms of:

  • Design
  • Contents
  • Usability


We knew what the problems were, but we needed to define on which screen and flow to start, and for that I worked on a study with Google Analytics to help determine the most used flows and features of the bank's site.


Clarifying the path to follow, it was time to attack the first pain and the most mentioned by users: Visual Design with emphasis no the abuse of Orange color.

In terms of visual, users complained that Itaú site felt old and that the presence of the orange (branding color) was to heavy. To get alignments on this topic, I conducted a research for the proper use of color orange within websites, by studying from the color psychology to benchmarking its use on diferent industries websites.

With this insights and alignments, plus some core Principles obtained from workshops with key Stakeholders, we were able to jump to de Design phase.



Design and Showcase

For the Design phase, we divided the team into three groups with the mission on proposing three different design proposals considering all the information lifted so far, and then to present it in a big UX Showcase with the main stakeholders and different area referents to get their vision and feedback. My job was to deliver alignments, feedback and mentoring the members of the team in their work searching for consistency with the pains and goals defined.






Testing the best solution

With three solutions in our hands, after the bank's stakeholders feedback and some UX internal sessions of reviewing, we merged the best of each one of them into one final design, that we tested with users.



And after a long round of on-site testing with actual users, the design was ready to refine and deliver to the respectives cells that would work on the initiatives prioritized within their Planning sessions.


This process took several months and delivered backlog for at least 4 cells for the whole year.

It also helped positioning the UX team and myself even more within the company.


Itau One Design System

UX Lead

Itaú, 2020-2021


One of my challenges as UX Lead at Itaú was to lead the Design System initiative, defining the team and strategy that we would follow as well as the deliverables and actions to take for completing this task.


Back in 2018 the team and I worked on a UI Kit to use in the first redesign the bank had, but as the team went bigger, we started to identify consistency issues between the different designs, and the need of not only visual consistency but a Voice & Tone definition and a well-stablished process to make the delivers more agile, lead to the creation of this initiative to take on between 2020 and 2021.

In this context, Itaú 1, the first Design System for Itaú was born.


The Strategy

Before doing anything we needed to have a clear understanding of the needs and pains not only we had as a design team, but also the needs of the business and dev teams too.

After an interview round with key stakeholders of each team, we ended up with some needs that helped us to define the path to follow:

  • Collaborative instances with key areas of the bank
  • Unified criteria for component design or redesign
  • Sinergy with the dev team
  • Pulse meetings with the teams

With that, we define a core team that included a Front-End Lead to participate on the technical side of component designing.



After the information lifting process, in which we also identified the key components we needed to tackle first, due to its use on every design and flow, we followed what we called a Chapter Strategy.

This strategy consisted on dividing the Design System into sections and asigning them to each member of the team to work on under a specific set of criteria:

  • Usability study (best practices)
  • Use cases (DO's and DONT's)
  • Application examples
  • User testings

Having a criteria defined to ensure that every designer working on every chapter would follow the same path, we created a workflow considering all the key validation instances and ownership.



The result

After all these definitions stablished within the team it was time to communicate them with the bank. We ran a round of presentations with Stakeholders and with the rest of the design team that didn't participated in this initiative. After that, it was time to put our hands on and start designing.