Redesign da experiência digital da Transempregos
Iniciativa:
Transempregos
Ano:
2026
Redesign e otimização da experiência mobile para a principal plataforma de inclusão profissional de pessoas trans no Brasil. Atuação focada no diagnóstico de usabilidade, checagem de acessibilidade WCAG, reestruturação da arquitetura de informação e criação de protótipos de alta fidelidade para contornar as limitações técnicas da plataforma Wix.
O trabalho abrange a auditoria do site atual, o redesenho do sitemap priorizando o acolhimento do candidato, ajustes estruturais e a entrega de protótipos interativos e documentação no Figma.
Contexto
Diagnóstico do produto.
A Transempregos é a principal plataforma de inclusão profissional de pessoas trans no Brasil. Este estudo de caso voluntário teve como objetivo otimizar a experiência digital da organização.
O desafio consistiu em reestruturar a usabilidade do ecossistema mantido em um plano essencial do Wix, alinhando as restrições da plataforma às prioridades estratégicas da marca.
O Desafio e a Auditoria do Produto
- Foco na experiência do candidato: A versão anterior priorizava áreas de anunciantes na dobra principal. O novo direcionamento coloca a jornada de acolhimento e capacitação do candidato em primeiro plano;
- Acessibilidade e legibilidade: A checagem com base nas diretrizes WCAG apontou problemas de contraste e hierarquia tipográfica em elementos de ação;
- Navegação mobile: A maior parte dos acessos ocorre via smartphones, mas o layout apresentava quebras estruturais ao adaptar-se para telas menores.
Direcionamento institucional
Priorizar a facilidade de acesso a vagas e conteúdos de preparação profissional, respeitando a identidade visual da marca.
| Dimensão | Cenário Observado |
|---|---|
| Plataforma Base | Plano padrão do Wix (sem recursos avançados de desenvolvimento/Wix Studio). |
| Limitação de Layout | Ausência de auto-layout e restrição a um único breakpoint para responsividade. |
| Conformidade WCAG | Necessidade de adequação no contraste de cores institucionais em botões e textos. |
| Comportamento de Uso | Predomínio absoluto de acessos por dispositivos móveis por parte dos candidatos. |
Mapeamento do site atual
Levantamento das páginas vigentes para identificação de atritos operacionais e lacunas na jornada.
Atividades realizadas:
- Captura e inventário completo de todas as telas na versão mobile;
- Auditoria de legibilidade e aplicação das normas de contraste WCAG nos elementos visuais;
- Mapeamento do conteúdo das páginas.
Conteúdo oculto
Maior parte do conteúdo de valor do site está acessível apenas pelo menu de navegação.
Abordagem
Mapeamento estrutural, arquitetura de informação e wireframes mobile-first.
O processo metodológico estruturou-se em três frentes: diagnóstico visual e de fluxo do site existente, reestruturação estratégica da arquitetura de informação e concepção de wireframes de alta fidelidade.
Cada etapa foi desenhada para contornar as limitações técnicas do Wix, priorizando a usabilidade do candidato em dispositivos móveis e viabilizando a entrega de uma experiência escalável.
Estilos
Os estilos projetados seguem a estrutura disponível pela customização do Wix.
Estilos projetados:
- Títulos;
- Botões;
- Paleta de cores.
Expansão da paleta de cores
A paleta de cores da marca foi expandida para incluir os tons da bandeira Trans.
Reestruturação e sitemap
Redesenho da arquitetura de informação para inverter a priorização do site, deslocando o foco comercial para o acolhimento do candidato, em conformidade com o manual da marca.
Principais decisões:
- Criação de páginas intermediárias para aglutinar conteúdos que estavam dispersos;
- Integração de conteúdos de PDFs e cartilhas diretamente no HTML;
- Reorganização lógica da jornada para orientar o candidato antes de conduzi-lo às vagas.
Wireframes de alta fidelidade
Desenvolvimento da interface visual projetada sob a ótica mobile-first, concebida para contornar as restrições técnicas da plataforma Wix.
Diretrizes de projeto:
- Construção adaptada à ausência de auto-layout e à limitação de um único ponto de quebra (breakpoint)
- Estruturação de blocos modulares estáticos para garantir estabilidade visual e consistência na renderização mobile;
Consistência de layout
Estrutura modular desenhada para assegurar previsibilidade visual nas telas dos dispositivos móveis.
Resultado
Protótipo interativo e arquivo completo do Figma.
O resultado do projeto voluntário entregou a solução para a otimização mobile da plataforma e a documentação estratégica consolidada para direcionar futuras evoluções.
A entrega no Figma abrange desde os fluxos validados até o arquivo completo estruturado para servir de base nas próximas etapas de desenvolvimento da Transempregos.
Protótipo de navegação (Figma)
Apresentação do protótipo interativo simulando os fluxos principais estruturados para a experiência móvel e desktop.
A navegação permite validar a jornada desde o acesso direto às oportunidades de trabalho até aos materiais de orientações.
Arquivo completo no Figma
Disponibilização do arquivo completo contendo toda a documentação de telas, wireframes e especificações visuais.
Documentação de referência
Estrutura organizada para uso da equipe e futuras iterações na plataforma.
