01 · contexto01 · context
Abrir a bolsa não é revista, é crimeBeing forced to open your bag is a crime
Pessoas negras são constantemente coagidas a abrir a bolsa em lojas e comércios, acusadas de roubo sem nenhum motivo. Isso não é constrangimento: é crime racial, previsto na Lei 14.532, que equipara a injúria racial ao crime de racismo.
Black people are constantly pressured to open their bags in shops and stores, accused of theft for no reason. This isn't just embarrassment: it's a racial crime under Brazilian Law 14.532, which classifies racial insult as the crime of racism.
A campanha do Racismo Zero usou a moda para levar essa denúncia para a rua. Três designers brasileiros criaram suas versões da bolsa, e cada uma vinha com uma etiqueta com o texto da lei costurada por dentro. Quem fosse obrigado a abrir a bolsa mostraria, ali mesmo, que aquilo é crime.
The Racismo Zero campaign used fashion to take this message to the streets. Three Brazilian designers created their own versions of the bag, each with a label sewn inside carrying the text of the law. Anyone forced to open their bag would show, right there, that it's a crime.
Cada modelo era vendido no e-commerce do próprio designer, e parte do valor ia para o treinamento de mais agentes antirracistas.
Each model was sold on the designer's own e-commerce store, and part of the price funded the training of more antiracist agents.
02 · desafio02 · challenge
Um PSD estático e duas semanasA static PSD and two weeks
Desafio: criar uma landing page que funcionasse como hub de conteúdo da campanha: responsiva, acessível e no ar em duas semanas.
Challenge: build a landing page that worked as the campaign's content hub: responsive, accessible and live in two weeks.
A campanha tinha três frentes (bolsas à venda em lojas diferentes, uma tag para imprimir e um canal de denúncia) e precisava de um lugar que juntasse tudo. Recebi da agência só o PSD do site, pensado como peça estática. Não havia versão responsiva, nem componentes prontos, nem exportação automática: cada imagem e cada texto precisou ser extraído e adaptado na mão.
The campaign had three fronts (bags sold in different stores, a printable tag and a reporting channel) and needed one place to bring them together. All I got from the agency was a PSD of the site, designed as a static piece. There was no responsive version, no ready-made components and no automatic export: every image and every piece of copy had to be extracted and adapted by hand.
E como a mensagem era sobre inclusão, o site não podia deixar ninguém de fora.
And since the message was about inclusion, the site couldn't leave anyone out.
03 · processo03 · process
Do layout fechado ao site no arFrom a fixed layout to a live site
Com o prazo curto, defini primeiro o que o site precisava fazer e só depois parti para as telas. As principais decisões foram:
With a tight deadline, I first defined what the site needed to do and only then moved on to screens. The main decisions were:
- hubO site tinha quatro tarefas: levar à compra da bolsa, distribuir a tag, informar com dados e direcionar para a denúncia. Organizei as seções nessa ordem de prioridade, com um menu que leva direto a cada uma.The site had four jobs: lead to buying the bag, hand out the tag, inform with data and point to the reporting channel. I ordered the sections by that priority, with a menu that jumps straight to each one.
- responsivoresponsiveExtraí imagens e textos do PSD e redesenhei formatos e quebras de layout para funcionar do celular ao desktop, mantendo a identidade da campanha.I extracted images and copy from the PSD and redesigned formats and layout breaks to work from mobile to desktop, keeping the campaign's identity.
- acessibilidadeaccessibilityEscrevi textos alternativos descritivos para todas as imagens, inclusive ícones e divisores, para que leitores de tela transmitissem a mensagem completa. Se a ideia era ser vista por todos, o site também tinha que ser.I wrote descriptive alt text for every image, including icons and dividers, so screen readers would carry the full message. If the idea was to be seen by everyone, the site had to be too.
Também montei o site no Wix seção por seção, sem nenhuma importação automática do layout, e cuidei da compra do domínio e de toda a configuração para conectá-lo ao site.
I also built the site in Wix section by section, with no automatic layout import, and handled buying the domain and setting it up to point to the site.
04 · solução04 · solution
Uma página, uma tarefa por seçãoOne page, one job per section
Um site de página única que funciona como central da campanha, com cada seção resolvendo uma tarefa:
A single-page site that works as the campaign's hub, with each section doing one job:
- Conheça os modelos: apresenta as bolsas dos designers e leva para a compra em cada e-commerce.
- Transforme qualquer bolsa: explica como qualquer pessoa pode tornar a própria bolsa antirracista.
- Faça sua tag: disponibiliza o PDF da tag com a lei para imprimir.
- O programa: mostra os dados que sustentam a causa e os três pilares do Racismo Zero.
- Denuncie e busque acolhimento: leva direto para o canal de denúncia no WhatsApp.
- Para marcas: convida empresas a aderirem ao programa.
- Filme de lançamento: reúne o vídeo da campanha.
- Meet the models: presents the designers' bags and links to each e-commerce store.
- Turn any bag antiracist: explains how anyone can make their own bag antiracist.
- Make your tag: offers the printable PDF tag with the law.
- The program: shows the data behind the cause and the three pillars of Racismo Zero.
- Report and get support: leads straight to the WhatsApp reporting channel.
- For brands: invites companies to join the program.
- Launch film: features the campaign video.
05 · resultados05 · results
Um Leão em Cannes e um site em usoA Lion at Cannes and a site in use
A campanha ganhou um Leão de Prata em Cannes Lions, no primeiro ano da categoria Luxury & Lifestyle, e foi o único trabalho brasileiro classificado nela. Também repercutiu em veículos do mercado, como Meio & Mensagem, Propmark e ABC da Comunicação.
The campaign won a Silver Lion at Cannes Lions, in the first year of the Luxury & Lifestyle category, and was the only Brazilian work shortlisted in it. It was also covered by Brazilian industry outlets such as Meio & Mensagem, Propmark and ABC da Comunicação.
No site, os números do painel do Wix em 23/04/2024 mostravam 553 visitantes únicos nos últimos 30 dias, uma alta de 6.044% sobre os 30 dias anteriores, e 635 sessões. Só naquele dia foram 302 visitantes, contra 55 no dia anterior.
On the site, the Wix dashboard on April 23, 2024 showed 553 unique visitors in the previous 30 days, up 6,044% over the 30 days before, and 635 sessions. That day alone brought 302 visitors, compared with 55 the day before.
No momento do registro, todos os visitantes online navegavam pelo celular, o que confirma a importância de ter adaptado o layout para mobile.
At the time of that snapshot, every visitor online was browsing on a phone, which confirms how much adapting the layout for mobile mattered.
06 · aprendizado06 · takeaway
Acessibilidade também é mensagemAccessibility is part of the message
Acessibilidade não é etapa final: quando a causa é inclusão, ela é parte da mensagem. E prazo curto pede priorização clara, então definir as tarefas do site antes de montar qualquer tela foi o que fez as duas semanas renderem.
Accessibility isn't a final step: when the cause is inclusion, it's part of the message. And a tight deadline calls for clear priorities, so defining the site's jobs before building any screen is what made the two weeks count.
Se fosse hoje, eu faria diferente na tecnologia: com IA, desenvolveria o site em código, com GitHub, Claude e Vercel no lugar do Wix. O resultado seria um site mais otimizado e robusto, com mais controle sobre performance e acessibilidade.
If I did it today, I'd change the technology: with AI, I'd build the site in code, using GitHub, Claude and Vercel instead of Wix. The result would be a faster, sturdier site, with more control over performance and accessibility.