Cadastro de usuários
Página para novos usuários se cadastrarem no sistema de gestão de rotinas
Visão geral
Esse foi um teste de seleção para a empresa Dayway – Gestão de processos e rotinas, realizado no primeiro semestre do ano de 2022.
A Dayway é uma empresa do grupo Falconi. É uma solução digital que possibilita maior eficiência no gerenciamento de rotinas por meio da digitalização de processos.
O teste proposto
“Em uma recente avaliação com o nosso time de Operações, entendemos que a melhor forma de avaliarmos se os novos leads fazem sentido para que o nosso time entre em contato é através de um Sign Up, que permita agilidade no cadastro, esteja dentro das regras para envio aos Desenvolvedores (Empty State, Alertas e etc) e principalmente: Comunique o valor da nossa plataforma e as vantagens em digitalizar as rotinas e processos.
O nosso time de Operações precisa entender do cliente de qual empresa ele é, alguma informação de contato e também o tamanho da empresa – perguntar o setor da empresa pode ser importante, mas não necessário.”
Minha função
Minha função era Designer UI/UX, com maior foco em interface de usuário.
O Problema
Para uma melhor realização do teste eu precisava conhecer um pouco mais da empresa, saber como ela atualmente fazia o cadastro de usuários, quais as táticas de conversão que eles utilizavam e com base nos resultados começar a criar algo com base em um material de apoio (guia de estilos e componentes) que eles me passaram.
O que obtive de útil para a iniciação foi:
- O modelo de negócio deles é B2B;
- Os usuários para se cadastrarem atualmente precisam de apoio técnico;
- O site possui um layout bem elaborado, porem bem diferente da biblioteca de componentes que foi compartilhada como base;
- Apesar deles não permitirem que o usuário se cadastrasse de forma direta, havia um tipo de formulário que captava alguns dados dos usuários;
- Não havia uma boa consistência entre o material de apoio e o website.
A Solução
Utilizando o formulário, que servia para solicitar o contato da equipe técnica com um possível cliente, eu descobri quais as informações que eles consideravam importantes para captação de clientes, juntando isso com o guia de estilo e a pequena biblioteca de componentes que eles me passaram já era possível iniciar a criação.
Para tornar a proposta mais consistente era necessário definir qual a fonte, a paleta de cores e fazer alguns ajustes nos componentes.
Tipografia
A escolha da fonte e dos estilos foi baseada nos elementos presentes no material de apoio, para manter os padrões presentes decidi optar por não alterar as fontes, só alguns ajustes nos tamanhos e pesos, pois foi necessário para uma melhor disposição dos textos dentro do modelo que eu tinha em mente.
As cores escolhidas para os textos seguem os padrões definidos também no material de apoio, com adição de uma cor de contraste ao magenta, sendo essa cor o laranja, utilizei ela em momentos de chamadas para ação, “call to action” (CTA).
Paleta de cores
As paletas de cores foram definidas com base no documento de material de apoio e no próprio site da empresa, criando um gradiente para tons mais claros aplicados na interação com certos elementos, como mirar (hover), clicar (click) ou focar (focus).
Utilizei a regra do 60/30/10 para uma melhor harmonização e manter a identidade do site original, deixando o branco como a cor dominante e o magenta como para dar o realce, enquanto mantive o laranja para elementos de maior destaque.
O tom de laranja escolhido foi com base nas ilustrações presentes no material de apoio, apesar dele não estar no melhor tom para contrastar com o magenta eu optei por ele para tentar manter as cores e o design o mais próximo possível do material original.
Biblioteca de componentes
Os componentes foram baseados nos modelos presentes no material de apoio, mantive o mais próximo do original, adicionei alguns exemplos de interação (mirar, clicar, focar, etc) e modifiquei pequenos detalhes como a cor do placeholder, a barra de rolagem do dropdown, a altura do botão e o ditanciamento do label com o input.
Protótipo de alta fidelidade
Após os ajustes nos componentes e criação de algumas variações dei início ao protótipo navegável de alta fidelidade utilizando o figma.
Ajustei os botões, os campos de preenchimento, campos de seleção e criei variações de cada um deles, já utilizando algumas funcionalidades do figma que me permitiam simular uma interação mais realista.
Para a criação das telas optei por algo utilizando ilustrações e no lugar de um cadastro realizado completamente pelo próprio usuário, mantive o método atual de análise e solicitação de acesso ao sistema, assim eu podia garantir que minha proposta além de respeitar o atual processo liberação de acesso ao sistema, ele facilitaria o trabalho da equipe técnica e entregaria uma experiência mais satisfatória para o usuário.
Para deixar o formulário mais interativo e pensando em uma maior conversão, tentei tornar a experiência de cada um diferente, com o pressuposto de que todos nós gostamos de nos sentir especiais e valorizados, juntamente com o fato de que o negócio é voltado para outras empresas, decidi adicionar uma ilustração diferente para cada seguimento empresarial.
Testes e feedback
Por ser um teste solicitado em curto tempo não foi possível realizar um teste bem elaborado e analisar qual a experiência dos usuários com o processo de cadastro, mas realizei um teste rápido com algumas pessoas já conhecidas e os resultados foram bem positivos, principalmente em relação às ilustrações que mudavam de acordo com o setor.
Conclusão
Esse foi um entre dezenas de outros testes apresentados a empresa, haviam aproximadamente 300 candidatos e esse teste me levou até uma entrevista final que por fim permitiu meu aprovação no processo seletivo da empresa Dayway.
Lições aprendidas
Apesar do desenvolvimento ter sido em poucos dias e sem muitas informações entregues em mãos, a experiência de pesquisar e reunir informações para então traçar um plano de criação e coloca-lo em prática foi excelente.