Bank Itaú’s mobile app redesign
A solution that provides access to the basic everyday functions and improves its visual perception.
Team: 3 UX Designers.
Role: Visual / UX Designer.
Time: 4 weeks (November 2021)
Directly responsible for:
UX Strategy, UI Design using Marvel and Figma (wireframes and high fidelity mockups), Usability testing with internal users, Design documentation.
Participated in:
UX Research, Benchmarking, Analysis and sensemaking, Co-ideation workshops, Creation of user flows.
Itaú Unibanco is a Chilean private bank. They own 108 branch offices worldwide. They are the sixth biggest bank in assets terms within South America, excluding Brasil.
The problem
They came out in 5th out of 9 positions in the Servitest (an annual digital product evaluation among the National Banks).
They failed in the categories “Friendly and easy to use” and “Variety of functions”.
The goal
Change it’s perception and overall satisfaction so they could upgrade their rank in the Servitest and eventually be digital leaders in the Chilean financial market.
The solution
Include the flows and functions most wanted and needed: Transfersand Benefits
Redesign the Design System and the Architecture of Information so the functions can be easily found.
This solution increased the overall satisfaction by 20% and changed the perception to “modern and friendly” in the testing phase.
An overview on how it was done...
Design Thinking Methodology
Data Analysis
Affinity Map
Interviews
Usability Test
Benchmark
User Persona
User Story
User Journey
Crazy 8’s
Brainwriting
Card Sorting
Figma Prototype
Usability Testing
Moderated test
A/B Test
What was found...
In the Analysis of the Internal Satisfaction Survey
Through Usability Testing
Through 6 user’s interviews
knew their benefits or how to use them, while those benefits were the reason to have an account with the competition.
thought that the app was missing basic functions, but most of them from Itau's own website and not the competition.
thought the app was “messy” and “outdated” and it prioritized offers against their own products, making it “confusing” and “invasive”.
“I need to...”
Findings and Insights
... perform the most frequent operations within the app, such as Transfers and benefits.
... take control of their own money, transferring between their accounts and accessing the credits owned.
... know the benefits and how to use them, so they get familiar with the value proposition of Itaú.
... find easily what they need and see the products through an organized and modern design.
How could we redesign Itau’s app so it can be an integral experience and offers essential functions to the users?
The solution
What needed to change or be improved?
Add a feature to transfer between their products
Add a flow to see and access their credits owned
Add a section to see their Benefits and how to use them
Redesign the app, so it can provide easy and friendly navigation
Test, iterate, test, iterate...
Never afraid to make changes
After the ideation, the Low Fidelity Prototype was tested using Marvel with 5 users. What changed after the test was:
Affordance of accounts available to transfer.
Separate Discounts and Points in the Benefits section.
With this information, the Medium Fidelity Prototype was created and tested in moderated Usability Testing in Figma with 5 users.
Some changes implemented after the test were:
Scroll in vertical instead of horizontal in the accounts owned.
Set a special section inside Benefits on “How to use your points”.
The look and feel...
UI Kit in a nutshell
Designed a new bottom navbar that described with text and marked the selection so it can be more accesible.
-as showed in the Heuristic Evaluation and Accesibility Best Practices and results from Card Sorting.
Made the error obvious adding a symbol and changing the color.
-as showed in the Heuristic Evaluation and Accesibility Best Practices.
Brighter colors, gradients and higher contrast is a trend amongst the competition.
-Benchmarking Analysis
Created progress bars to show the location of the user and bring control on the process.
-as showed in the Heuristic Evaluation.
A new skin
After testing the High Fidelity Prototype with 6 users, this are the results:
General satisfaction
Task success
4.5/5
5/6
Direct success
App perception
“very friendly, very simple”
“I felt excited on the main page”
“much more modern [...] it is atractive”
“it was made with affection”
A close up to the solution...
Some of the changes
Stay flexible. You cannot control if the project may have a new product owner, a new direction or a different deadline, as long as you keep your mind open and focused in the user’s need you can go on.
Keep the communication strong. There will always be personal situations going on, but if you build a strong communication the team can rely on each other.
A Design System isn’t the same as an UI Kit. It’s up to the project to decide and what its needed but it’s importante to not mix them.
Follow the backlog we suggested with prioritized functions to implement, according to the internal survey.
Iterate the Designs after Testing and Usability Sessions. Always try Tree Test, as it helped us a lot.
Evangelize on the UX job, so the whole organization can reach a higher stage in the UX Madurity.
Thanks for reading!
