O processo por trás da evolução site do Labor

Raphael Santos
Raphael Santos, Engenheiro de Software
2 de Setembro de 2019
  • #produto

A Novatics lançou em 2017 o seu primeiro produto desenvolvido internamente no Labs, o Labor. É basicamente uma ferramenta de time tracker focada em produtividade e lucratividade para arquitetos e designers de interiores. Depois de cerca de 1 ano com o produto no mercado, alguns experimentos de crescimento e validação do produto, nós decidimos revisitar a Landing Page em um novo experimento de growth hacking, agora com mais dados e mais hipóteses a serem testadas.

Falaremos mais sobre o growth hacking em outro post ,ao final do experimento, no começo de 2019. O intuito desse post é falar sobre como foi feita a evolução da landing page, a primeira ação de growth do segundo semestre de 2018.

Começaremos do começo.

O Briefing

Por ser um produto interno e nosso cliente ser literalmente nosso chefe, não houve um briefing formal. Houveram algumas conversas rápidas e alguns direcionamentos, dando total liberdade para estudar e redesenhar o site, com apenas uma “limitação”: implementação de baixo custo. Entendemos isso como uma oportunidade para explorar visualmente (e trazer mais complexidade nesse aspecto) e também para estudar maneiras de comunicar, de forma escrita, os valores de produto. Usar das restrições como combustível para nossa criatividade.

O redesenho da landing consiste no aperfeiçoamento de um aspecto do produto (como ele se apresenta para usuário) com o objetivo direto de converter novos usuários. Naquele momento do projeto, fazendo uma análise superficial do site, que até então era o MVP, observamos que a página não era coerente com o produto tanto em aspectos de negócio quanto visuais. E que a página que deveria ser a responsável por instruir sobre o produto e auxiliar um

Parte do growth hacking do primeiro trimestre de 2018
Parte do growth hacking do primeiro trimestre de 2018

potencial usuário a usá-lo, fazia isso de maneira deficiente.

Seria feita, então, uma evolução do MVP da Landing Page do Labor.

Análise de dados/conteúdo pré-existente

O Labor ter um ano de mercado é fato importante e não deixamos isso de lado. Ao participar desse projeto tínhamos consciência de que havia decisões e dados que nos precederam. Cabia a nós entendermos o contexto e dados que já haviam sido coletados para tomar decisões baseadas no que já aconteceu.

O primeiro passo do projeto foi o de avaliar os dados que já haviam sido coletados com este ano de vida do produto. Isso incluiu todo o conteúdo já produzido e implementado: landing page publicada, mídias sociais, conversas pelo Crisp (chat anexado ao site para tirar dúvidas), os estudos de growth hacking do primeiro semestre e o plano de negócio.

Nesse estágio a maior dificuldade é se atualizar com as informações que já tinham sido coletadas, entendê-las, analisá-las e filtra-las segundo as necessidades do projeto.

Separamos então pontos positivos, pontos não satisfatórios, feedbacks de usuários, público-alvo delimitado pelo plano de negócio, detalhes do que foi considerado o diferencial do produto, quais as funcionalidades que mais entregam valor pro cliente, dentre outros dados deste compilado.

Como resultado de toda essa análise priorizamos estrategicamente os principais valores do produto.

Havia um desejo de realizar pesquisas com usuários. Após toda essa análise identificamos que não seria necessário, pois haviam informações o suficiente para dar prosseguimento ao desenvolvimento.

Definição da Arquitetura de Informação

Antes de falar sobre a A.I., é importante ressaltar que todo este processo não foi completamente linear. Estamos narrando de forma cronológica de acordo com os grandes blocos de tarefas dentro de um processo mais ou menos estruturado. Até então o conteúdo levantado e priorizado estava apenas em início de desenvolvimento.

Este foi o momento dos primeiros esboços. Já havíamos decidido que o site não seria uma página única devido a previsão da quantidade de conteúdo que queríamos passar. Seguimos os ensinamentos de progressive disclosure, contextualizando o usuário em o que é o aplicativo e porque ele é bom, para depois esclarecer sobre a aquisição e como usar este produto. Isso foi feito especialmente porque o Labor tem teste gratuito por 30 dias, exigindo nenhum vínculo para começar a usar e vivenciar o seu valor na prática.

Dividimos o site em uma página principal com o pitch e principais funcionalidades do produto. Separamos uma página para os planos de assinatura e exemplos de escritórios que usam o Labor. Mantivemos as páginas de login e cadastro separadas. E fizemos uma galeria de vídeos que explica como utilizar o Labor e assuntos relacionados ao seu uso.

Dos esboços, com alguns conteúdos já delineados e decisões de páginas secundárias, desenhamos o mapa da página principal (chamada de “produto”) e a árvore entre a página principal e suas páginas secundárias. Estes entregáveis são úteis para a referência do time e ponto de partida para definir o processo em grandes etapas.

Escrevendo para Web — UX Writing

O mais comum é que a criação do conteúdo preceda a criação de qualquer parte visual, e que seja feita por profissionais especializados, o que não aconteceu nesse projeto. A equipe era composta por 2 designers e 1 desenvolvedor. Com quase nenhuma experiência e conhecimento sobre o assunto, iniciamos a jornada de escrever um bom texto para nossa landing.

Buscamos por referências de escrita, da mesma forma que buscamos por referências visuais. Procurando por similares ou concorrentes diretos, analisamos páginas que geraram algum tipo de interesse: como a mensagem é passada? Qual tipo de linguagem? É informal e direto ao ponto? Qual o tamanho do conteúdo? Como esse texto é distribuído entre as páginas? Qual a lógica de organização?

Em paralelo a essa busca fomos atrás de conteúdo teórico básico de qualidade que nos auxiliasse na escrita. Os artigos da Nielsen Norman Group foram nossas referências nessa etapa. Focamos na aplicação dos conceitos abordados nesses 3 artigos:

Atentando-se aos princípios básicos de escrita para Web, às informações do projeto e às seções levantadas na arquitetura de informação do projeto criamos um conteúdo pautado em:

  • Funcionalidades do produto, transmitidos de maneira simples e direta;
  • Principais benefícios do produto segundo os feedbacks dos próprios usuários (das pesquisas que tínhamos registradas);
  • Termos familiares para o público-alvo (resumidamente feminino, de arquitetas e designers de interiores);
  • Como utilizar o produto;
  • Valores e como adquirir.

Com isso tivemos a primeira versão de texto para a Landing. E, assim como qualquer projeto que segue uma linha de desenvolvimento incremental, o conteúdo foi revisado, algumas partes cortadas e outras alteradas, no decorrer do projeto.

O fato de ter sido produzido por designers fez com que o texto fosse construído com algumas preocupações visuais, pensando no futuro da sua aplicação como extensão do conteúdo, potencialidade visual da composição do texto e elementos gráficos para auxiliar sua compreensão.

Levantamento de Referências visuais

Não apenas o texto mas as imagens também devem estar dentro do campo semântico do público-alvo. Com esse pensamento foram levantados todos os tipo de referência, incluindo tendências de tipografia e imagens que se relacionassem ao contexto do usuário que queremos atingir. Posteriormente essas referências foram registradas e sintetizadas no moodboard mostrado abaixo. Garantindo que estivesse coerente com valores do produto, estratégias de negócio e de growth hacking.

A diagramação do moodboard mostra a linha que queríamos seguir com o site. Um layout que equilibra espaço preenchido com espaço vazio, remetendo à identidade do produto em si, e expressando uma sensação de simplicidade e elegância. Isto foi baseado na descrição do Labor feita pelos usuários como “simples e fácil de usar”.

Decidimos utilizar as cores presentes no Labor, valorizando cores vibrantes que são secundárias à identidade visual da marca, como o azul. Nos inspiramos na arquitetura de Brasília, cidade natal do aplicativo, e como ela traz espaço preenchido vs. espaço vazio. Escolher a fonte serifada foi uma consequência da inspiração na arquitetura da capital (observe a foto da Catedral de Brasília, as extremidades não parecem serifas para você?). E por último, o elemento de criatividade e sensibilidade do arquiteto sendo trazido por meio de ilustrações (fazendo referência também aos sketches arquitetônicos) com traços mais delicados em blocos monocromáticos contextualizados em ambiente de trabalho semelhante ao do público-alvo.

Desenvolvimento do Design

O moodboard foi o ponto de partida palpável para a interface da Landing. Ele também auxiliou no alinhamento com o “cliente” (CEO da Novatics, por ser um produto interno). A partir dele foram decididos os seguintes requisitos:

  • Paleta de cores limitada — tendendo pro monocromático.
  • Bastante espaço em branco;
  • Uso de ilustrações feitas exclusivamente para o Labor;
  • Partir de tela desktop (1280px) e;
  • Adaptive Design.

A escolha pelo adaptive design, ou design adaptativo em português, no lugar de design responsivo se deu por 3 motivos: (1) boa usabilidade em diversos tamanhos de tela, (2) manter a organização visual dentro da estratégia, (3) facilitar a visualização dos maiores breakpoints da viewport para o desenvolvedor alocado neste projeto. Nós já teríamos que montar a simulação de layout para os breakpoints definidos, por que não avaliar esse comportamento flexível e adaptá-lo para melhor servir ao usuário?!

O design partiu do desktop pois o produto foi desenvolvido originalmente para este dispositivo, portanto o meio mais acessado pelo usuário. Do desktop pensamos no layout para tablet “deitado e em pé” (1024px e 768px, respectivamente), até o layout para smartphones. Por mais que a ideia tenha sido de rápida implementação, nós, designers, priorizamos a usabilidade e a coesão entre diferentes tamanhos de tela (pelo menos os mais comuns).

As duas designers (Raianne e Marina) trabalharam lado a lado (literalmente, com computadores um do lado da outro) na concepção da identidade visual e manifestação gráfica dos elementos escolhidos. Na prática o trabalho foi separado entre ilustração e layout/diagramação, cada profissional com uma responsabilidade.

Durante todo o processo de design, do planejamento ao resultado, foram realizadas avaliações dos membros da equipe e do cliente. As validações tiveram cunho formal até o início do processo de design de interface, pois estávamos lidando com estratégia de negócio. Já durante o desenvolvimento da UI, com o conteúdo já aprovado, tivemos feedbacks informais e frequentes devido à proximidade que temos com o dono do produto. Isso diminuiu consideravelmente as chances de refatoração e ajustes próximos à entrega do site.

sketch + adobe illustrator + adobe photoshop

As ferramentas que utilizamos para esta etapa do projeto foram:

  • Sketch para diagramação do layout e fechamento da interface;
  • Illustrator para fazer as ilustração e o Photoshop para finalização e refinamento.

Handoff e Alinhamento Design/Dev

Aqui na Novatics não existem equipes de desenvolvimento e design separadas; a equipe é única e trabalha de forma integrada, com comunicação direta para chegar a um objetivo. Por isso dúvidas eram sanadas quase que instantaneamente, assim como pequenos alinhamentos sobre questões técnicas, entrega de partes do projeto, etc.

Porém, para integrar estas partes desenvolvidas e acompanhar o trabalho um do outro usamos algumas ferramentas.

zeplin + trello + paper dropbox

O Zeplin foi usado para organizar as telas em ordem de navegação, comentar detalhes de interação, subir o guia de estilo (cores e estilos de parágrafo) e componentes (átomos e moléculas). Ou seja, traduzir o design da tela para linguagem de implementação.

O progresso do projeto foi atualizado no Trello, onde todas as tarefas estavam descritas e movidas dentro do método kanban (a fazer, fazendo, aguardando, e feito).

Por fim, utilizamos o Paper Dropbox para o momento de revisão da implementação e ajustes finos de UI/UX. Todo detalhe testado e percebido como fora do projetado foi colocado no documento em um checklist acompanhado da captura de tela manifestando o “erro”/detalhe/ajuste. Assim o desenvolvedor teria uma lista de tarefas, uma referência de onde está o problema, um local para comentar e iniciar uma comunicação em relação àquela tarefa, e marcar quando finalizada. Foi uma ferramenta que garantiu uma comunicação fácil e ágil. (Esse post que você está lendo também foi rascunhado no Paper Dropbox)

A partir da implementação do desktop, o IP da máquina do dev na rede local foi compartilhado quase diariamente com as designers para o acompanhamento e revisão das telas. Isso foi positivo para não acumular tarefas e não levar trabalho extra para a implementação dos outros tamanhos de tela.

Validação desse experimento de evolução do MVP

Como saber se tudo o que estudamos, analisamos e aplicamos para fazer a evolução da página deu certo?

A ferramenta que estamos utilizando para medir interação/experiência nas páginas implementadas é o Hotjar.

Esta ferramenta é gratuita e fornece dados e métricas a partir do monitoramento de usuários no seu site. Esse acompanhamento pode ser feito a partir de 8 funcionalidades, das quais estamos utilizando:

Heatmaps

É um mapa de calor que indica as áreas de maior interação e navegação do usuário nas páginas. Existem 3 tipos:

  • Heatmap de click: mostram área de cliques e áreas que não atraíram nenhuma fixação por parte dos usuários.
  • Heatmap de movimento: mostram as áreas com mais e menos movimentos do cursor nas páginas.
  • Heatmap de scroll: apresenta as áreas mais visualizadas no sentido de rolagem da página.

Essa funcionalidade é importante para analisar o engajamento com o conteúdo, avaliar a eficiência de call to actions e tamanho das páginas (e até onde o usuário lê).

Gravações

Nesta funcionalidade o visitante é gravado utilizando o seu site mostrando onde eles clicam, tocam, movem o cursor e navegam pelas páginas.

Feedback polls

São perguntas baseadas em tempo ou eventos, que você pode configurar para aparecer em páginas específicas ou quando o usuário interage com determinada área da página. Essa funcionalidade é importante pois é possível capturar um feedback direto do usuário ao final de algum fluxo, ou caso ele não consiga terminar e o porquê.

O redesenho da landing faz parte de um plano maior de growth hacking e para analisar o real impacto do novo site é necessário avaliá-lo em conjunto com outras ações feitas, como por exemplo divulgação. Por isso não faremos nenhuma análise de dados neste post.

Resultado

Não existe sensação mais gratificante do que a de finalizar um projeto.

Esse foi o resultado de 3 meses, o que acharam? Dá uma olhada e conta pra gente. 😉

Este post foi escrito por Marina Alves e Raianne Rodrigues. Designers UI/UX na Novatics.

  • #produto
Raphael Santos
Raphael Santos, Engenheiro de Software
Trabalho com desenvolvimento de sistemas, pensando na qualidade de software aplicando e testando padrões e metodologias. Código aberto e disseminar conhecimento me motivam.

qual é o seu desafio para a gente?

hello@novatics.com.br
Voltar ao topo