MissaoPessoal.com.br — Um estudo de caso sobre UX e Frontend — Parte final

Como o conhecimento sobre UX e Frontend ajudaram ao site se estruturar melhor e como podemos tirar lições disso.

A esquerda: versão 1.0.0 do site. A direita: versão 2.1.0 do site. Uma diferença considerável.

Se você está pegando o bonde andando, veja a parte 1 aqui e a parte 2 aqui.

Análise da versão 2.1.0

Itens positivos

• Backend e frontend em seu lugar: com a nova divisão de módulos, ficou mais controlado realizar alterações pontuais sem ter impacto na estrutura do outro, bem como a independência dos mesmos;
• Docker ontem, hoje e sempre: o repositório principal consegue subir os dois módulos com apenas um comando: npm start e isso é lindo!
• Testes unitários e end-to-end: no módulo frontend, os testes tornaram-se parte da rotina do desenvolvimento da aplicação. Isso significa maior confiabilidade e segurança no desenvolvimento. No projeto foi utilizado o Jest.

Coverage do módulo de frontend

• Feedback sobre excessões e erros: na versão anterior, erros e problemas não possuíam feedbacks aos usuários — e isso é frustrante, eu sei! A nova versão se encarregou disso e possuí agora alternativas aos usuários, bem como mensagens com orientações.

Exemplo de feedback e alternativa ao usuário ao tentar publicar uma missão e que dá erro

• Exemplos de missão pessoal: a fim de dar mais exemplos e contextualização sobre como uma missão pessoal deve ser, foi adicionado uma seção no site que o usuário pudesse interagir.

Seção de exemplos de como é uma missão pessoal

• Página dedicada a missão do usuário: também foi dado mais destaque e foco a missão do usuário com uma página dedicada. Essa página pode ser compartilhada, realizado o print screen e até mesmo dar um like. O interessante dessa página são as possibilidades que ela abre.

Exemplo da minha própria missão: https://missaopessoal.com.br/missao/2

Itens negativos

• Ainda faltam mais testes: o módulo de backend ainda necessita de testes unitários e end-to-end;
• Performance, acessibilidade e SEO: estes elementos ainda podem ser melhorados conforme mostra o Google Audits. O bom lado é que estes itens já estão mapeados e devem ser alterados ao longo do resto do ano.

Google Audits da versão 2.1.0

Em relação a versão 1.0.0, o Google Audits mostrou melhoras em alguns pontos, e piora em outros. Entretanto, a segunda versão agora é PWA. Com isso, existe mais estrutura para a execução de melhorias.

Em relação a primeira versão, alguns números pioraram, mas agora é notável que é um PWA

Lições aprendidas

Nem toda "melhoria" é uma melhoria.

A maior comparação e lição aprendida aqui é: métricas e análise de comportamento do usuário são os elementos chave para definir estratégia.

Um exemplo:

Os usuários precisam preencher 5 qualidades/dons com os quais se identificam. Na primeira versão, os usuários apertam a vírgula para separar cada palavra. No segundo, os usuários também precisam fazer isso, mas agora, cada vez que o usuário aperta vírgula, o site transforma a palavra em uma tag, evidenciando que a palavra foi validada. Entretanto, em análises feitas no Hotjar, ficou visível que a primeira versão é mais objetiva. O usuários acabam não percebendo que a palavra deve virar uma tag e não conseguem avançar. Sendo assim, logo mais irei voltar ao comportamento inicial. Isso comprova quem nem toda "melhoria" que acreditamos colocar, é a mais assertiva.

Veja esse comportamento mais abaixo:

Não fique refém de uma tecnologia/servidor

O Heroku é um bom servidor, mas para manter o backend e frontend em um mesmo servidor, não é tarefa fácil. Eu demorei a perceber que duas aplicações rodando em portas diferentes não era possível. Isso foi um tiro no pé para manter a aplicação frontend que funciona em cima do node.js funcionando. Por sorte, o Nuxt.js possibilita o build da aplicação em modo estático. Sendo assim, fica aqui o conselho: existem inúmeras soluções no mercado. Procure aquela que melhor se adapta as suas necessidades com relação a custo e benefício.

Conclusões e desafios

É possível observar que o site melhorou esteticamente, tecnicamente e agora possui mais estrutura para cada vez mais evoluir. Tenho as métricas no Google Analytics, Hotjar e os usuários que acabam vindo atrás de mim como meios de analisar as necessidades do site e como posso melhorá-lo — diferente de outrora.

O maior desafio agora é justamente esse: continuar utilizando da tecnologia para prover a melhor experiência do usuário, de modo a se preocupar tanto com o conteúdo quanto com a forma.

O site ainda precisa melhorar — é evidente — , mas saber que ele pode ser uma ferramenta para ajudar pessoas é o que me motiva a continuar:

Uma usuária que pediu ajuda, mostrando que ainda tem esperança quanto a missão da vida dela.

Este é o fim desse estudo de caso quanto a UX e frontend do site Missão Pessoal. Espero que eu tenha conseguido passar alguns insights interessantes e que possam ajudar outros projetos que também necessitem desse olhar mais profundo quanto aos seus pontos de melhoria.

Lembre-se sempre: foco no usuário. O resto, a gente dá um jeito ;)

Se gostou do que leu, tem alguma dúvida ou está trabalhando em algo parecido, fique à vontade para deixar seu comentário. ;)

Say hello at: meu Linkedin.