Hints Animadas
Nelogica
Entendendo o Desafio
A Nelogica, uma empresa que atua no ramo de mercado financeiro, tem um software chamado Home Broker, onde é possível realizar compras e vendas de ativos da bolsa de valores brasileira (B3). Nesse software tem o gráfico de estudos, onde fica localizado os estudos que o usuário pode realizar nos ativos, entretanto, não há dicas e informações claras que possam auxiliar o usuário, e a tarefa consiste em redesenhar essas hints visando trazer algum elemento visual que auxilie o usuário no desenho.
Sendo assim, utilizei o Double Diamond para separar melhor as atividades, e ter uma melhor comunicação com os desenvolvedores e as pessoas interessadas no projeto.
Descobertas
Nessa etapa, eu comecei a estudar mais sobre como cada Hint da barra de estudo funcionava, se tinha alguma ferramenta que não tinha, alguma descrição que poderia estar errada ou confusa. A ideia foi entender onde estamos para pensar em onde vamos chegar. Uma das descobertas foi que realmente existiam algumas ferramentas que não tinham uma descrição completa e poderia levar o usuário ao erro.
Depois dessa etapa, eu fui atrás de concorrentes e como essa funcionalidade era utilizada pelo mercado de tecnologia, a referência principal que encontrei foi do Adobe Photoshop que possui uma funcionalidade similar ao que eu estava pensando para as Hints.
Ao me informar mais sobre essa funcionalidade eu percebi que alguns usuários reclamavam sobre, principalmente pela dificuldade em desativar, e com isso, a ideia seria de implementar algo semelhante mas investindo em boas animações e ter de forma clara a opção de desativar a funcionalidade.
Definições
Com essas informações coletadas, eu criei uma apresentação e convidei os programadores para conversarmos sobre, coletar a opinião deles, etc. Em uma conversa com os desenvolvedores, foi aprovada a ideia, e seria necessário realizar o desenho das animações para 50 estudos do gráfico, e com a facilidade que tenho em animar objetos no Figma, optei pelo uso dele para realizar a atividade e exportar em GIF, a pedido dos programadores.
Desenvolvimento
Nessa etapa, o objetivo principal foi estudar mais sobre como cada estudo do gráfico funciona, como inserir de forma correta no gráfico, dicas e truques que poderiam auxiliar, etc. O objetivo foi entender o uso para criar as animações de forma precisa.
Com esse estudo feito, comecei a realizar as animações de um primeiro estudo para teste, desenhando elemento a elemento e criando as suas variações.
Com as animações feitas, comecei a pensar sobre como seria o novo layout, e cheguei a conclusão de que seriam feitos pequenos ajustes para que os GIFs pudessem ser exibidos nas Hints, e essa seria a nova Hint para cada estudo:
Com esse layout e a animação finalizada, voltei a conversar com os desenvolvedores e eles curtiram a ideia, finalizado essa etapa de desenvolvimento com o redesenho aprovado.
Entregas
Com todas as entregas alinhadas, essa etapa foi a de entregar as animações de cada estudo do gráfico, e como seriam 50 ao total, então inicialmente fiz um acordo com os desenvolvedores de entregar em 1 semana, entretanto, com o andamento da tarefa eu vi uma oportunidade de aumentar minha produtividade reutilizando algumas animações e com isso, terminei todas as animações em cerca de 4 dia, com as entregas testadas e feitas, eu realizei o acompanhamento do desenvolvimento da funcionalidade pelos programadores.
Conclusão
Com a implementação das Hints animadas, foi possível melhorar a experiência do usuário no software Home Broker da Nelogica. Utilizando técnicas de UX e UI, foi possível redesenhar as Hints visando trazer elementos visuais que auxiliem o usuário no desenho, realizando animações claras e precisas para cada estudo do gráfico. O resultado foi um layout mais moderno e agradável visualmente, além de uma melhor usabilidade e compreensão dos estudos para os usuários.
Contato
Estou à disposição para ajudar no que precisar, sinta-se livre para me contatar!
Design & Código por: Marco Vinicius
Design & Code by: Marco Vinicius