Design de formulário de cadastro de funcionários
Esse projeto foi a primeira entrega, parte da construção de novo produto de gestão interna de um banco público brasileiro.
O formulário tem como objetivo de modernizar e automatizar o cadastro de funcionários terceirizados da instituição. Meu trabalho neste projeto foi desenhar um fluxo amigável para os usuários.
Contexto
O cliente necessitava de um novo produto de uso interno de gestão, para automatizar rotinas de trabalho excessivamente manuais que estavam gerando problemas por desatualização e risco operacional.
O produto a ser criado pela equipe técnica foi uma plataforma para centralizar informações e assim facilitar o gerenciamento de funcionários e contratos, além de tornar a consulta de dados mais acessível, melhorando sua confiabilidade e disponibilidade.
A primeira entrega foi um formulário para preenchimento de dados dos funcionários. O fluxo deveria ajudar o usuário a preencher os dados de forma rápida e sanar suas dúvidas ao longo do processo, diminuindo a probabilidade de erros.
A maior dor mapeada era a falta de padronização e centralização dos dados. Então, foi necessário compilar tudo que seria necessário para começar a desenhar um novo fluxo.
Processo
Projeto - Criar um formulário para registrar funcionários terceirizados do banco.
Problema - Usava-se formulários preenchidos em planilhas, as informações dos funcionários e dos contratos ficavam descentralizadas e desatualizadas. A principal consequência era a dificuldade de gerenciar os dados dos contratos de trabalho.
Solução - Automatizar o processo para ser mais confiável e atualizado. Criar um formulário para cadastrar os funcionários e centralizar as informações sobre as pessoas e os contratos de trabalho para seu melhor gerenciamento. Projetar uma interface moderna e construir um fluxo amigável para o usuário.
Fase 1 - Descoberta
O processo inicial foi mapear quem seriam os usuários do produto com ajuda do cliente, assim como entender suas necessidades. A partir daí, deixar destacado o que o produto precisaria ter para resolver as dores dos clientes e dos usuários.
A conclusão foi que era preciso desenhar um formulário com fluxo prático, para que fosse preenchido de forma rápida, que tivesse uma interface simples e conversacional, para gerar o menor número de dúvidas possível, impedindo que o usuário abandonasse o processo.
Resumo do mapeamento dos usuários do produto e suas necessidades.
Fase 2 - Ideação
Pesquisas
Uma vez entendida a necessidade dos clientes, o próximo passo foi iniciar as pesquisas.
-
Benchmarking para aprender sobre as melhores práticas na construção de formulários;
-
Buscar por referências visuais;
-
Pesquisar estudos de usabilidade focados na construção de formulários.
A partir dessas pesquisa, delimitamos quatro pontos que deveriam ser atendidos nesse MVP para contemplar os clientes e criar uma boa experiência para os usuários. Veja a seguir:
-
Design Responsivo
-
Breadcrumbs para ajudar o usuário a se localizar no fluxo
-
Sistema precisa fornecer feedbacks de erro e campos obrigatórios
-
Completar informações quando possível
Apresentação das características de formulários amigáveis para os usuários.
Wireframes
O cliente passaou uma lista com os campos que precisavam que os funcionários preenchessem no formulário.
Separei essas informações em cinco categorias:
-
Dados pessoais
-
Educação (nível de escolaridade)
-
Profissionais (dados sobre o contrato e local de trabalho)
-
Saúde (tipo sanguíneo e contato de emergência) - opcional
-
Diversidade (gênero, sexualidade, etnia) - opcional
Para ajudar o usuário a se guiar pelo processo, utilizei o componente “stepper”, presente no UI Kit. A intenção era usá-lo como um breadcrumb, mostrando quantos passos tem o formulário e indicando em qual das etapas ele se encontra até finalizar o cadastro.
Apresentação da funcionalidade "stepper" que servirá para localizar o usuário no fluxo
Depois do fluxo aprovado pelo cliente, segui para construção de um protótipo de média fidelidade. Incluindo os campos de acordo com os requisitos determinados.
Protótipo da primeira página de cadastro
Fase 3 - Validação
Prototipação
O próximo passo foi iniciar a prototipação em alta fidelidade. Esta etapa permitiu incluir todos os requisitos determinados previamente na história do usuário, incluindo os feedbacks de erro e de campos obrigatórios e discutindo formas de possibilitar o preenchimento automático com a equipe técnica e desenvolvedores.
Foi necessário construir um protótipo navegável, incluindo o menu com os títulos das páginas que seriam desenvolvidas em sprints futuras.
Primeira versão do menu navegável
Teste
Para sanar alguns questionamentos sobre o fluxo, sugeri a realização de testes com usuários.
O problema é que não havia muito tempo, mas o cliente indicou três funcionários para participar do teste, feito de forma remota. Os voluntários receberam o link do protótipo e precisaram navegar pelo formulário, como se fossem preenchê-lo, enquanto respondiam algumas questões. A tela foi gravada enquanto navegavam pelas telas.
Entre os apontamentos dos usuários destaca-se:
-
Inconsistência de títulos utilizados no menu - dois usuários questionaram a razão da escolha de “terceirizado” e “colaboradores”, gerou dúvidas.
-
Falta da opção “voltar” - todos os usuários sentiram falta de uma opção de voltar, um deles disse que causava insegurança não poder conferir a etapa anterior do fluxo.
-
Apesar de cansativo, o fluxo era bem sinalizado - os usuários entendem que o fluxo é longo por necessidade, mas elogiaram o fato de ter um feedback claro demonstrando em qual etapa estão, as já concluídas e quantas faltavam para sinalizar.
Apresentei ao cliente o resultado dos testes aplicados e quais as melhorias precisavam ser feitas. Algumas adaptações foram pedidas:
-
Mudar o termo “colaboradores” para “terceirizado” no menu;
-
Incluir um botão de “voltar” nos passos de 2 a 5 do fluxo de cadastro para permitir ao usuário voltar à tela imediatamente anterior;
-
Construir ao final do fluxo de cadastro uma tela de resumo, na qual o usuário tenha acesso a todas as informações preenchidas para conferir seus dados. Ao final haverá dois CTAs: um botão primário para confirmar e enviar os dados e um secundário de “editar cadastro”, que leva ao início do fluxo e permite ao usuário editar qualquer informação.
Conclusão
Após as mudanças implementadas, baseadas nos feedbacks recebidos na etapa de testes, o projeto seguiu para fase de desenvolvimento.
Comparação entre a primeira versão e última de uma das páginas do protótipo
De modo geral, houve a modernização da interface e a melhora na usabilidade com o desenvolvimento da nova plataforma, que vai resolver o problema de padronização e a falta de centralização dos dados, facilitando a gestão.
No futuro, ficam mapeadas a necessidade de testar a etapa de resumo e confirmação de dados, além de focar em melhorar a acessibilidade da interface.
Antes e Depois
Veja como era a interface antes e como ela ficou depois do projeto de design descrito.
A interface do banco antes
A interface entregue com melhorias de usabilidade e mais moderna