Em maio de 2020 eu iniciei como designer na IBM atendendo o iti. Meu primeiro projeto foi fazer o discovery do novo site do app, uma vez que o mesmo já não atendia mais as necessidades da nova fase do aplicativo. Começamos definindo os stakeholders, onde decidimos que, além dos líderes técnicos da squad, também envolveríamos o marketing do iti, afinal, eles seriam os maiores beneficiados após a conclusão do mesmo. 

Por estarmos em um momento pandêmico, um teste completo de usabilidade com nossos clientes se fazia quase impossível. Então fizemos algumas dinâmicas pelo Miro em um canvas centrado no usuário com nossos stakeholders, onde definimos alguns objetivos em cima dos dados que tínhamos em mãos. Por motivos de sigilo do negócio, não fornecerei os números que utilizamos (e ocultei outras informações sensíveis), mas optamos por desenvolver um site focado em celulares pois o acesso por via deles é bem maior que em outras plataformas. Outra decisão importante foi que deveríamos focar no storytelling do site e em facilitar que os clientes encontrassem de forma mais fácil resposta para dúvidas simples, desafogando um pouco nossa central telefônica.
Então além do time de design do produto, negócios, tecnologia e marketing, deixamos o caminho aberto para a inclusão do atendimento como stakeholder no futuro.

Outros três pontos de maior atenção para o projeto neste momento foram: 
1- o site, desenvolvido na plataforma adobe, deve continuar a permitir uma rápida personalização pelo time de marketing, de forma modular e sem o envolvimento de desenvolvedores para atualizações do dia-a-dia;
2- Nosso score no site rank do google não estava bom, então a performance que estava muito baixa deveria subir de forma considerável, tanto em tempo de carregamento quanto em usabilidade e SEO;
3- como tudo no design do iti, acessibilidade deveria ser considerada em todos os módulos.

Após as primeiras pesquisas de benchmark com a concorrência, no kick-off interno de nossa squad optamos por ir atualizando o site aos poucos, módulo a módulo, e não refazer tudo do zero. Uma vez que mantivemos a estrutura modular, a coisa mais lógica seria desenvolver novos módulos um por um e implementar conforme forem aprovados pela equipe de testes e acessibilidade. Então neste ano houve uma evolução do site até que o mesmo tivesse 100% remodelado.

A primeira grande mudança estrutural foi trocar o floater que existia convidando o usuário a baixar o app por um botão imperativo, com chamada baixe grátis. Mais direto ao ponto impossível. Foi um ajuste simples, mas que aumentou a conversão de novos clientes via site em 20%.
Mesmo com essa mudança, os módulos não optimizados para celular incomodavam, mas para pensarmos em uma nova estrutura para o site, primeiro era necessário pensarmos em como seria dividido o novo conteúdo. Para isso, montamos um comitê com membros do marketing para traçarmos o storytelling e usabilidade dos novos módulos, que foi onde começamos a desenhar o protótipo do site que temos hoje. 

Em cima das necessidades do negócio e números de navegação, entendemos que ter um módulo de destaque e outro contando o que é o iti seria o ideal para a primeira quebra da home, além de deixar esteticamente mais atraente, traria de cara uma informação para quem já é cliente, e outra para quem entrou para conhecer o iti.
Como paralelamente também estávamos desenvolvendo uma página para o lançamento do pix, aproveitamos o conteúdo que pretendíamos utilizar nela como base para novos módulos, o que se mostrou uma decisão bem acertada no futuro, uma vez que reaproveitamos alguns deles no wireframe da nova home do site.
Com o escopo da home fechado, optamos por partir para o refinamento do design, e foi a hora de dividirmos as tarefas. Enquanto o marketing trabalharia nos textos finais da home e das internas, já sabendo quais módulos novos teríamos disponíveis, eu comecei a trabalhar nos layouts, buscando boas práticas tanto para as imagens quanto para o texto.  Para isso, desenvolvi um manual do site, que serviria de apoio tanto para designers quanto para ux writters que precisassem criar novas páginas com os módulos existentes, informando tamanhos, peso e formatos de imagens, bem como boas práticas de texto e um guia para facilitar a autoria de novas solicitações. Então módulo por módulo, começamos a desenhar a reformulação, como no antes/depois à seguir:
Embora nem todas as features planejadas sejam utilizadas em um primeiro momento, após um anos nós entregamos, além da refação do menu, 16 novos módulos responsivo e otimizados para mobile, todos eles podendo variar texto, imagem, cor e, principalmente, testados pelo pessoal de acessibilidade exaustivamente. Por nem todos estarem sendo utilizados, irei mostrar aqui alguns exemplos apenas dos que já estão no ar, uma vez que são a base que está sendo utilizada para todas as outras páginas.
Confira o site atual utilizando estes módulos em seu dispositivo de preferência clicando aqui.
Back to Top