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.
Bookmark always accessible on hover/tap - A ação para salvar vagas está disponível ao passar o mouse/toque, em vez de via um menu secundário.
Salary shown conditionally - '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.
Visual da marca placeholder
O site atual do Infojobs tem design visual inconsistente. Todos os elementos possuem o mesmo peso, cards de vagas, CTAS, logos de empresa e passagens de texto, o que dificulta a escaneabilidade da página e a ação principal da plataforma (buscar vagas) perde seu destaque.
Ruído Visual e Hierarquia
A homepage trata todos os visitantes da mesma forma, sem personalização com base no perfil do usuário ou recomendações de vagas relacionadas à sua área de atuação. Essa escolha perde a chance de gerar relevância imediata e oferecer uma experiência personalizada ao usuário em seu primeiro contato.
Estética defasada
The homepage greets every visitor identically. There is no contextual headline, no job-category suggestion based on profile, and no visible social proof tied to the user's field — wasting the opportunity to create immediate relevance.
Baixa personalização
Informações importantes, como comparação de salários, avaliações de empresas realizadas por funcionários e guias de carreira, ficam ocultas em uma navegação extensa e complicada. O usuário é obrigado a passar por um mar de conteúdos, logos e depoimentos cortados pela metade antes de encontrar materiais de seu interesse.
Arquitetura da informação pouco eficiente
Os valores de contraste dos textos, placeholders e CTAs secundários estão abaixo do recomendado pela WCAG AA, o que afeta não apenas a usabilidade, mas também a acessibilidade em uma interface.
Acessibilidade
Diretrizes
Clareza
Personalização
Clareza visual
Revelação gradual
Acessível por padrão
Clareza
Personalização
A presença de todos os elementos na interface precisa ser justificável. Ela se torna ruído visual se não estiver ligada a ajudar na incrição ou busca de trabalho.
A experiência inicial do usuário que retorna a plataforma precisa parecer reconhecível e relevante. O nome, a área e o salário aproximado indicam que esta plataforma conhece o seu tempo e o seu trabalho.
Progressão
Os candidatos estão, em parte, contando com a plataforma para avançar em suas carreiras. Cada ponto de contato deve transmitir autoridade, acolhimento e um design contemporâneo.
Visual
Foco primeiro na busca de emprego, seguida de recomendações de emprego e conteúdo relevante, prova social e casos de uso.
WCAG AA mínimo em todos os textos e elementos interativos. Não como algo secundário incorporado ao sistema de tokens.
Acessibilidade
Há muito tempo, as plataformas de emprego têm fundos claros ou brancos. Então, por que incluir uma seção no herói escuro?
O azul-marinho escuro é o fundo, que oferece um contraste excelente com os cartões brancos exibidos abaixo, criando uma experiência de busca de emprego notavelmente interativa e servindo como âncora de toda essa experiência. Além de não fugir das cores principais usadas pelo Infojobs.
Maior percepção de hierarquia para a ação de busca e uma sensação de marca mais premium.
Hero escuro em plataforma de trabalho
01.
O fluxo original oculta a faixa salarial da lista principal de vagas e só a mostra quando você clica para visualizar páginas individuais de cada anúncio de emprego.
O salário é o principal fator que muitos profissionais relatam em pesquisas de UX em plataformas de recrutamento e também um dos fatores mais importantes na triagem de candidatos. Quando a faixa salarial é exibida no cartão, ela evita cliques desnecessários e atrai candidatos de melhor qualidade para ambos os lados. Ou seja, os candidatos certos para os recrutadores.
O formato mais simples foi pensado para ser lido e analisado rapidamente, e não para oferecer a granularidade das faixas até o ponto de ser comparável às oportunidades ao navegar.
Salário visível para os cards
02.
No design original de cada framework, todos os espaços de trabalho profissionais desse tipo eram apresentados como blocos iguais, sem hierarquia editorial ou indicadores de relevância.
Um padrão comum que já se mostra muito bem-sucedido para produtos de streaming e e-commerce: a noção da escolha do editor. Preencher um card em destaque com a categoria mais acessada (Comercial e Vendas) reforça esse conceito. Essa ideia ajuda a sinalizar relevância, direciona a ação para explorá-la por meio do conteúdo e proporciona uma experiência de navegação muito mais orientada.
Menos confusão editorial sobre como as categorias são apresentadas + mais capacidade de descoberta de conteúdo e áreas relevantes para o usuário
Card em destaque para carreiras populares
03.
Principais decisões de design
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
Comparações e decisões principais
Job Recommendation Cards
Personalised Greeting: 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 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.
Á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.
Infojobs
InfoJobs é uma das plataformas de busca de emprego mais acessadas do Brasil, conectando milhões de candidatos a mais de 279 mil empresas. 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
< Voltar