CLIENTE
Diretoria de Desenvolvimento de Pessoas
SERVIÇO
Product Designer + Desenvolvimento front-end
DATA
29 de mar. de 2026
Visão Geral
O Desafio: O site principal da PROGEP apresentava uma arquitetura de informação e taxonomia tão complexas e defasadas que os servidores preferiam recorrer ao Google para encontrar documentos a navegar na plataforma. Além disso, as informações sobre os cursos do Ambiente Virtual de Aprendizagem (AVA) eram escassas e mal descritas, contribuindo para uma taxa de abandono de 50% nas capacitações.
A Solução: Concebemos e implementamos o novo Portal Institucional de Desenvolvimento de Pessoas. Um ambiente dedicado para descentralizar conteúdos, guiar novos usuários no AVA, organizar a curadoria de cursos e dar transparência às ações de capacitação da universidade.
Meu Papel: Coordenadora de Produtos Digitais. Liderei o projeto de ponta a ponta, sendo responsável pela estratégia de UX Research, arquitetura de informação, coordenação da equipe de interface e desenvolvimento do front-end.

Descoberta
O objetivo desta fase foi mapear o ecossistema atual, entender as restrições operacionais da Diretoria de Desenvolvimento de Pessoas (DDP) e os hábitos de navegação dos servidores públicos da UFES.
Documento de Projeto e Alinhamento: Estruturamos o escopo inicial cruzando os objetivos de negócio da diretoria com as necessidades dos servidores. Realizamos reuniões estratégicas para alinhar as expectativas e garantir que o portal nascesse em conformidade com as diretrizes da Lei de Acesso à Informação (LAI) e LGPD.
Análise de Dados dos Usuários: Analisamos os dados internos fornecidos pela DDP para entender o perfil do público-alvo (servidores técnico-administrativos e docentes), sua maturidade digital e os principais gargalos operacionais — como a falta de descrição dos cursos ofertados e a sua listagem feita puramente em ordem alfabética.
Pesquisa Secundária (Desk Research): Investigamos boas práticas de portais institucionais e acessibilidade digital no setor público. Buscamos referências consolidadas de plataformas de capacitação governamental, utilizando como principal benchmark a Escola Nacional de Administração Pública (Enap).
Definição
Com os dados coletados, passamos para a etapa de cruzamento de informações para traduzir dores em oportunidades de design e estrutura.
Matriz CSD: Consolidamos nossas Certezas, Suposições e Dúvidas. Sabíamos que a falta de categorização por temas barrava a autonomia do usuário. Formulamos a hipótese de que detalhar melhor as ementas dos cursos de forma amigável aumentaria o engajamento e a taxa de conclusão das turmas.
Análise Semântica e Arquitetura da Informação: Estudamos a taxonomia complexa do site antigo para entender onde os usuários se perdiam. A partir disso, reestruturamos toda a árvore de navegação e os fluxos do usuário. O foco foi descentralizar o conteúdo da PROGEP, separando a burocracia institucional do Portal de Desenvolvimento, garantindo que o servidor encontrasse o que precisava em poucos cliques.
Personas: Criamos perfis arquetípicos baseados nos servidores e docentes da UFES para guiar as decisões de design, garantindo que a plataforma atendesse desde o usuário com alta autonomia digital até aquele que precisava de guias mais visuais e acolhedores para navegar no portal.
Prototipação e interface
Nesta etapa, atuei na coordenação direta do design de interface, liderando e mentorando minha estagiária, que me auxiliou na execução e no refinamento visual das telas.
Mapa Semântico de Referências Visuais: Antes de desenhar, criamos um painel semântico com referências visuais de interfaces modernas, limpas e que transmitissem acessibilidade, credibilidade e foco em educação.
Wireframes de Baixa, Média e Alta Fidelidade: Traduzimos a nova arquitetura da informação em rascunhos de baixa fidelidade para validar os fluxos lógicos. Evoluímos iterativamente para média fidelidade até chegar nos protótipos de alta fidelidade, refinando componentes, espaçamentos e hierarquia visual.
Visual da Interface: Unimos as telas desenvolvidas em alta fidelidade com a identidade visual criada pela equipe de diagramação do laboratório. Garantimos que a interface respeitasse critérios rigorosos de contraste e legibilidade, focando em uma experiência verdadeiramente acessível e inclusiva.

Desenvolvimento e entrega
Como coordenadora do produto, fiz questão de garantir que a transição do design para o código fosse impecável, com foco no pixel perfect.
Desenvolvimento em WordPress: Fui a responsável por programar e implementar o site final utilizando a plataforma WordPress. A escolha dessa tecnologia foi estratégica para atender a uma dor real do cliente (DDP): a necessidade de gerenciamento fácil, autônomo e descentralizado de conteúdo por parte da equipe interna, sem que eles dependessem de suporte técnico constante para atualizar cursos, notícias ou legislações.

Principais Aprendizados como Líder e Pesquisadora
Visão Sistêmica de Produto: Trabalhar no projeto do início da pesquisa até a entrega das linhas de código me deu uma visão clara de como restrições técnicas precisam ser consideradas desde o primeiro dia de Discovery.
Liderança e Mentoria: Coordenar o projeto e guiar a estagiária no desenvolvimento da interface me permitiu exercitar habilidades de gestão de pessoas, divisão de tarefas e garantia de qualidade (QA) do design entregue.
Desmistificação do Setor Público: Conseguimos provar que portais institucionais governamentais não precisam ser cinzas, complexos ou difíceis de usar. É possível unir os pilares de usabilidade, acessibilidade e transparência em uma plataforma moderna e focada na autonomia do usuário.
