top of page

Íon - Itaú | Investment Wallet’s Graphic.

Product Design | UX Design

Overview

The Ion is an app developed by Itaú Bank, with the aim of consolidating clients' investment portfolios into a single platform. As the Principal Product Designer, I was tasked with creating the graphical interface for the investment wallet and devising solutions to enhance usability and accessibility within the app.

The Challenge

The reporting screen of the Íon app should contain all investments of its users/customers. With the help of customer acceptance analyses in the app stores and qualitative interviews, we were able to determine that the main problem was finding the information in a clear form and that the application lacked colour and its own aesthetic value.

Design Process

The goal was to explore the following steps:​

​

  • Understanding the user's needs and aligning them with the business objectives.

  • Investigating the strategies employed by other banks in offering investment products.

  • Developing a prototype and validating hypotheses.

  • Conducting user interviews.

  • Handing off the project to the development team.

Benchmark

Benchmark was used as a marketing study to analyze competitors with more advanced systems. Use the study to understand our limits and what we can do to bring value to your project.

The benchmark was created with the aim of:

​

  • Analyse the investment market;

  • What is the competition doing?

  • How can we improve our experience;

  • How can we make our app even more attractive.

bENCHMARK.png

Wireframe

The wireframe goal was:

 

  • The wireframe goal was:

  • Create the page's information architecture; 

  • Identify problems and hypotheses; 

  • Collaborate with the accessibility team.

Wireframe.png

Prototype

Solutions for accessibility: 

​

The pie chart is widely used, but to ensure that it is accessible to people using a screen reader, we have introduced the following usability:

When the arrows are used, they turn the chart into a carousel. The screen reader then reads the arrows as a button that displays information about each section of the chart as well as its percentages and values.

  • The project's final step focused on accessibility in the graphic. My main goal was to bring colors that were validated by WCAG (Web Content Accessibility Guidelines) , and to guide people to use the screen header.

template 10.png
Carteira de Investimentos (1) (1).png

Thank You!

bottom of page