Bastidores de Design: Como construimos uma biblioteca de gráficos no Itaú Unibanco?
O que é DataViz ou Data Visualization?
A visualização de dados é a ciência que prioriza o estudo da representação visual de informações e dados através de diversas formas de gráficos, tabelas e mapas. As ferramentas de visualização de dados fornecem uma maneira fácil e acessível de observar e analisar informações, tendências, discrepâncias e padrões.
‘’Para alguns de nós que sabemos ler um gráfico, pode ser difícil imaginar o que outra pessoa poderia achar difícil. Mas então, quando sou apresentado a um estilo incomum de gráfico, ou algum no qual os dados foram mal representados, de repente sinto empatia por aqueles que são menos familiarizados com gráficos.’’ Drº Nicola Petty
Na era digital, dos serviços digitais e o mundo do Big Data, ferramentas e tecnologias de visualização de dados são essenciais para analisar grandes quantidades de informações e tomar decisões baseadas em dados. A cultura de interação ganhou um forte aliado que é o visual, com suas diversas maneiras de representar uma ideia, notícia ou conjunto de dados e informações.
Aplicação e sua importância
Além de facilitar o entendimento e análise de dados gerados tanto dentro quanto fora de uma empresa, é perfeito para auxiliar na investigação de melhores oportunidades de atuação em qualquer iniciativa, assim como traçar novas estratégias. Sendo assim, os gráficos por exemplo simplificam o desafio da análise de dados e fazem com que cheguemos mais próximo de conclusões esperadas, analisando os números brutos em um tempo relativamente menor e de forma mais lúdica.
Padrões, conexões e cenários de mercado saltam aos olhos quando se avalia dados apresentados em um formato visual, descobertas que, de forma textual, talvez não seriam percebidas, ou pelo menos não tão rapidamente. E, por isso, dizemos que essa é a maneira mais eficaz de alcançar os resultados esperados: avaliando os números de maneira visual para que o cérebro processe de forma mais ágil informações relevantes para o desenvolvimento positivo de uma empresa, por exemplo.
Desafios
Embora o crescente conjunto de dados disponíveis no mundo hoje possa aprimorar as análises e os processos de tomada de decisão, a vasta disponibilidade dessas informações não é garantia de uso. Estudos comprovam que nossa capacidade de armazenar informações vem crescendo em uma taxa muito superior à nossa capacidade de assimilar e transmitir essas mesmas informações. Mostrar dados que indiquem oportunidades, gargalos ou que ajudem em uma tomada de decisão assertiva deve ser feito de forma que ajude nossos cérebros a processar as informações de forma mais fácil e ágil. Mas o que nós designers temos a ver com isso? Precisamos investir na criação de modelos de análise de informações e comunicação fáceis e práticos de usar.
Sendo assim, nosso objetivo principal é entregar a melhor experiência de visualização de dados aos nossos clientes.
O processo que decidimos seguir
Não podemos falar do processo que decidimos trilhar dentro de Dataviz, sem antes falar do problema que decidimos resolver por aqui. Tudo começou após uma conversa sobre Gráficos!
Devido a complexidade de entendimento das informações e dados representados nos gráficos, e a necessidade de atualização constante e acelerada, o design ajudou a facilitar e mitigar falhas de entendimento. Buscamos tornar o conteúdo acessível, criando uma comunicação visual bem organizada e distribuindo a quantidade de informação que é exibida ao nosso cliente, trazendo precisão e fidelidade à informação que será exibida, mostrando também que podem existir dados ruins e críticos.
Por parte de tecnologia, o uso de gráficos de biblioteca aberta se tornou muito comum dentro de diversos cenários digitais, bibliotecas como HightCharts e AmCharts estão aí para quem quiser usar, com opções de personalização (em algumas partes, limitadas) e fáceis de usar. Nós queríamos trazer uma identidade consistente com os elementos presentes em nosso Design System, com interações personalizadas, usabilidade aprimorada e o mais essencial, gráficos totalmente acessíveis. Uma de nossas premissas também era o tempo de desenvolvimento e a prevenção de crashes e bugs quando estivessem em uso pelos nossos clientes.
Para nos organizar decidimos dividir o projeto em 3 partes: estudo de entendimento e comportamento por parte de nossa base de clientes, criação de uma biblioteca consistente ao Design System e processo de otimização de desenvolvimento técnico dos gráficos.
Comportamento: as quatro primeiras partes desse grande projeto!
Primeira etapa
Realizamos um grande mapeamento dos produtos e segmentos, à procura dos modelos de gráficos mais utilizados dentro de nossos canais digitais, para assim podermos trabalhar com foco no que estava sendo mais utilizado pelos nossos clientes. Realizamos também nessa etapa de estudos de comportamento com nossos usuários, leitura de inúmeros artigos e relatórios científicos sobre entendimento e análise de gráficos pela população brasileira.
Segunda etapa
Desenhamos as propostas desses gráficos, testando diversos casos de uso e contemplando cenários numéricos possíveis que foram desde o um faturamento de pequeno empreendedor até o faturamento de uma grande empresa, por exemplo.
Terceira etapa
Testamos as propostas com clientes, funcionários e pessoas fora do Itaú, aplicando desde testes de guerrilha, até testes de interação e usabilidade em salas de espelho. Aqui vale ressaltar a importância que demos à acessibilidade dos gráficos, entendendo a WCAG de ponta a ponta, estressando casos de leitura de tela, usabilidade e contraste, e por fim levando para testes com os times de Acessibilidade e Quality Assurance.
Quarta etapa
Consolidar as informações extraídas nos testes, otimizar e refinar visando a melhoria de experiência.
Quinta etapa
Após colhermos os resultados das etapas anteriores, entendendo como seria a melhor forma de apresentar gráficos aos nossos clientes e mantendo consistência com nossos outros elementos, partimos para o início da construção de nosso ‘’UI_kit_Dataviz_v1’’, lembrando que priorizamos os gráficos mais utilizados em nossa base como piloto, para assim desdobrar os outros formatos de gráficos no futuro. Para cada tipo de gráfico desdobramos os seguintes pontos: Grids utilizadas em nossos canais, casos de uso, aplicações internet e mobile, design responsivo e interação. Também criamos páginas de apoio com guias de aplicação de cores acessíveis, tipografia e tutoriais de prototipação.
Distribuimos nossa biblioteca para o time de CX testar em seus projetos dentro do banco, para assim, obtermos devolutivas e feedbacks sobre o que construímos e, de forma colaborativa evoluirmos a cada dia.
Desenvolvimento
Sexta etapa
Nos reunimos com equipes de tecnologia, e levamos alguns casos de nosso Ui_Kit para estudos de otimização do tempo de desenvolvimento dos gráficos dentro de nossas sprints. Mapeamos todas as ferramentas de mercado que poderíamos usar e comparamos com diversos modos que poderíamos desenvolver tudo “dentro de casa’’. (ps: ainda estamos trabalhando nisso!)
E quais foram os aprendizados desde então?
- Uma biblioteca exclusiva para Dataviz é importante para os designers.
- Consistência de padrões nos gráficos utilizados em nossos canais é importante para a identidade visual da marca e experiência.
- A comunicação e integração entre designers e engenharia é essencial para tornar o processo mais simples e eficaz.
- Gráficos devem ser acessíveis!
- Existem pessoas que amam e pessoas que odeiam gráficos.
- Por mais simples que seja um gráfico, existem pessoas que não entendem as informações, então devemos estudar o público que utilizará nossos serviços e propor boas alternativas.
- Gráficos em muitos casos podem ser somente uma informação de apoio!
Maiores Dores
Sabemos que a leitura e entendimento de gráficos é um assunto delicado e complexo dentro dos fluxos e painéis presentes dentro dos canais digitais do Itaú Unibanco. Como temos muitas frentes em diversas rotas e contextos diferentes dentro do banco, cada caso precisa ser adaptado para atender uma necessidade ou problema, e com isso se não houver uma centralização criamos uma enorme inconsistência muito difícil de ser controlada.
Outra dor sentida no dia-a-dia é o desenvolvimento, principalmente quando falamos de customização, reaproveitamento em outros projetos, mudanças de plataformas e ferramentas.
O que estamos fazendo agora e próximos passos
Temos uma ‘’biblioteca piloto’’ pronta na mão de nossos designers e continuamos colhendo feedbacks e contribuição.
Estamos entendendo como está sendo o processo no dia a dia, como os gráficos estão sendo desenvolvidos, quais são as dores e dificuldades especificas de cada squad e cada projeto, o que podemos melhorar, o que podemos incluir e o que está bom ou ruim. Estamos colhendo todos os casos de uso e telas em que os gráficos foram aplicados, para assim dar início à inclusão de novos formatos e padrões.
É um processo contínuo, que depende da colaboração de cada um para refinar e otimizar nossos elementos visuais.
Conclusão
A partir do material coletado e das pesquisas elaboradas conseguimos evoluir muito no que se trata de dataviz no Itaú, otimizando e evoluindo a nossa biblioteca de elementos, resolvendo problemas encontrados em acessibilidade e facilitando o desenvolvimento no dia-a-dia. Entendemos que por ser um assunto bastante complexo, temos um trabalho de atualização contínua, colocando em primeiro lugar a compreensão e entendimento das informações, é nosso dever propor soluções práticas e úteis para a vida de nossos clientes. Também conseguimos mapear inúmeras atividades que já estão no nosso backlog, e serão desenvolvidas em breve.
Continue acompanhando nossos artigos aqui no medium para saber mais dos próximos passos desse projeto.
Obrigado!
