Proposta de redesign · racional Ver a home redesenhada →

Proposta · maio 2026

Construa algo que os PhDs da Clave teriam orgulho de mostrar a um cliente.

O site atual rotaciona quatro H1s, usa oito cores como primárias, mistura quatro famílias de ícones e tem "Clave GroupFechar" como title da homepage. Acima de tudo, esconde a única coisa que diferencia a Clave de Solides, Gupy e Kenoby: ciência. Esta proposta corrige isso - e a maior parte vem de subtrair, não adicionar.

01 · arquitetura de marca

Uma Clave. Dois mundos de serviço.

O documento de handover sugeria "uma marca, duas linhas de serviço". Eu argumento pelo oposto - sem chegar a "duas marcas separadas".

O problema: "uma marca unificada" obriga toda página de produto a carregar a gravidade da consultoria - PhDs, 30 anos, voz de advisory. Mas o comprador da plataforma HR-Tech (provavelmente um Talent Acquisition Lead ou um gerente de People Ops) quer velocidade, self-serve e screenshots de produto. Mistura as duas e ninguém sai convencido.

A decisão: uma cabeçalho compartilhado ("clave"), mas dois mundos visivelmente distintos abaixo dele. Mesmo header, mesmo footer, mesma voz base - templates de página, exemplos de UI e densidade visual divergem. Compare o hero de /consultoria (retratos, PhDs nomeados, quote de board) com /plataforma (mockup de produto, planos com preço, pill de "em produção · 6mi de aplicações"). Mesma marca. Públicos diferentes. Ambos saem informados.

02 · cor

O logo já é a paleta. Cada cor com um papel.

Eu defendi inicialmente uma marca monocromática: uma cor (teal) + magenta de CTA, contra o sistema de dois eixos do handover. Era a leitura certa quando o logo não estava na mesa.

Quando o logo apareceu - três cores em camada: azul (corpo do C), teal (arco) e roxo (gota) - fica claro que a paleta de três eixos não é arbitrária: ela vem do próprio mark. Insistir no monocromático seria desperdiçar uma palavra de branding que a Clave já gastou.

Decisão revisada: mantém-se a disciplina (sem arco-íris, sem variante de componente por linha), mas cada cor do logo ganha um papel não-sobreposto:

  • Azul #0057F4 - identidade e wayfinding. Link ativo, foco, "você está aqui". Aparece em todas as páginas.
  • Teal #45D2C3 - eixo Consultoria. Acento em páginas de advisory, ring de Mindset, talent map verde.
  • Roxo #6F3BEF - eixo HR-Tech. Acento em páginas da plataforma e como segundo perfil de avatar.
  • Magenta #F43577 - CTA primária, nada mais. Fora do logo de propósito. É o que força o olho a clicar.

Resultado: três cores de marca + um CTA. As linhas de serviço se diferenciam por acento mais composição - não por inundação cromática. O logo deixa de ser ícone decorativo e vira a chave de leitura do sistema inteiro.

03 · voz

Verbo na frente. Segunda pessoa. Resultado na frase.

O site atual escreve em terceira pessoa abstrata, com substantivos empilhados: "Direcionamos nossos esforços para facilitar as tomadas de decisões que envolvem mapeamento de talentos…"

A nova voz é direta, no presente, com resultado claimado: "Identifique quem está pronto para liderar - em 20 minutos, com base científica."

A palavra "soluções inovadoras" não aparece em nenhum lugar desta proposta. Nem "potencializar". Nem "transformação". Em compensação, "Doutores em Psicologia Organizacional" aparece em todas as páginas de produto - é o moat e a gente repete.

04 · hierarquia da home

Mata o carrossel. Sobe a prova social.

A home atual tem 30 instâncias de swiper e quatro H1s rotativos. Ninguém termina de ler. A nova tem uma H1, um CTA primário (magenta), um visual principal.

Cielo, Globo, TIM, Vale, Neoenergia, Constellation, Ligga, LG - esses logos hoje vivem no quinto scroll. Aqui sobem para a segunda dobra da home e aparecem em toda página de produto. Prova social é a primeira coisa que um diretor de gente está procurando antes de ler o que você faz.

05 · fotografia

Os PhDs precisam aparecer.

"Doutores em Psicologia Organizacional" é afirmado em toda página atual da Clave e mostrado em nenhuma. Esta é a maior alavanca de marca disponível, e custa só uma sessão de fotos.

Mantive o tratamento de marca que já funciona: máscaras circulares de retrato sobre gradiente teal/roxo. É distintivo, é a única coisa visual do site atual que vale preservar.

Mudei o conteúdo: fora retratos genéricos de stock, dentro fotos das pessoas reais da Clave, com nome, doutorado e área. Veja a página de Gestão de Talentos: Dra. Márcia Cruz, Dr. Felipe Andrade, Dra. Renata Lobo - nomes nomeados, credenciais à mostra.

Os retratos nesta proposta estão como placeholders intencionais (gradiente listrado + label monoespaçada). Substituíveis 1:1 quando a sessão acontecer - ou geradas via IA enquanto isso, com a consistência de tratamento já desenhada.

06 · mindset digital

O conceito mais "ownable" da Clave merece destaque visual.

O framework de 4 estágios (Desconectado / Antenado / Conectado / Visionário) é a coisa mais original do site atual. Nesta proposta ele virou um bloco visual de feature - fundo escuro, quatro tiers comparáveis em paralelo, barras de progresso - e aparece tanto na home (como conceito) quanto na plataforma (como módulo do produto).

Se ele é mesmo um assessment validado, vira página própria. Se é só framework de marketing, fica como bloco visual recorrente - ainda assim ownable, ainda assim memorável.

07 · escopo desta v1

Dez páginas, três blocos. Marketing, produto, sistema.

A proposta cresceu além das cinco páginas iniciais. Em vez de tentar 18 páginas em fidelidade média, esta v1 vai fundo em 10 que carregam o argumento - e provam que a marca aguenta a travessia entre marketing e produto.

Marketing site

HomeProva de que a nova hierarquia e a paleta enxuta funcionam.
Consultoria · TalentosTemplate de produto consultoria - pessoas, método, FAQ.
PlataformaTemplate de produto HR-Tech - UI mockup, features, planos.
Caso · GloboTemplate de case study - números na cara, narrativa em prosa.
SobreOs 6 PhDs com nome e currículo. A página que vende a credibilidade.

Produto (portal)

LoginSplit-screen com prova social. Mesma marca, contexto de produto.
Dashboard RH9-box, cohort Mindset, tabela de avaliações. A vista do comprador.
Relatório individualO artefato que circula no board e no WhatsApp.
RespondenteO que o avaliado vê. 100k pessoas passam por aqui.
Mindset Digital · quizLead-gen público + amostra de produto. Dois pássaros.

Sistema

Design systemTokens, componentes, regras. O que é aposentado, o que não é.
Esta páginaO argumento pra defender as escolhas no comitê.

Resta replicar: 4 produtos consultoria, 4 produtos plataforma, blog, contato, denúncia, vagas. Tudo reusa os componentes deste sistema - trabalho de produção, não de design.

08 · tech & SEO

Não negociável no lançamento.

O site atual usa Tailwind via CDN (cdn.tailwindcss.com que explicitamente não é pra produção), jQuery 3.5.1, e roda em VPS Locaweb sem CDN. title da home é "Clave GroupFechar" - um label de UI vazado.

Recomendação técnica: Astro com Tailwind compilado, TypeScript strict, MDX para conteúdo, i18n por rota (/, /en/, /es/), deploy em Vercel ou Cloudflare Pages. Meta de Lighthouse 95+ nas quatro categorias.

Não negociável: <title> e meta description por página, /robots.txt, /sitemap.xml, /llms.txt, hreflang pra pt/en/es, Schema.org (Organization, Service, FAQPage), Open Graph + Twitter Card por página.

09 · em aberto

As perguntas que dependem do cliente.

Cinco decisões não dependem de design - dependem de informação que só a Clave tem. Antes do segundo round desta proposta:

Para conversar com o cliente

  1. Qual o split real de receita entre consultoria e plataforma hoje? A resposta determina quanto da home equilibra os dois mundos.
  2. Têm direito de comissionar fotografia nova do time real? É a maior alavanca de marca disponível.
  3. "Mindset Digital" é um assessment validado de verdade, ou conceito de marketing? Tratamento varia.
  4. O CTA da página de produto deve continuar mandando todo mundo para "Fale com um especialista", ou existe um caminho de demo / trial self-serve?
  5. Onde "Acesso ao portal" deve viver? Header secundário ou só footer?

Próximo passo

Pronto para olhar o que isso parece, página por página?

A home é o melhor ponto de entrada. Depois, abra uma página de cada linha de serviço (consultoria e plataforma) e compare o tratamento visual entre elas.