Início da minha jornada

Em janeiro de 2021 entrei no time Studio com objetivo de auxiliar na melhoria do produto, com background em front-end.

O meu primeiro passo foi conversar os todos os profissionais envolvidos no projeto e stakeholders, para para aprofundar os meus conhecimentos em relação à plataforma.

Durante esse processo pude compreender melhor sobre sobre o perfil do público alvo, expectativas em relação ao serviço oferecido e também quais funcionalidades deveriam ser aprimoradas ou modificadas.

Além de colher informações, também naveguei pelo produto por meio de uma conta nova. Experimentei várias funcionalidades iniciais e os pontos que me chamaram mais atenção foram: grande dificuldade de uso (usabilidade e interface ultrapassada), latência e tecnologia desatualizada.

Tive grandes dificuldades para mexer no produto por falta de onboarding. E, percebi que a minha experiência se assemelhou bastante às relatadas pelos colaboradores do Studio.

Diante desse primeiro diagnóstico, em poucos dias desenvolvi uma apresentação para compartilhar com toda a equipe a minha visão e proposta de trabalho.

Minha visão inicial

O Studio iniciou há 15 anos que na época o jQuery era forte no mercado, por isso o front-end foi desenvolvido com essa tecnologia.

Problemas

• Arquitetura tinha efeitos colaterais, alto custo de manutenção e difícil de escalar;
• Os arquivos não eram zipados (gzip), um dos pontos que causava lentidão no carregamento;
• A grande quantidades de requests causava lentidão;
• A interface também não era moderna, não era responsivo e suporta apenas Desktop;
• As muitas funcionalidades dificultavam as tomadas de decisões.

Propostas

• Aplicação de tecnologia padrão da Rock Content, React;
  - Tecnologia forte no mercado e alto escalável.
• Padronização da estrutura de API, diminuindo a quantidade de request;
  - Diminuindo os custos dos servidores.
• Utilização da biblioteca Design System da Rock Content;
  - Componentes isolados, o que reduziria bastante os efeitos colaterais.
  - Aumento de revisões de código antes de publicações.
• Novas pesquisas para remover funcionalidades que não possuíam valores;
  - Mudar o processo de design, novas funcionalidades com valores e estudo com feedbacks dos usuários e pelo discovery;
  - Melhora manutenção e simplifica o produto.

Como não seria possível mudar a tecnologia de um dia para outro, sugeri que o trabalho fosse desenvolvido página por página.

A proposta foi atualizar a página mais simples possível, em React com design system da Rock, juntamente com as outras páginas com tecnologia antiga. Assim, gradualmente poderíamos atualizar todas as outras páginas, eliminando 100% jQuery.

Discovery

O time de produto designer elaborou um discovery com uma pergunta:

Queremos implementar a tecnologia nova. Por onde começar?

Primeiramente o time decidiu trabalhar a página Minhas Atividades. Por ser a com o maior volume de acessos, entendemos que seria relevante que ela fosse a primeira página a ser implementada em React e com nova interface.

O objetivo principal do discovery era identificar oportunidades para melhorias no fluxo, interface e regras de negócio do KanBan, com a finalidade de aumentar o NPS do produto.

A metodologia envolveu mais de 18 horas de entrevistas em profundidade com 18 clientes. Os clientes ouvidos estavam diretamente envolvidos com gestão (gerente ou atendimento) e criação (produtores como programador, designer, roteirista, etc.).

O resultado dessa minuciosa pesquisa foi apresentado em 206 slides, que pontuavam todos os insights e oportunidades. O meu papel nesse discovery foi benchmark e protótipo.

Coletei os feedbacks que os clientes ofereceram nos últimos anos e observei que eles indicaram o ClickUp, Asana e Trello como as principais ferramentas do mercado para agência e marketing.

A partir do estudo de Benchmark e dos insights dos clientes, elaborei e produzi um protótipo com uma nova interface, que possuía novas funcionalidades. O projeto foi desenvolvido com a finalidade de diminuir os fluxos, ações e reduzir o tempo necessário para atingir os objetivos, que são hipóteses do discovery.

Todos os estilos e elementos fazem parte do design system da Rock Content.

Antes & Depois

Protótipo

O processo de desenvolvimento começou com card, depois coluna e o board completo, elementos que dependem entre si.

A sombra no estado hover era um pouco mais escura, dando a impressão de que o card estivesse um pouco afastado. Chamamos essa técnica de relevo, que é uma técnica de interface.

Como haviam vários cards em uma página, lembrei que as animações de sombra demandavam mais processos (CPU).

E, o que acontece é que quando ocorrem muitos processos, os usuários podem sentir uma pequena lentidão. Por isso, deixei uma observação no Figma para os desenvolvedores, apontando um melhor caminho para elaboração de animação de sombra (propriedade box-shadow).

Abaixo, um exemplo de como as pontuações foram propostas.

Área do click do card

O protótipo também apresentou o comportamento do click do card.

Popovers

Desenhei vários popovers, responsáveis por realizar ações sem a necessidade de abrir a tarefa, o que levou os usuários a terem uma significativa economia de tempo.

Colunas

UX Navegação

Após estudos do benchmark sobre a área do board, uma das minhas propostas mais relevantes para o projeto envolveram a questão da navegação, em relação ao cursor “move”.

Implementei no protótipo uma funcionalidade que permitia que o usuário pudesse de arrastar a tela para os lados, sem precisar tocar na minúscula barra horizontal ou usar o teclado. Essa proposta reduz o esforço durante o uso da ferramenta.

Conclusão

Neste projeto tive oportunidade de colher valiosos aprendizados. Pude trabalhar mais na estratégia e discutir os próximos passos de um produto com arquitetura complexa e tecnologia desatualizada.

Meu background em Front-end foi de grande ajuda para entender os limites e facilitar o planejamento com PMs e Lead Developer para definir o caminho ideal nas primeiras implementações.

Além desse projeto, fiz diagnósticos pensando em modelo PLG (product led growth), como onboarding, automatização e diminuindo os esforços internos para escalar melhor no futuro.