Acordo Certo
Skills
Email Design;
User-Centered Design;
HTML/CSS;
Data Analysis;
Figma;
Salesforce Marketing Cloud;
Overview
O projeto Email Marketing 2022 da Acordo Certo consistiu na reformulação estratégica das comunicações de CRM, com o objetivo de alinhar a identidade visual às necessidades de um público brasileiro em cenário de alto endividamento. Através da aplicação de ciência cognitiva, como os princípios de Gestalt e a lógica de Progressive Disclosure, a arquitetura da informação foi otimizada para reduzir a carga cognitiva e priorizar o viés neutro e digno da inadimplência tornando o processo de recuperação de crédito leve e resoluto, atributos destacados no topo da hierarquia visual. Essa visão criativa foi sustentada por uma engenharia técnica rigorosa no Salesforce Marketing Cloud, onde o uso de HTML customizado junto ao produto do Content Builder garantiu uma renderização pixel-perfect e acessível em dispositivos móveis e clientes críticos como Outlook.
O resultado dessa intersecção entre design centrado no usuário e precisão técnica foi um impacto direto de 45% de aumento na receita do canal, validado por um crescimento de 52% no CTR e 44% no CTOR que trouxe o CRM em um altissimo patamar, sendo responsável por até 70% do faturamento da empresa naquele ano.
Objetivos do negócio
O projeto central da Acordo Certo foi fundamentado em uma visão estratégica de conversão direta de usuários inadimplentes: transformar a renegociação de dívidas em um processo de resgate da saúde financeira. Em um ecossistema de CRM saturado de comunicações invasivas e desrespeitosas, o objetivo central do design foi atuar como o facilitador da jornada do usuário. A diretriz foi implementar uma interface que mitigasse a fricção psicológica da inadimplência, utilizando o design como ferramenta de leveza, clareza e autoridade para impulsionar os KPIs de conversão e reter o usuário no funil de negociação através de uma estética de confiança.
Entendimento do Público
Em 2022, o cenário brasileiro era de endividamento recorde (quase 80% das famílias). O público buscava mais do que descontos; precisava de empatia, leveza, clareza e um caminho viável para a saúde financeira. A comunicação precisava ser de suporte, não punitiva.
A arquitetura de UI/UX foi desenhada para um perfil de usuário que opera sob estresse cognitivo e financeiro. O design centrado no usuário focou em simplificar a tomada de decisão através da seguinte lógica:
Mitigação de Ansiedade: Aplicação de uma paleta de cores institucional que evoca segurança e transparência, evitando tons alarmistas que provocam evasão.
Clareza de Ação (CTA): Identificação imediata do benefício central e do próximo passo lógico, otimizando o above-the-fold para garantir que a proposta de valor seja captada instantaneamente.
Redução de Ruído: Informações financeiras complexas foram mantidas na jornada do produto na plataforma, respeitando a carga cognitiva do usuário.
Affordance Intuitivo: Elementos interativos com sinalizações visuais claras sobre sua função, reduzindo a incerteza no momento do clique.
Arquitetura da Mensagem
A arquitetura da informação foi estruturada utilizando princípios de Gestalt, especificamente as leis de Proximidade e Continuidade, para agrupar informações correlatas e guiar o olhar de forma intuitiva. Aplicamos o F-pattern de escaneabilidade, distribuindo o peso visual para equilibrar o layout através de uma hierarquia rigorosa que minimiza a carga cognitiva e combate o banner blindness. Complementamos essa estratégia com a lógica de Progressive Disclosure (Divulgação Progressiva), onde a proposta de valor (a facilidade de limpar o nome) era priorizada no topo da hierarquia, enquanto detalhes técnicos eram apresentados estrategicamente ao longo da jornada. Essa abordagem garantiu que o estímulo principal (simplicidade de solucionar a dor) fosse consumido imediatamente, evitando o abandono por sobrecarga de informações e otimizando a transição imediata entre o interesse e a ação.
A execução da identidade visual seguiu um rigor técnico absoluto para assegurar o reconhecimento imediato da marca. Foi priorizado a consistência cromática e a limpeza dos elementos gráficos. O uso de assets leves foi mandatório para não sobrecarregar os render engines de provedores restritivos, mantendo o equilíbrio entre uma estética refinada e a eficiência técnica necessária para uma entrega de alto volume.
Escolhas de Produção e Entrega
A Utilização de um ecossistema focado em Figma e Salesforce Marketing Cloud, somado a um domínio profundo de HTML/CSS permitiu a criação de peças leves e altamente entregáveis, mantendo a integridade visual em qualquer provedor.
No Figma, trabalhamos em uma criação de um design system modular e escalável que olhasse para as particularidades deste canal. Cada componente (desde botões a cards e vitrines) foi prototipado considerando contexto de entregabilidade e responsividade, garantindo que a integridade da UI permanecesse intacta independentemente do dispositivo, sistema operacional e alta rede de dados para baixar as informações.
Para garantir uma entrega pixel-perfect, utilizei o Salesforce Marketing Cloud, aproveitando a sinergia entre os recursos do Content Builder e uma codificação personalizada de alta precisão. Desenvolvi templates híbridos que combinam a agilidade da interface drag-and-drop com estruturas codificada a mão de tabelas aninhadas (border-collapse: collapse) para eliminar os 'espaçamentos fantasmas' típicos do Outlook (MSO).
Atuando na Realidade de Renderização, todo CSS foi inline cirúrgico para mitigar limitações de motores como WebKit (iOS) e Gmail. Além disso, implementei Conditional Comments específicos para Outlook, assegurando que fontes, larguras fixas e line-heights permanecessem consistentes, garantindo que o layout break ocorresse exatamente como planejado no design original
O design "pixel perfect" em e-mail marketing exige saber quando usar imagens ricas e quando usar texto real para garantir que a mensagem apareça mesmo com imagens bloqueadas.
O Design Invisível
O email deve sobreviver à caixa de entrada principal. Para um designer, isso é um desafio técnico imenso:
Dark Mode: O design foi submetido a testes rigorosos de renderização cruzada para garantir performance em múltiplos ambientes.
Mobile-First: A estrutura dos grids e o tamanho dos botões foram pensados para o polegar, com áreas de toque (tap targets) de no mínimo 44x44px para garantir ergonomia.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sodales laoreet odio id lobortis. Lorem ipsum dolor sit. Phasellus suscipit accumsan leo vitae tempus. Nulla luctus lorem quis sem pretium hendrerit. Duis ac hendrerit risus, fringilla fringilla sapien. Phasellus mollis sit amet purus.
CTA
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum
Aenean nec ipsum tortor. Fusce pretium sem enim, in placerat tellus
Proin felis augue, commodo eget feugiat eget, aliquet ut diam.
Acessibilidade
Implementamos padrões de inclusão para garantir que a mensagem fosse acessível a todos:
Inclusão de Alt-text descritivo em todos os elementos visuais que carregam carga informativa.
Organização semântica de headings (utilizando estilos para simular
<h1>a<h3>), permitindo a navegação lógica por leitores de tela.Contraste de cores seguindo as diretrizes WCAG, assegurando legibilidade para todos.
OR
Análises finais
A união entre uma hierarquia visual sofisticada e uma execução técnica impecável em HTML/CSS é o diferencial para atingir resultados de negócio superiores.
As escolhas de UI/UX não apenas melhoraram a estética, mas serviram como catalisadores diretos para o aumento dos CTRs e outros indicadores de performance.
Após todo trabalho multidisciplinar atribuídos para esse projeto e fazendo um de-para nos big numbers ano-a-ano, CRM se tornou o principal canal de faturamento da empresa, chegando a 70% do faturamento total.
É o design como uma ferramenta estratégica indispensável no ecossistema de retenção
e conversão.
E o que vem depois?
Voltar para os Trabalhos selecionados
Diretor de arte. Especialista em design
