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

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.

De volta no tempo: 2015 — O surgimento da ideia

Era final de julho de 2015. Eu estava de saída de uma sociedade de uma startup que não me trouxe lucros, mas que me trouxe bastante conhecimento. Entretanto, por alguma ironia do destino, eu só iria conseguir trabalho no final de janeiro de 2016 — praticamente 6 meses de tentativas.

Durante esses 6 meses, o único pensamento que me vinha à cabeça era o de manter os estudos com programação em dia (afinal, a cada dia um novo framework JavaScript era lançado) e qual era o seria o próximo passo da minha vida? Foi nesse questionamento, que o livro do autor Christian Barbosa chamado A tríade do tempo me trouxe o conceito sobre missão pessoal, em que as pessoas precisam defini-la antes de saírem fazendo qualquer coisa. Foi após pesquisar e não encontrar uma ferramenta satisfatória que me caiu a ficha: por que não criar uma ferramenta que ajude as pessoas a criarem suas missões pessoais e ao mesmo tempo, eu consiga aprender um novo framework de JavaScript? Bingo! Surge então a ideia de criar o site Missão Pessoal.

Missão Pessoal

Em um arquivo de determinado commit de 2015, escrevi:

Após verificar que não existe um site como “missaopessoal.com.br” (o site minhamissao.com.br já está reservado), acabei por decidir que irei criar um app que ajude as pessoas a criarem a sua missão pessoal.

Sendo assim, defini o escopo do projeto.

Escopo do projeto

O projeto consistirá num webapp que será construído com ferramentas que permitam que o mesmo seja um app híbrido, podendo ser utilizado em todas as plataformas (desktop, tablet e pc).

Além disso, era especificado quais informações teriam no site e quais os comportamentos que ele deveria possuir.

A versão 1.0.0

A versão 1.0.0 tinhas suas características e dependências definidas:

• O domínio: https://missaopessoal.com.br;
• Heroku como servidor ("É parecido com a AWS, roda em cima da AWS e é mais simples de mexer… Porque não?");
• Seguir a hype da época: Utilizar o React.js (lançado em julho de 2013) como biblioteca de construção de interface onde o usuário iria interagir na maior parte do tempo;
• O uso do Lumen — Um microframework baseado no Laravel (um framework PHP) — Que permite a construção de aplicações com foco no backend mas que também deixa construir e integrar o frontend de forma mais objetiva.
• Um layout mais ou menos definido e que seria mobile first — adaptado de um layout encontrado na internet.

Sendo assim, o site em sua primeira versão estável foi concebido como na imagem abaixo:

Versão 1.0.0 do site Missão Pessoal.

Itens positivos

• Produção a toque de caixa: Por ser uma stack única (tanto o frontend como o backend ficavam sob a mesma estrutura), bastava alterar qualquer módulo do projeto, commitar na branch master e voilá: o projeto estava no ar (o Heroku entende as necessidades do projeto e então provisiona a estrutura);
• Integração com Facebook: o usuário conseguia preencher alguns dados através da rede social. Além disso, quando a pessoa salvasse a sua missão, a sua foto era visualizada no mural de missões;
• Entendimento da infraestrutura: Possibilitou entender melhor o funcionamento do Heroku: o mesmo trabalha sob o conceito de módulos que são acoplados na aplicação conforme a necessidade;
• Entrega de valor: Em menos de 3 meses, o projeto consistia de backend mais frontend mais servidor configurados e operando.

Itens negativos

• Ausência de testes unitários: tanto no backend como no frontend, testes eram inexistentes 😞;
• Quebras na API do React.js: Mudanças na versão de React.js costumavam quebrar o código ou a estourar uma série de erros no console devido a alterações de sintaxe da biblioteca: isso gerava desconforto quanto ao futuro da biblioteca e se ela seria realmente estável ao longo do tempo (o projeto foi desenvolvido com a versão 0.13.3, atualmente está na v16.8.6);
• Lentidão: O bundle de JavaScript sozinho estava em torno de 2.3 MB e o site em 3.8 MB, com um tempo de carregamento em torno de 20.4 segundos no modo Fast 3G no Google Chrome. Cada segundo a mais de demora no carregamento de um site é fator para os usuários desistirem do acesso;

Tamanho e tempo de carregamento da página.

• Layout não compatível: Não foi realizado um estudo mais aprofundado quanto a composição do site quanto a informações e layout: as cores do site por exemplo, estavam com tons que não combinavam bem para com os possíveis moods do usuário — diferente do que acontece na versão atual;
• Métricas piratas: o Hotjar estava presente para tentar verificar comportamentos dos usuários, mas nenhuma ação foi levada adiante; Também existia Google Analytics, mas não existia a captação de eventos e sim apenas o número de visitas das páginas.

Google Audits

Resultado do Google Audits sobre a versão.

No Google Audits, ficava claro que era necessário fazer muitas melhorias.

No final, o site entregou o que era proposto. Até o relançamento da versão 2.0.0 (4 anos depois), 105 missões pessoais foram criadas.

O primeiro commit foi em 31/07/2015.

A entrega de versão estável (beta) foi em 29/09/2015.

Continue lendo sobre o case na segunda parte: MissaoPessoal.com.br — Um estudo de caso sobre UX e Frontend — Parte 2