Hero & Barra de buscas
Saudação Personalizada: Saudação com o nome do usuário e sua pesquisa contextual no redesign ("Dependendo de estar procurando um emprego em Design de Produto?”) são capazes de proporcionar relevância imediata e um alto nível de personalização.
Barra de buscas proeminente: O elemento de busca nesta versão é extremamente dominante, ocupando o centro da atenção sobre um fundo azul-marinho escuro de alto contraste e acompanhado por um único botão de CTA laranja em destaque.
Bookmark sempre acessível ao hover/tap - A ação para salvar vagas está disponível ao passar o mouse/toque, em vez de via um menu secundário.
Salário mostrado condicionalmente - 'Saiba o salário' ocupa espaço com CTA, mantendo a densidade e a fluidez dos cards em vez de gerar espaços vazios na interface.
Uso de Chips em vez de Texto solto - A modalidade de trabalho, o tipo de contrato e a senioridade são exibidos como chips visuais, para que possam ser lidos em menos de um segundo.
Card de emprego
Overview
Este case study apresenta um redesign conceitual, desenvolvido por iniciativa própria, com foco na homepage e na experiência principal de navegação do InfoJobs. O objetivo foi demonstrar como decisões estratégicas de UX, alinhadas a uma abordagem mais moderna de UI, podem melhorar significativamente a clareza, a hierarquia visual, a usabilidade e a percepção de confiança do produto ainda assim mantendo a familiaridade das funcionalidades que os usuários já conhecem.
Principais decisões de design
3
Marquee de logos via CSS - Animação sem JavaScript, com pausa em reduced motion, reforçando prova social sem depender de um grid estático.
Números em 48px com label abaixo - A hierarquia leva o olhar primeiro para a métrica; o texto de apoio entra apenas depois, como contexto.
Marinho profundo em vez de azul da marca: - Cria uma quebra visual clara no fluxo da página, sinalizando a transição de navegação para conteúdo de construção de credibilidade.
Stats banner
Cartão em destaque tem um fundo que usa a cor da categoria - cria ritmo visual na navegação, permitindo que o usuário crie memória espacial das suas áreas ao longo do uso.
Cartão padrão como CTA - o cartão padrão não tem botão — a área maior é clicável (o cartão inteiro), reduzindo a complexidade da interface e evitando elementos redundantes.
Cards compartilham um único tamanho - os cards em destaque / padrão são diferentes em tamanho e imagem, mas ambos usam raio de 8px e a mesma lógica de cores mantendo consistência no sistema.
Área de vagas profissionais
3 bolhas com “Ver mais” - mantém o ritmo visual das listas sem esconder o conteúdo atrás de um clique desnecessário, aparecendo apenas quando há overflow real.
Anônimo por padrão - reduz a barreira para deixar avaliações, aumentando o volume de reviews.
Avaliações de empresas
Cards de recomendação de emprego
Cards de vagas com salário: O novo visual mostra faixas salariais diretamente nos cards de vagas (R$ 12.000–16.000), respondendo à principal pergunta dos candidatos antes mesmo de clicarem — o que torna a tomada de decisão mais rápida e clara.
Banner de estatísticas e logos de empresas
Seção de empresas e estatísticas: A reformulação converteu a seção de logotipos antigos em métricas poderosas, que reforçam a escala e a credibilidade da plataforma; as marcas passam para um carrossel logo abaixo, onde você pode ver as marcas, mas sem ocupar espaço da interface principal.
Áreas profissionais
Grid de cards: No design visual original, todas as categorias eram tratadas de forma igual e com o mesmo peso na seção “áreas”; nesta reformulação, eu quis acrescentar um padrão de destaque baseado na significância individual: cada área mais popular (“Comercial e vendas”) recebe um card expandido, que exibe tanto uma ilustração quanto um CTA direto, enquanto as categorias secundárias são formatadas em uma grade compacta na lateral. Isso adiciona mais ritmo visual e facilita o fluxo natural do olhar dos usuários pela sua interface.
Outras mudanças
Mudança do carrossel: A exibição das avaliações foi redesenhada para que os elementos roláveis permanecessem dentro dos limites do respectivo contêiner, evitando que o conteúdo extrapolasse como no layout original e facilitando a legibilidade e a consistência visual.
Avaliações de empresas
Próximos passos
Pesquisa com usuários
Conduzir entre 5 e 8 sessões moderadas de usabilidade com usuários ativos do InfoJobs, utilizando a interface original. O objetivo é validar, na prática, os principais pontos de fricção identificados na análise heurística e entender como eles impactam a navegação real.
Teste de protótipo
Desenvolver um protótipo clicável no Figma cobrindo o fluxo da homepage e da busca de vagas redesenhada. Em seguida, realizar testes não moderados com ferramentas como Maze ou Lyssna, com uma amostra de aproximadamente 50 candidatos, para avaliar clareza, eficiência e entendimento da nova estrutura.
Abordagem mobile-first
Projetar os principais breakpoints responsivos com foco em dispositivos móveis. Considerando que mais de 60% do tráfego de plataformas de emprego no Brasil vem do mobile, a experiência da homepage precisa funcionar de forma fluida e consistente a partir de 375px, sem perda de hierarquia ou legibilidade.
Cobertura do fluxo completo
Expandir o sistema de design além da homepage, cobrindo também as páginas de Resultados de Busca, Detalhe da Vaga e o fluxo de candidatura. Essas são as etapas de maior tráfego após a entrada, e precisam manter consistência visual e comportamental em toda a jornada.
Documentação e handoff
Estruturar uma biblioteca de componentes no Figma com auto layout, variantes e design tokens bem definidos. Toda a lógica do sistema deve ser documentada de forma clara para facilitar o handoff com engenharia e garantir consistência na implementação.
1
Declutter da página
A versão original tinha muitas imagens soltas e inconsistentes entre si, sem nenhum critério visual. Isso deixava a hierarquia da página confusa e dificultava saber onde olhar primeiro. Por isso, reduzi os elementos visuais ao essencial e reorganizei a estrutura pra criar uma hierarquia mais clara entre título, ação principal e conteúdo de apoio.
2
Salário visível nos cards
Em pesquisas de UX, o salário aparece como um dos fatores mais decisivos na hora de triar vagas. Colocando a faixa direto no card, o candidato já sabe se vale a pena clicar, o que evita cliques desnecessários e atrai gente mais alinhada com a oferta.
3
Card em destaque para carreiras populares
Peguei emprestado o padrão de "escolha do editor" que streaming e e-commerce usam bastante: destacar a categoria mais acessada (Comercial e Vendas) sinaliza relevância pro usuário e ajuda a orientar a navegação.
Diretrizes
2
Personalização
Clareza visual
Revelação gradual
Acessível por padrão
Personalização
Clareza
Clareza
Todo elemento na tela precisa justificar sua presença, ou vira ruído visual.
Personalização
A interface reconhece o usuário e mostra o que é relevante pro seu momento.
Progressão
Busca de emprego primeiro, recomendações depois.
Visual
O ponto de contato transmite autoridade e acolhimento.
Acessibilidade
WCAG AA como padrão do sistema de tokens, não exceção.
Diagnóstico
1
O contraste de textos, placeholders e CTAs secundários está abaixo do recomendado pela WCAG AA.
5
Acessibilidade
Cards, CTAs, logos e texto têm o mesmo peso visual, o que dificulta achar a ação principal da plataforma: buscar vagas.
1
Ruído Visual e Hierarquia
O visual lembra sites dos anos 2000, com espaçamentos inconsistentes e imagens perdidas, o que não passa a confiança esperada de um líder de mercado.
2
Estética defasada
A homepage trata todo mundo da mesma forma, sem recomendações baseadas no perfil ou na área de atuação do usuário.
3
Baixa personalização
Informações importantes, como comparação de salários e avaliações de empresas, ficam escondidas numa navegação longa e complicada.
4
Arquitetura da informação pouco eficiente
hover para pausar o scroll
mockup do redesign
Antes de propor mudanças, analisei o Infojobs lado a lado com outras plataformas de busca de emprego pra identificar onde a experiência atual fica pra trás
Comparações de principais mudanças
4
"Números, valores e nomes de empresas exibidos no mockup são ilustrativos."
Conduzir entre 5 e 8 sessões moderadas de usabilidade com usuários ativos do InfoJobs, utilizando a interface original. O objetivo é validar, na prática, os principais pontos de fricção identificados na análise heurística e entender como eles impactam a navegação real.
Desenvolver um protótipo clicável no Figma cobrindo o fluxo da homepage e da busca de vagas redesenhada. Em seguida, realizar testes não moderados com ferramentas como Maze ou Lyssna, com uma amostra de aproximadamente 50 candidatos, para avaliar clareza, eficiência e entendimento da nova estrutura.
Projetar os principais breakpoints responsivos com foco em dispositivos móveis. Considerando que mais de 60% do tráfego de plataformas de emprego no Brasil vem do mobile, a experiência da homepage precisa funcionar de forma fluida e consistente a partir de 375px, sem perda de hierarquia ou legibilidade.
Expandir o sistema de design além da homepage, cobrindo também as páginas de Resultados de Busca, Detalhe da Vaga e o fluxo de candidatura. Essas são as etapas de maior tráfego após a entrada, e precisam manter consistência visual e comportamental em toda a jornada.
Estruturar uma biblioteca de componentes no Figma com auto layout, variantes e design tokens bem definidos. Toda a lógica do sistema deve ser documentada de forma clara para facilitar o handoff com engenharia e garantir consistência na implementação.
Pesquisa com usuários
Teste de protótipo
Abordagem mobile-first
Cobertura do fluxo completo
Documentação e handoff
Overview
Este case study apresenta um redesign conceitual, desenvolvido por iniciativa própria, com foco na homepage e na experiência principal de navegação do InfoJobs. O objetivo foi demonstrar como decisões estratégicas de UX, alinhadas a uma abordagem mais moderna de UI, podem melhorar significativamente a clareza, a hierarquia visual, a usabilidade e a percepção de confiança do produto ainda assim mantendo a familiaridade das funcionalidades que os usuários já conhecem.
Bookmark sempre disponível ao hover/tap - A ação para salvar vagas está disponível ao passar o mouse/toque, em vez de via um menu secundário.
Sálario ficar aparente em condições - 'Saiba o salário' ocupa espaço com CTA, mantendo a densidade e a fluidez dos cards em vez de gerar espaços vazios na interface.
Uso de Chips em vez de Texto solto - A modalidade de trabalho, o tipo de contrato e a senioridade são exibidos como chips visuais, para que possam ser lidos em menos de um segundo.
Card de emprego
Marquee de logos via CSS - Animação sem JavaScript, com pausa em reduced motion, reforçando marcas sem depender de um grid estático.
Números em 48px com label abaixo - A hierarquia leva o olhar primeiro para a métrica; o texto de apoio entra apenas depois, como contexto.
Marinho profundo em vez de azul da marca: - Cria uma quebra visual clara no fluxo da página, sinalizando a transição de navegação para conteúdo de construção de credibilidade.
Stats banner
Cartão em destaque tem um fundo que usa a cor da categoria - cria ritmo visual na navegação, permitindo que o usuário crie memória espacial das suas áreas ao longo do uso.
Cartão padrão como CTA - o cartão padrão não tem botão, a área maior é clicável (o cartão inteiro), reduzindo a complexidade da interface e evitando elementos redundantes.
Cards compartilham um único tamanho - os cards em destaque / padrão são diferentes em tamanho e imagem, mas ambos usam raio de 8px e a mesma lógica de cores mantendo consistência no sistema.
Área de vagas profissionais
3 bolhas com “Ver mais” - mantém o ritmo visual das listas sem esconder o conteúdo atrás de um clique desnecessário, aparecendo apenas quando há overflow real.
Anônimo por padrão - reduz a barreira para deixar avaliações, aumentando o volume de reviews.
Avaliações de empresas
Comparações e decisões principais
Hero & Barra de buscas
Saudação Personalizada: Saudação com o nome do usuário e sua pesquisa contextual no redesign (”Dependendo de estar procurando um emprego em Design de Produto?”) são capazes de proporcionar relevância imediata e um alto nível de personalização.
Barra de buscas prominente: O elemento de busca nesta versão é extremamente dominante, ocupando o centro da atenção sobre um fundo azul-marinho escuro de alto contraste e acompanhado por um único botão de CTA laranja em destaque.
Job Recommendation Cards
Greeting personalizado: O novo visual mostra faixas salariais diretamente nos cards de vagas (R$ 12.000–16.000), respondendo à principal pergunta dos candidatos antes mesmo de clicarem. O que torna a tomada de decisão mais rápida e clara.
Banner de estatísticas
Áreas profissionais
Avaliações de empresas
Outras mudanças
Próximos passos
Antes de propor mudanças, analisei o Infojobs lado a lado com outras plataformas de busca de emprego pra identificar onde a experiência atual fica pra trás
Diagnóstico
1
Cards, CTAs, logos e texto têm o mesmo peso visual, o que dificulta achar a ação principal da plataforma: buscar vagas.
1
Ruído Visual e Hierarquia
2
Estética defasada
O visual lembra sites dos anos 2000, com espaçamentos inconsistentes e imagens perdidas, o que não passa a confiança esperada de um líder de mercado.
3
Baixa personalização
A homepage trata todo mundo da mesma forma, sem recomendações baseadas no perfil ou na área de atuação do usuário.
4
Arquitetura da informação
pouco eficiente
A homepage trata todo mundo da mesma forma, sem recomendações baseadas no perfil ou na área de atuação do usuário.
5
Acessibilidade
O contraste de textos, placeholders e CTAs secundários está abaixo do recomendado pela WCAG AA.
Diretrizes
2
Clareza visual
Personalização
Acessível por padrão
Revelação gradual
Personalização
Personalização
Clareza
Clareza
Todo elemento na tela precisa justificar sua presença, ou vira ruído visual.
Personalização
A interface reconhece o usuário e mostra o que é relevante pro seu momento.
Progressão
Busca de emprego primeiro, recomendações depois.
Visual
O ponto de contato transmite autoridade e acolhimento.
Acessibilidade
O ponto de contato transmite autoridade e acolhimento.
A versão original tinha muitas imagens soltas e inconsistentes entre si, sem nenhum critério visual. Isso deixava a hierarquia da página confusa e dificultava saber onde olhar primeiro. Por isso, reduzi os elementos visuais ao essencial e reorganizei a estrutura pra criar uma hierarquia mais clara entre título, ação principal e conteúdo de apoio.
1
Declutter da página
Em pesquisas de UX, o salário aparece como um dos fatores mais decisivos na hora de triar vagas. Colocando a faixa direto no card, o candidato já sabe se vale a pena clicar, o que evita cliques desnecessários e atrai gente mais alinhada com a oferta.
2
Salário visível nos cards
Peguei emprestado o padrão de "escolha do editor" que streaming e e-commerce usam bastante: destacar a categoria mais acessada (Comercial e Vendas) sinaliza relevância pro usuário e ajuda a orientar a navegação.
2
Card em destaque para
carreiras populares
Principais decisões de design
3
Mudança do carrossel: A reformulação converteu a seção de logotipos antigos em métricas poderosas, que comprovam incondicionalmente a escala e as credenciais da plataforma; as empresas são rebaixadas verticalmente em um formato de carrossel, onde você pode ver as marcas, mas sem ocupar espaço da interface principal.
Seção de empresas e estatística: O novo visual mostra faixas salariais diretamente nos cards de vagas (R$ 12.000–16.000), respondendo à principal pergunta dos candidatos antes mesmo de clicarem. O que torna a tomada de decisão mais rápida e clara.
Grid de cards: No design visual original, todas as categorias eram tratadas de forma igual e com o mesmo peso na seção “áreas”; nesta reformulação, eu quis acrescentar um padrão de destaque baseado na significância individual: cada área mais popular (“Comercial e vendas”) recebe um card expandido, que exibe tanto uma ilustração quanto um CTA direto, enquanto as categorias secundárias são formatadas em uma grade compacta na lateral. Isso adiciona mais ritmo visual e facilita o fluxo natural do olhar dos usuários pela sua interface.
Infojobs
InfoJobs é uma das plataformas de busca de emprego mais acessadas do Brasil, conectando milhões de candidatos e mais de 270 mil empresas listadas na plataforma. No entanto, sua escala e relevância no mercado não refletem em sua identidade visual e experiência do usuário na plataforma, se tornando até ultrapassadas, com uma interface poluída, inconsistente e defasada.
O que eu fiz:
UI/UX design • Design system
Ano
2025