MissaoPessoal.com.br — Um estudo de caso sobre UX e Frontend — Parte 2
Como o conhecimento sobre UX e Frontend ajudaram ao site se estruturar melhor e como podemos tirar lições disso.
Seria nesse time então que os conceitos de design thinking entrariam na minha vida e permaneceriam. O mais importante do conceito é perceber que precisamos pensar no usuário sempre e que quando fazemos isso, conseguimos nortear melhor nossos projetos.
Com esses novos princípios incorporados, nasceria então um sentimento de "o que posso fazer para melhorar esse site?"
Bora dar um upgrade no site?
Quando me peguei pensando sobre a reformulação do site — pensando tanto em usabilidade, layout e tecnologia — conceitos que eu havia deixado de lado como métricas, timing e divulgação se tornariam essenciais para qualquer próxima tomada que eu fosse realizar.
Métricas
As métricas não foram bem mapeadas e ainda por cima, foram deixadas de enfeite na primeira versão. Elas estavam disponíveis, mas nunca foram utilizadas. Na nova versão, as métricas deveriam estar presentes desde o lançamento, bem como observar como o usuário interagia na página. A lição aprendida aqui é: para cada ação no seu site, crie um mapeamento de métrica que seja para que possa ter insights depois.
Timing e divulgação
A ideia de reformulação do site começou em 02/2018 e a vontade era que ele fosse entregue nas datas comemorativas do fim do ano — como o intuito de aproveitar este tempo para divulgar e falar sobre a importância de criar a missão pessoal como meio de definir um norte para o próximo do ano.
Entretanto, no ano de 2018, eu estava fazendo pós-graduação e acabei deixando a plataforma de lado — a nova versão só seria entregue em 04/2019. Com isso, perdi o timing de divulgar a ferramenta numa época propícia. A lição aprendida aqui é: se organize sempre que possível para lançar sua ferramenta/serviço no momento mais adequado.
Versão 2.1.0 (atual)
Após uma série de lições aprendidas, comecei a rascunhar o escopo da atual versão do site Missão Pessoal.
Escopo
Além dos pontos citados como pontos negativos na versão 1.0.0 a se melhorar, o projeto tinha como intuito realizar:
- Uma única infraestrutura frontend e backend em JavaScript: atualmente, o mercado possui ferramentas automatizadas que abstraem camadas de aplicações que antes eram melhores comportadas com soluções em outras linguagens — como API's e backend em PHP. Entretanto, tendo em vista a demora e complexidade dessa migração, foi optado por manter um único repositório, contendo dois módulos com suas respectivas funções.
- A adoção do Vue.js ao invés do React.js: o Vue.js seria mais interessante do que o React.js devido a seguinte conclusão obtida nos estudos: Vue.js para aplicações pequenas e rápidas; React.js para aplicações maiores e mais robustas. Como o propósito do site era deixar uma stack mais enxuta, performática e simples, o Vue.js acabou ficando na frente — além disso, também queria experimentar um novo framework.
- Server Side Render e outras abstrações — Nuxt.js: afim de me preocupar mais com o conteúdo e não com a forma, busquei apoiar a construção da nova interface frontend em cima de um framework robusto e que fosse capaz de abstrair as coisas mais simples do desenvolvimento — automação de tarefas, server side render, suporte a aplicação offline… Foi por isso que o Nuxt.js foi escolhido. Entretanto, mais a frente do projeto, ficaria evidente que as “mágicas” do Nuxt.js e sua ainda baixa maturidade para determinadas causas, me trariam dores de cabeça. Mas ainda sim, valia a pena mediante ao tamanho de abstrações que ele conseguia fazer — e sua constante atualização robusta (só quebrou uma vez a aplicação ao invés de N vezes nas atualizações do React.js);
- Um estudo mais aprofundado sobre layout e cores do site: a estrutura visual do site bem como sua composição de cores era algo que não me agrava muito. Em um estudo mais aprofundado sobre cores descobri informações importantes:
84,7% dos consumidores acreditam que as cores de um produto são muito mais importantes do que outros fatores;
A cor pode ser responsável por 60% da aceitação ou rejeição de um produto ou serviço;
Em 90 segundos, as pessoas fazem um julgamento subconsciente sobre um ambiente ou produto após a visualização inicial.
O roxo, azul, verde e preto foram selecionados devido a definições mais próximas do tipo de serviço apresentado:
Roxo: Representa a nobreza, riqueza, sucesso e sabedoria. É muito calmante e muitas vezes está relacionado à intuição e à espiritualidade. Estimula a área do cérebro de resolução de problemas e de criatividade;
Azul: Representa calma, confiança e segurança. Aumenta a criatividade, contemplação e espiritualidade;
Verde: Representa bem-estar, saúde, tranquilidade, segurança, equilíbrio, crença;
Preto: É a cor mais poderosa e neutra. Tende a ser associada à elegância e força. Assim como o violeta, essa cor transmite a sensação de mistério, além de ser relacionada à medo, curiosidade e, algumas vezes, memória emocional.
- Logotipo: Criação de um logotipo. Estudei bastante sobre variações, como fazer e possibilidades… Mas ao final, me rendi a uma escrita próxima a uma escrita humana, simbolizando uma declaração em punho — é, aqui é necessário estudar um pouco mais.
Definido então o escopo, comecei o desenvolvimento da segunda versão.
Desenvolvimento
Devido a minha pós-graduação, deixei o desenvolvimento em um ritmo mais lento. O lado bom, foi que eu pude validar com meu time e com outras pessoas sobre as ideias e wireframes que eu tinha. Essa validação constante possibilitou lapidar os comportamentos e estruturas que o usuário iria presenciar.
Alguns dos aprendizados foram:
- Entregas constantes VS uma completa: na metodologia ágil, aprendemos que a entrega constante é melhor do que uma única entrega completa. Isso ajuda a manter as expectativas dos clientes enquanto melhorias são realizadas. Entretanto, nesse projeto, a stack foi reformulada, e as mudanças eram tão profundas que a convivência de duas stacks se tornaria insustentável. Com isso, ficamos com a reflexão: nem sempre entregas constantes é a melhor solução quando não temos tempo hábil e infraestrutura para mantê-lo;
- Conhecimento técnico VS "stacks mágicas": No novo projeto, optei por utilizar o Nuxt.js devido a toda abstração que ele faz: automação de tarefas, aplicação offline, HMR (Hot Module Replacement), entre outros. O que eu paguei de preço foi a convivência da biblioteca com outras do mercado, e que são adaptadas para o Vue.js e não para o Nuxt.js. Isso me deu certa dor de cabeça mas de tanto você passar, você aprende. Com certeza isso não é recomendado para quem está começando. Só utilize "stacks mágicas" quando você tem conhecimento sobre toda a cadeia do seu software;
- Determine um tempo máximo de estudo: na criação do logotipo, fiquei uma semana estudando sobre as possibilidades. Com isso, montei variações, testei… Cheguei a um resultado satisfatório, mas ainda não o ideal. Entretanto, manter mais estudos quanto a isso, me implicaria em tempo de lançamento do site. Com isso, fica aqui o aprendizado: mantenha um deadline para seus estudos e aplique aquilo que conseguiu. Determinadas áreas precisam de mais conhecimento técnico e tudo bem não atingirmos o resultado que esperamos numa primeira tentativa — Ainda espero contratar alguém para dar uma segunda olhada 😄.
Ao final do desenvolvimento, que durou de 13/02/2018 até 06/05/2019 (mais de um ano depois), chegamos ao resultado da nova versão.
Resultado da nova versão
Muito bonito Carlos, mas e aí, como ficou a comparação quanto a primeira e quais as percepções finais? Bom, isso é na última parte 😄.
Leia a parte final desse estudo de caso: MissaoPessoal.com.br — Um estudo de caso sobre UX e Frontend — Parte final
