PROJETO REAL · DESIGN SYSTEM, MOTION E CÓDIGO · 15 DIAS, SOLO
Um patrocinador compra atenção. O portal compartilhado entrega ela de graça.
O Canaltech vendeu uma ativação de Copa para a Netshoes, e o formato disponível era o template do portal — com anúncios, recomendações e marcas concorrentes dividindo a tela. Troquei por uma superfície dedicada. Fiz a marca da campanha, o key visual, as peças, o design system, o motion e o front-end. Virou o formato padrão da casa.
Sobre os números.
Campanha entregue e publicada. O que está medido aqui é o produto — contraste, tokens, escopo, prazo. Não tenho dado de conversão da Netshoes, e a seção 06 diz isso explicitamente em vez de estimar.
CLIENTE
Canaltech × Netshoes
ativação patrocinada
PAPEL
Design system
e design engineer
ENTREGAS
Brandbook · UI · design system
motion · front-end
FEITO COM
Claude Code ⇄ Figma via MCP
After Effects · Higgsfield
PERÍODO
2026 · 15 dias
solo
01 · O PROBLEMA
A página existia. A exclusividade, não.
O CT Ofertas roda num template de portal: anúncio de rede, recomendação, concorrente ao lado. Bom para descoberta, ruim para vender exclusividade.
18
touchpoints entre social, vídeo e web
15
dias entre o briefing e o handoff
1
designer, sem time de front-end do outro lado
R$ 0
de mídia paga para levar tráfego até lá
02 · ANTES E DEPOIS
A reformulação não foi estética. Foi estrutural.
O mesmo objetivo — comprar o produto patrocinado — pelos dois caminhos. O que sai não é decoração: são os desvios para o leitor sair da página.
COMO ERA · SEIS PASSOS
Chega pelo link da oferta · encontra o produto numa lista com outros · passa por anúncio de rede e marca concorrente · procura o cupom, que está em outro lugar · sai para o e-commerce e aplica o cupom lá · compra, ou desiste em algum dos desvios.
Os passos 3, 4 e 5 são fuga. Cada um é uma porta para fora da campanha que o patrocinador financiou.
COMO FICOU · TRÊS PASSOS
Chega numa superfície só do patrocinador · vê preço, prazo e cupom já aplicado na mesma tela · compra pelo CTA fixo, sem procurar nada.
Nenhum passo oferece uma saída. O cupom vem pré-aplicado, a navegação é fixa no mobile e a contagem regressiva mantém o prazo à vista.
03 · RESTRIÇÕES
As decisões de tela vieram do contrato, não do gosto.
Três restrições comerciais definiram a superfície antes de existir qualquer pixel. Elas explicam por que a página tem a forma que tem.
Exclusividade é o produto
Se o patrocinador comprou a tela, nada de terceiro entra nela — nem anúncio de rede, nem recomendação, nem marca concorrente. Isso elimina módulos inteiros do template padrão, e é o motivo de a página ser uma coluna só.
O formato precisa servir ao próximo patrocinador
Uma peça sob medida para a Netshoes seria descartável. Tudo que é de marca virou variável, com dois modos, e a estrutura ficou independente de quem ocupa o espaço.
Não há time de front-end na outra ponta
A entrega tinha que sair pronta, não especificada — o que empurrou a decisão de tokenizar o sistema para espelhar o CSS desde o começo.
04 · SISTEMA
Achei um erro de contraste no CTA e corrigi no token, não no botão.
Tipografia e cor definidas como escala, não peça a peça — é o que mantém dezoito touchpoints parecendo a mesma campanha sem eu revisar um por um.
01
O erro. O CTA primário falhava WCAG AA em 3,84:1 — verde sobre branco só passa nesse valor para texto grande.
02
A correção. Subi o token de marca um degrau na rampa, para 4,55:1, e desloquei o hover junto para preservar a relação entre estados.
03
O alcance. Aplicado nos dois modos de marca: o próximo patrocinador herda a correção em vez do bug.
3,84:1
contraste do CTA como estava
4,55:1
depois da correção no token
56px
alvo de toque primário, acima da diretriz de 48
2
modos de marca herdando a correção
Cinco etapas. As duas primeiras não se delegam.
Contrato de mídia e direção de arte são julgamento e ficam comigo — definem a superfície e as restrições que todas as etapas seguintes herdam. Sistema, geração e handoff são vazão, e são a razão de uma ativação inteira sair em quinze dias em vez de seis semanas. O MCP liga o Claude Code e o Figma nas duas direções, então o design system é a única fonte de verdade dos dois lados: nenhum valor é redigitado, e o que chega na outra ponta é uma página funcionando — com contagem regressiva, carrossel, cupom e barra fixa vivos — não um documento a interpretar.
05 · ALCANCE
A página é o destino. Chegar nela era a outra metade do trabalho.
Sem verba de mídia, o que leva alguém até o produto é o reconhecimento. Todo formato saiu dos mesmos tokens e da mesma linguagem de movimento.
A consistência aqui não é capricho de portfólio. É a função.
Quem encontra a campanha nos Reels precisa reconhecê-la instantaneamente na página de oferta, porque não há mídia paga reforçando o caminho. Um cartão amarelo virando wipe de transição é vocabulário de futebol fazendo trabalho de edição — e é o mesmo amarelo do token que está no CSS da página.
06 · NÚMEROS
O que dá para medir, e o que eu não tenho.
Os do produto qualquer pessoa confere abrindo o arquivo ou o inspetor. Os de negócio eu não tenho, e prefiro dizer isso a estimar.
1:1
tokens mapeados para CSS, sem valor redigitado
18
peças entregues em 6 posicionamentos
15
dias do briefing ao handoff, sozinho
0
módulos de terceiro na página
ALCANCE, NÃO RESULTADO
570 mil+ seguidores · 400 mil+ membros · R$ 0 em mídia paga.
São audiências, não conversões — o tamanho dos canais onde a campanha circulou, não quantas pessoas compraram. Não tenho acesso ao lado do e-commerce da Netshoes, então não há taxa de conversão nesta página. O resultado que eu consigo afirmar é interno: depois desta campanha, o formato foi adotado pelo Canaltech como modelo de referência para ativações patrocinadas com qualquer marca parceira. Deixou de ser peça pontual e virou produto.
O que eu não resolvi.
O formato foi aprovado como padrão e está preparado para dois modos de marca, mas rodou com um patrocinador só — a prova de que é reaproveitável só existe quando a segunda marca entrar sem eu mexer no sistema. Entreguei a página sem instrumentar conversão do meu lado, que é exatamente a pergunta que um patrocinador faz. A contagem regressiva é da campanha, não do estoque do parceiro. E a geração das imagens é assistida por IA, isso está escrito aqui e não no produto — quem chega pela campanha não tem como saber. É uma correção de uma linha e devia estar lá.
07 · MAIS
Outros projetos
ThumbDrop
Ferramenta interna que tirou a thumbnail da fila do time de design. Duas versões testadas com seis pessoas cada, IA dentro do editor, e o custo por thumb visível antes de cada clique.
Nega Nagô
O catálogo de uma trancista virou agendamento sem sair do WhatsApp. Pesquisa, design system e front-end — no ar em neganago.com, com a disponibilidade saindo da agenda dela.
Disponível para trabalhar
Desenho, escrevo o código e digo o que não deu certo.
Treze anos de design, cinco deles no Canaltech entre design system, marketing e comercial. Se você tem uma superfície que precisa sair pronta e medida, e não especificada, me chama.
© 2026 Erick Teixeira
oerickteixeira@gmail.com · São Paulo