Submissão de projetos em editais da FAPES
Uma tela de submissão para um formulário longo, preenchido por pesquisadores com prazo apertado.
- Meu papel
- Product Designer, projeto individual
- Contexto
- Desafio técnico de UX/UI do processo seletivo do LEDS
- Ferramenta
- Figma Make
- Status
- Protótipo funcional concluído
Contexto
Este projeto foi o meu desafio técnico de UX/UI no processo seletivo do LEDS.
Problema
O desafio era projetar a tela de submissão de projetos para editais da FAPES.
A entrega precisava ser uma única tela para um formulário longo, preenchido por pesquisadores sob pressão de prazo.
Meu papel
- Fiz o projeto sozinha, da leitura do problema ao protótipo funcional.
- Desenhei o fluxo de preenchimento, a interface e os estados de validação e ajuda.
- Construí o protótipo navegável de alta fidelidade no Figma Make.
Processo
Como o formulário é longo e o prazo pesa, organizei o preenchimento em etapas curtas dentro da mesma tela. As imagens abaixo seguem a ordem em que o pesquisador passa por elas.
Etapa 1, Identificação. O coordenador responsável vem pré-preenchido do perfil. 
Validação no próprio campo, com mensagem que diz o que falta. 
Tooltips de ajuda ao lado dos termos que costumam gerar dúvida. 
Etapa 2, Descrição. Resumo, metodologia e palavras-chave. 
Etapa 3, Documentos. A lista mostra o que já foi enviado e o que ainda falta. 
Etapa 4, Revisão. Tudo o que foi preenchido, antes de enviar. 
Confirmação com número de protocolo. 
O mesmo fluxo no tema claro. 
Versão para celular.
Principais decisões
Wizard em 4 etapas na mesma tela
Por quêCom progressive disclosure, o pesquisador vê só o bloco que está preenchendo e sabe quanto falta. Isso evita a rolagem infinita e reduz a carga cognitiva de um formulário longo.
Usuário já autenticado e dados pré-preenchidos
Por quêO avatar com status na navegação mostra quem está logado, e os dados do coordenador responsável já vêm preenchidos. Quem tem prazo curto não perde tempo digitando o que o sistema já sabe.
Salvamento automático, validação clara e ajuda no contexto
Por quêO salvamento automático (simulado no protótipo) protege o trabalho de quem é interrompido. As validações apontam o erro no campo onde ele está, e os tooltips explicam termos como "Metodologia" sem tirar a pessoa da tela.
Tema claro e escuro com contraste ajustado
Por quêCada pesquisador usa o modo que prefere. Ajustei o contraste nos dois temas para que textos, campos e mensagens continuem legíveis.
Identidade visual da FAPES na navegação
Por quêA marca da FAPES na barra de navegação deixa claro que a pessoa está no ambiente oficial do edital.
Resultado
Protótipo funcional de alta fidelidade, navegável do primeiro campo até a confirmação do envio.
Status: Protótipo concluído.