Del Valle Kapo · Redesign de Site

Resumo: para o terceiro trimestre de 2022 a Kapo, marca líder de sucos infantis da Coca-Cola, buscava seguir em seu esforço de construção de posicionamento focado em ser a companha perfeita para as pausas das crianças com seus pais e avós a partir do conceito “Toda Brincadeira gera Frutos” e buscou a CWI, por meio do seu núcleo de desenvolvimento responsável por Coca-Cola, para a reformulação do principal site da marca, além de um site especial para a campanha “Sempre Criança Challenge”, responsável por estimular o registro de brincadeiras lúdicas por meio de premiações especiais.

CONTEXTO

O Del Valle Kapo é um produto voltado para crianças e famílias, com um posicionamento de marca que vai além do suco: a campanha “Sempre Criança” posicionava a marca como promotora de brincadeiras e da infância. O site kapo.com.br precisava ser redesenhado para a nova campanha de Dia das Crianças 2022 — mas o escopo ia além de atualizar cores e imagens. Era necessário decidir quais páginas o site deveria ter após o redesign, em alinhamento com a nova campanha e a promoção que estava por vir.

Como parte da CWI, acabei participando do projeto como UX, UI e Visual Designer responsável pelo projeto completo — único designer dentro de um time de desenvolvedores — utilizando materiais base das campanhas “Sempre Criança 2.0” e “Sempre Criança Challenge” para orientar decisões de arquitetura de informação, referenciando as nuances da nova identidade visual da campanha, criando ilustrações e elementos gráficos, e desenvolvendo todas as interfaces (web e mobile) em Figma, Photoshop e Illustrator ao longo de 3 meses.

A campanha “Sempre Criança 2.0”, apesar de vir com assets, paleta e tom de voz pré-definidos — tinha liberdade criativa para uma tradução digital para além da criação da identidade, pois o site precisava servir tanto crianças que navegavam em busca de brincadeiras quanto pais e avós que compravam o produto e participavam de promoções, o que exigia que a hierarquia de conteúdo servisse às duas jornadas ao mesmo tempo.

Antes e Depois: comparação entre o cenário do site pré e pós redesign.

O segundo site do projeto era o microsite da campanha “Sempre Criança Challenge”: mecânica de 3 passos (gravar um vídeo brincando em família, postar no Instagram com a hashtag, concorrer a R$ 500 por semana), com prêmios, regulamento e lista de ganhadores por semana.

O mesmo antes/depois se aplica a esse segundo site:

Descoberta & Insight

O comportamento das personas revelou algo que a campanha original não previa: a seção “Hora de Brincar” — o repositório de brincadeiras do site — não era conteúdo de apoio, era o que as famílias realmente vinham buscar. Fernanda decidia em segundos, Theo reconhecia cor e forma antes de saber ler, Sônia queria participar sem se perder no caminho — nenhuma das três chegava ao site pensando primeiro em comprar suco.

A virada: o Kapo já tinha construído, sem perceber, um produto digital real dentro do site institucional. O redesign precisava reconhecer isso e elevar a “Hora de Brincar” à sua posição real de destaque.

As três personas resumiam esse comportamento — cada uma puxava uma decisão diferente do redesign.

Processo & Decisões

A decisão que mais me custou foi o seletor de produto estilo videogame. A metáfora fazia sentido para as crianças — mas quem navega no site de produto é o pai, a mãe. Fiquei me perguntando se a referência de videogame ia parecer brilhante ou estranha para um adulto de 35 anos que quer ver os sabores disponíveis.

1. Arquitetura de informação orientada pelo uso real — problema: o site anterior tinha múltiplas páginas, e a decisão de o que manter ou descartar no redesign era subjetiva. Opções: manter tudo por segurança (sem custo de decisão, site mais complexo) vs. cortar com base em como as pessoas realmente usavam o site. Escolha: priorizei as seções com maior engajamento observado, eliminando as sem relevância real e elevando “Hora de Brincar” na hierarquia de navegação. A estrutura resultante foi: Home → Promoção (Sempre Criança Challenge) → Sempre Criança (Vídeo) → Hora de Brincar (repositório de atividades, com as 5 categorias temáticas) → Nossos Produtos → Compre Agora. Porquê: arquitetura de informação baseada em comportamento real é mais honesta — e mais eficiente — do que intuição sobre o que “deve” estar no site.

2. Hora de Brincar como sistema de conteúdo estruturado — problema: o repositório de brincadeiras tinha dezenas de atividades de tipos muito diferentes. Sem organização, era uma lista indiferenciada. Opções: listagem simples com busca textual vs. sistema de categorias por perfil de brincadeira com filtros por idade e número de participantes. Escolha: 5 categorias temáticas com identidade visual própria (Imaginação Divertida, Saindo do Sofá, Aprender Brincando, Ritmo de Brincadeira, Hora do Jogo), cada uma com filtros de Idade (a partir de 3, 4, 5, 6, 7, 8 anos) e Participantes (duplas até 4 ou mais). Porquê: uma brincadeira para 2 pessoas de 4 anos era completamente diferente de uma para grupos de 8 anos — sem filtros, a biblioteca ficava inutilizável para quem tinha uma necessidade específica.

Pra situar essa escolha, montei depois um benchmark ilustrativo (não uma pesquisa de mercado formal) comparando o Kapo a sites similares — a estrutura por categorias e o seletor de produto personalizado apareciam como diferenciais reais frente ao que a concorrência fazia parcialmente ou não fazia.

Na prática, cada categoria virou uma tela própria — cor, ilustração e navegação lateral entre as 5 categorias, sempre com os mesmos filtros de idade e participantes:

3. Página de brincadeira no formato de ficha — problema: cada atividade tinha materiais necessários e instruções de como fazer — o mesmo problema de qualquer receita. Uma página de texto corrido não serviria para consulta rápida no meio da brincadeira. Opções: texto corrido vs. ficha estruturada com metadados no topo (participantes, faixa etária, duração) + seções fixas (Material necessário / Como brincar). Escolha: ficha de atividade com os metadados no topo em destaque, seções tipografadas com cores da categoria, ícones de Compartilhar / Imprimir / Download no topo e produto Kapo contextualizado ao final. Porquê: a mãe ou o pai que abria a página ia querer ver rapidamente se aquela atividade funcionava para os filhos dela (participantes, idade) antes de ler qualquer instrução — os metadados no topo respondiam isso em segundos.

4. Dois seletores, uma mesma linguagem de seleção de personagem — a versão inicial do seletor de produto era uma grade simples: 5 sabores em círculos, todos visíveis. Funcionava. Mas era genérica demais para um produto que se posiciona como “mais plataforma de brincadeiras do que site de produto”.

Converti para um carrossel centrado no estilo de seleção de personagem de videogame — sabor ativo no centro, colorido e maior; os outros dessaturados e menores nos lados, com setas de navegação. A dessaturação comunicava “disponível mas não selecionado” sem precisar de texto. E a metáfora de videogame era completamente familiar para o público infantil. O adulto que navegava também entendia — era o mesmo padrão de um seletor de avatar.

O mesmo padrão reaparece no microsite da campanha, na seção “Inspirações Incríveis” — só que ali escolher um sabor sugere uma brincadeira em família pra fazer com aquele produto, em vez de levar direto pra compra. Reaproveitei a mesma interação pra um objetivo diferente: de escolher um produto para escolher uma atividade.

Solução & Craft

Site redesenhado com 6 seções principais e uma plataforma de brincadeiras estruturada:

• Home: hero com campanha “Com Kapo, toda brincadeira gera frutos” + transições em forma de recorte de papel para as seções seguintes.

• Promoção (Sempre Criança Challenge): hub de entrada da promoção, com prêmios semanais e regulamento, conectando ao microsite dedicado da campanha.

• Sempre Criança (Vídeo): seção de campanha com vídeo YouTube incorporado, quiz de “perfil criança” e CTA de engajamento.

• Hora de Brincar: repositório de 60 brincadeiras mapeadas em 5 categorias temáticas, cada uma com cor e identidade própria, com filtros de idade e participantes e fichas de atividade no formato de receita.

• Nossos Produtos: seletor de sabor no estilo videogame com link para e-commerces parceiros.

• Versão mobile completa para todas as páginas.

• A transição entre seções usava bordas onduladas em forma de papel recortado — uma borda que simulava o rasgar de papel evocava diretamente a brincadeira de recorte, tornando a metáfora visual coerente do início ao fim da página.

• Os títulos de seção usavam tratamento pintado à mão com splash de tinta como fundo de texto, coerente com a linguagem manuscrita da identidade Kapo.

• Cada categoria da Hora de Brincar tinha cor de background, ícone ilustrado e tratamento tipográfico próprios — criando um sistema de identidade por categoria sem precisar de um menu global.

• No seletor de produto, o sabor ativo era colorido e centralizado; os demais ficavam em escala de cinza nos círculos laterais — a dessaturação comunicava “disponível mas não selecionado” sem texto.
• O ícone de tesoura decorativo na hero ancorava a metáfora de recorte de papel desde o primeiro segundo de navegação.

Aprendizados

Entrei nesse projeto com a identidade já fechada — paleta, mascotes, tom de voz e até o conceito “Toda Brincadeira gera Frutos” vinham prontos da campanha antes de eu desenhar a primeira tela. Isso muda o tipo de decisão que cabe ao designer: não é criar uma identidade, é traduzir uma identidade pensada pra embalagem e pra vídeo pra dentro da gramática de um site, sem que vire uma colagem de assets soltos.

O recorte de papel foi a saída que encontrei: em vez de inventar uma metáfora nova pra transição entre seções, peguei um elemento que já existia na campanha — a ideia de recortar, de fazer à mão — e transformei em sistema (a borda ondulada, repetida do topo ao rodapé). Não sei dizer se algum usuário reparou conscientemente nisso. Mas foi como mantive a identidade da marca presente na rolagem inteira da página, não só na primeira tela.

Sendo o único designer dentro de um time de desenvolvedores, boa parte do trabalho não era desenhar telas isoladas — era deixar a especificação (cor por categoria, comportamento do carrossel de sabores, estados do filtro) clara o suficiente pra ser implementada sem eu estar do lado do dev o tempo todo.

O que fico: traduzir marca em produto digital é um exercício diferente de criar uma identidade do zero. O julgamento está em saber o que manter literal — a paleta, o mascote, a voz — e o que precisa ganhar uma camada de interação pra funcionar como site, e não como um anúncio mais longo.