Redesign da régua de e-mails para Cursos Edgar Abreu
Redesign da régua de e-mails para Cursos Edgar Abreu
Redesign da régua de e-mails para Cursos Edgar Abreu
Reformulando um sistema de e-mail de CRM sem prejudicar a equipe responsável por ele
Reformulando um sistema de e-mail de CRM sem prejudicar a equipe responsável por ele
Reformulando um sistema de e-mail de CRM sem prejudicar a equipe responsável por ele
Ano: 2025
Cliente: 4U Edtech
Papel: UX/UI Designer
Designer supervisora: Mariana Pan Becker
UX/UI
Emails
Pesquisa
Resumo
Resumo
Cursos Edgar Abreu, uma marca de educação online, possuía um fluxo extenso de e-mails de CRM — mas que havia sido criado sem uma identidade visual consistente e sem muita atenção à real compreensão do conteúdo pelos usuários. Os e-mails variavam drasticamente de uma campanha para outra, sem uma linguagem de design comum que os unificasse.
Ao ingressar na 4U Edtech, vi neste projeto uma oportunidade tanto de aprimorar os e-mails quanto de compreender o funcionamento da organização responsável por eles. Antes de iniciar qualquer trabalho de design, mapeei todas as equipes envolvidas no processo de e-mail, as contribuições de cada uma e como uma reformulação poderia aumentar a consistência e a usabilidade sem interromper os fluxos de trabalho já estabelecidos.
O resultado combinou uma auditoria heurística completa dos e-mails existentes, wireframes embasados em pesquisas e uma solução prática para a entrega dos novos modelos à equipe de CRM — tudo isso mantendo inalterada a rotina de trabalho da equipe.
Cursos Edgar Abreu, uma marca de educação online, possuía um fluxo extenso de e-mails de CRM — mas que havia sido criado sem uma identidade visual consistente e sem muita atenção à real compreensão do conteúdo pelos usuários. Os e-mails variavam drasticamente de uma campanha para outra, sem uma linguagem de design comum que os unificasse.
Ao ingressar na 4U Edtech, vi neste projeto uma oportunidade tanto de aprimorar os e-mails quanto de compreender o funcionamento da organização responsável por eles. Antes de iniciar qualquer trabalho de design, mapeei todas as equipes envolvidas no processo de e-mail, as contribuições de cada uma e como uma reformulação poderia aumentar a consistência e a usabilidade sem interromper os fluxos de trabalho já estabelecidos.
O resultado combinou uma auditoria heurística completa dos e-mails existentes, wireframes embasados em pesquisas e uma solução prática para a entrega dos novos modelos à equipe de CRM — tudo isso mantendo inalterada a rotina de trabalho da equipe.
Compreendendo as equipes e o processo
Antes de propor qualquer alteração de design, o primeiro passo foi entender quem estava realmente por trás do processo de e-mails de CRM, já que eu havia acabado de entrar na empresa. Precisava identificar todas as equipes envolvidas, as responsabilidades de cada uma e como o trabalho fluía entre elas, desde a criação de conteúdo e o design de banners até a equipe responsável pela montagem e pelo envio dos e-mails propriamente ditos.
Antes de propor qualquer alteração de design, o primeiro passo foi entender quem estava realmente por trás do processo de e-mails de CRM, já que eu havia acabado de entrar na empresa. Precisava identificar todas as equipes envolvidas, as responsabilidades de cada uma e como o trabalho fluía entre elas, desde a criação de conteúdo e o design de banners até a equipe responsável pela montagem e pelo envio dos e-mails propriamente ditos.
Assim que compreendi o cenário e soube com quem falar, elaborei uma Matriz CSD (Certezas, Suposições e Dúvidas) para organizar tudo o que ainda precisava esclarecer sobre o processo e os diferentes tipos de e-mails enviados. Isso serviu de base para uma entrevista com um membro da equipe de CRM, que durou cerca de uma hora e meia e abordou tanto o fluxo de trabalho do dia a dia quanto a gama completa de categorias de e-mail em uso.
Assim que compreendi o cenário e soube com quem falar, elaborei uma Matriz CSD (Certezas, Suposições e Dúvidas) para organizar tudo o que ainda precisava esclarecer sobre o processo e os diferentes tipos de e-mails enviados. Isso serviu de base para uma entrevista com um membro da equipe de CRM, que durou cerca de uma hora e meia e abordou tanto o fluxo de trabalho do dia a dia quanto a gama completa de categorias de e-mail em uso.
Descobertas sobre o processo
Descobertas sobre o processo
Alguns dos problemas mais graves não eram visuais; decorriam da própria forma como os e-mails eram produzidos. Os designers ficavam responsáveis apenas pela imagem do banner, os redatores escreviam textos de corpo simples e sem estrutura, e havia pouca comunicação entre as duas partes. A equipe de CRM, então, copiava e colava tudo diretamente no ActiveCampaign, decidindo por conta própria as cores de fundo e os estilos dos botões, sem seguir diretrizes compartilhadas. O resultado era que não havia dois e-mails com a mesma aparência.
Alguns dos problemas mais graves não eram visuais; decorriam da própria forma como os e-mails eram produzidos. Os designers ficavam responsáveis apenas pela imagem do banner, os redatores escreviam textos de corpo simples e sem estrutura, e havia pouca comunicação entre as duas partes. A equipe de CRM, então, copiava e colava tudo diretamente no ActiveCampaign, decidindo por conta própria as cores de fundo e os estilos dos botões, sem seguir diretrizes compartilhadas. O resultado era que não havia dois e-mails com a mesma aparência.
Após a entrevista, organizei as respostas e elaborei um fluxo visual mapeando todas as possibilidades de e-mail, o que me proporcionou uma visão clara de todo o sistema antes de iniciar qualquer trabalho de avaliação ou reformulação.
Após a entrevista, organizei as respostas e elaborei um fluxo visual mapeando todas as possibilidades de e-mail, o que me proporcionou uma visão clara de todo o sistema antes de iniciar qualquer trabalho de avaliação ou reformulação.
Análise heurística
Análise heurística
Com o fluxo de e-mails mapeado, o passo seguinte foi avaliar o conteúdo em si. Selecionei um exemplo de cada categoria de e-mail e o analisei com base nas heurísticas de usabilidade de Nielsen, classificando cada um como Bom, Precisa de ajustes ou Crítico.
Com o fluxo de e-mails mapeado, o passo seguinte foi avaliar o conteúdo em si. Selecionei um exemplo de cada categoria de e-mail e o analisei com base nas heurísticas de usabilidade de Nielsen, classificando cada um como Bom, Precisa de ajustes ou Crítico.
Descobertas de design
Descobertas de design
Os problemas críticos mais frequentes estavam relacionados à facilidade de leitura dinâmica (scannability), acessibilidade, visibilidade de CTAs e contraste. Os e-mails apresentavam conteúdo denso e de difícil leitura rápida, as chamadas para ação (CTAs) frequentemente se confundiam com o fundo, e o contraste de cores muitas vezes não atendia aos padrões básicos de acessibilidade.
Os problemas críticos mais frequentes estavam relacionados à facilidade de leitura dinâmica (scannability), acessibilidade, visibilidade de CTAs e contraste. Os e-mails apresentavam conteúdo denso e de difícil leitura rápida, as chamadas para ação (CTAs) frequentemente se confundiam com o fundo, e o contraste de cores muitas vezes não atendia aos padrões básicos de acessibilidade.
Exemplo de como a análise era feita
Problemas específicos nos Banners
Problemas específicos nos Banners
Os banners continham uma quantidade excessiva de texto, sem qualquer hierarquia visual, o que dificultava priorizar o que realmente importava. O formato horizontal também se tornava um grande problema em dispositivos móveis, onde a maioria dos e-mails é, de fato lida, pois reduzia a imagem a um tamanho quase ilegível.
Os banners continham uma quantidade excessiva de texto, sem qualquer hierarquia visual, o que dificultava priorizar o que realmente importava. O formato horizontal também se tornava um grande problema em dispositivos móveis, onde a maioria dos e-mails é, de fato lida, pois reduzia a imagem a um tamanho quase ilegível.
Falta de confiança
Os textos dos e-mails eram extensos, desestruturados e cansativos de ler, mas a constatação mais grave veio de fora do design em si: devido à ausência de um padrão visual consistente, alguns clientes não reconheciam os e-mails como legítimos.
A equipe de suporte chegou a receber mensagens perguntando se um e-mail era realmente da empresa ou uma tentativa de golpe, um problema de credibilidade sério o suficiente para tornar a consistência da marca não apenas uma melhoria visual, mas uma prioridade de confiança e segurança no processo de reformulação do design.
Os textos dos e-mails eram extensos, desestruturados e cansativos de ler, mas a constatação mais grave veio de fora do design em si: devido à ausência de um padrão visual consistente, alguns clientes não reconheciam os e-mails como legítimos.
A equipe de suporte chegou a receber mensagens perguntando se um e-mail era realmente da empresa ou uma tentativa de golpe, um problema de credibilidade sério o suficiente para tornar a consistência da marca não apenas uma melhoria visual, mas uma prioridade de confiança e segurança no processo de reformulação do design.
Antes: Resultados da análise heurística nas amostras de e-mail
Antes: Resultados da análise heurística nas amostras de e-mail
Ao analisar os exemplos abaixo, percebe-se que os problemas identificados na auditoria heurística aparecem de forma consistente, independentemente da categoria do e-mail. A questão não era um e-mail específico, mas sim a ausência de um sistema compartilhado, o que levava cada um a lidar com o layout, a hierarquia e o tom de voz de maneira diferente em detrimento tanto da usabilidade quanto da confiança na marca.
Ao analisar os exemplos abaixo, percebe-se que os problemas identificados na auditoria heurística aparecem de forma consistente, independentemente da categoria do e-mail. A questão não era um e-mail específico, mas sim a ausência de um sistema compartilhado, o que levava cada um a lidar com o layout, a hierarquia e o tom de voz de maneira diferente em detrimento tanto da usabilidade quanto da confiança na marca.
Hierarquia visual e escaneabilidade
Hierarquia visual e escaneabilidade
Título, subtítulo, lista com marcadores, preços e CTA empilhados com pouco espaço de respiro.
Título, subtítulo, lista com marcadores, preços e CTA empilhados com pouco espaço de respiro.
E-mails promocionais (CFP, CEA) combinam tabelas de preços, textos que transmitem urgência e múltiplas chamadas para ação (CTAs) disputando a atenção.
E-mails promocionais (CFP, CEA) combinam tabelas de preços, textos que transmitem urgência e múltiplas chamadas para ação (CTAs) disputando a atenção.
Não há um ponto de entrada claro para o olhar na maioria das amostras.
Não há um ponto de entrada claro para o olhar na maioria das amostras.
Identidade visual inconsistente
Identidade visual inconsistente
Esquema de cores diferente em praticamente todos os e-mails (azul-escuro, azul-petróleo, rosa, azul-vivo)
Esquema de cores diferente em praticamente todos os e-mails (azul-escuro, azul-petróleo, rosa, azul-vivo)
Sem lógica de layout ou estilo de banner compartilhados entre os e-mails.
Sem lógica de layout ou estilo de banner compartilhados entre os e-mails.
Não há indicação visual que vincule os e-mails ao mesmo remetente, o que reforça a questão de confiança apontada pela equipe de suporte.
Não há indicação visual que vincule os e-mails ao mesmo remetente, o que reforça a questão de confiança apontada pela equipe de suporte.
Visibilidade e contraste do CTA
Visibilidade e contraste do CTA
Alguns CTAs se destacam claramente (por exemplo, o botão azul-vivo "QUERO MINHA CERTIFICAÇÃO"), enquanto outros se misturam a fundos carregados ou a fundos com tonalidade próxima à do próprio botão.
Alguns CTAs se destacam claramente (por exemplo, o botão azul-vivo "QUERO MINHA CERTIFICAÇÃO"), enquanto outros se misturam a fundos carregados ou a fundos com tonalidade próxima à do próprio botão.
Alguns e-mails incluem duas CTAs de igual destaque, diluindo a ação pretendida.
Alguns e-mails incluem duas CTAs de igual destaque, diluindo a ação pretendida.
Banners com muita informação
Banners com muita informação
Parágrafos densos de texto inseridos diretamente na imagem do banner (IA/evento ao vivo, e-mails de mentoria para a chamada de trabalhos/CFP)
Parágrafos densos de texto inseridos diretamente na imagem do banner (IA/evento ao vivo, e-mails de mentoria para a chamada de trabalhos/CFP)
Múltiplas mensagens competindo simultaneamente, sem priorização.
Múltiplas mensagens competindo simultaneamente, sem priorização.
Especialmente problemático em dispositivos móveis, onde o texto se torna difícil de ler rapidamente.
Especialmente problemático em dispositivos móveis, onde o texto se torna difícil de ler rapidamente.
Texto corrido longo e sem estrutura
Texto corrido longo e sem estrutura
Parágrafos extensos em vez de blocos de leitura rápida
Parágrafos extensos em vez de blocos de leitura rápida
Listas de verificação e tópicos com formatação inconsistente nos e-mails
Listas de verificação e tópicos com formatação inconsistente nos e-mails
Detalhes importantes (prazos, preços, requisitos) inseridos no meio do texto corrido, em vez de estarem visualmente separados.
Detalhes importantes (prazos, preços, requisitos) inseridos no meio do texto corrido, em vez de estarem visualmente separados.
O depois: uma estrutura que a equipe realmente consegue utilizar
O depois: uma estrutura que a equipe realmente consegue utilizar
Com as conclusões da auditoria em mãos, o passo seguinte foi olhar para fora. Analisei e-mails de concorrentes e exemplos do mercado para entender como empresas maiores estruturam suas comunicações, além de realizar um estudo mais amplo sobre as melhores práticas de e-mail marketing, os fatores que evitam que as mensagens caiam na pasta de spam e o que realmente captura a atenção nos segundos seguintes à abertura de um e-mail.
Com as conclusões da auditoria em mãos, o passo seguinte foi olhar para fora. Analisei e-mails de concorrentes e exemplos do mercado para entender como empresas maiores estruturam suas comunicações, além de realizar um estudo mais amplo sobre as melhores práticas de e-mail marketing, os fatores que evitam que as mensagens caiam na pasta de spam e o que realmente captura a atenção nos segundos seguintes à abertura de um e-mail.
Com base nessa pesquisa e nas melhorias identificadas na auditoria, passei a criar os wireframes de cada tipo de e-mail, definindo a estrutura do texto, a composição do banner e o layout geral para todas as categorias.
Com base nessa pesquisa e nas melhorias identificadas na auditoria, passei a criar os wireframes de cada tipo de e-mail, definindo a estrutura do texto, a composição do banner e o layout geral para todas as categorias.
Em seguida, os wireframes foram transformados em versões de alta fidelidade e submetidos à aprovação do designer sênior, da equipe de CRM e do gerente de marketing. Após a aprovação, reuni todos os envolvidos para apresentar o novo formato de e-mail e as melhores práticas associadas a ele, garantindo que cada equipe compreendesse não apenas o que havia mudado, mas também o motivo, para que o novo padrão pudesse ser seguido de forma consistente daqui para a frente.
Em seguida, os wireframes foram transformados em versões de alta fidelidade e submetidos à aprovação do designer sênior, da equipe de CRM e do gerente de marketing. Após a aprovação, reuni todos os envolvidos para apresentar o novo formato de e-mail e as melhores práticas associadas a ele, garantindo que cada equipe compreendesse não apenas o que havia mudado, mas também o motivo, para que o novo padrão pudesse ser seguido de forma consistente daqui para a frente.
A etapa final consistiu em converter esses designs aprovados em modelos diretamente no ActiveCampaign. Isso permitiu que a equipe de CRM continuasse utilizando a plataforma com a qual já estava familiarizada, adaptando textos e imagens para cada e-mail, sem correr o risco de comprometer acidentalmente o layout ou a estrutura visual que acabara de ser padronizada.
A etapa final consistiu em converter esses designs aprovados em modelos diretamente no ActiveCampaign. Isso permitiu que a equipe de CRM continuasse utilizando a plataforma com a qual já estava familiarizada, adaptando textos e imagens para cada e-mail, sem correr o risco de comprometer acidentalmente o layout ou a estrutura visual que acabara de ser padronizada.
E-mail sobre pagamentos em atraso
E-mail sobre pagamentos em atraso
Antes: o e-mail começava com uma introdução longa e cordial antes mesmo de mencionar o motivo do envio, deixando a razão principal (um pagamento em atraso) oculta em meio a vários parágrafos. Não havia padronização no cabeçalho nem no rodapé, e a única chamada para ação (CTA) precisava disputar atenção com um grande bloco de texto ao seu redor.
Depois: a mensagem agora apresenta o motivo do e-mail logo no início, permitindo que o cliente compreenda a situação nos primeiros segundos após a abertura. A oferta principal (pagamento sem juros até o fim da semana) foi destacada em um bloco próprio, em vez de ficar escondida em um parágrafo, tornando-a o elemento de leitura mais rápida e fácil da mensagem. O texto foi significativamente reduzido, mantendo apenas o que influencia a decisão do cliente: o problema, a solução e como obter ajuda, se necessário.
Esta versão também estabelece o padrão estrutural aplicado a todos os e-mails do novo design: um cabeçalho consistente com o logotipo (para reconhecimento imediato da marca e confiança), um rodapé com links para redes sociais, botão de contato com o suporte e opção de cancelamento de assinatura, além de um botão de CTA claro e de alto contraste.
Antes: o e-mail começava com uma introdução longa e cordial antes mesmo de mencionar o motivo do envio, deixando a razão principal (um pagamento em atraso) oculta em meio a vários parágrafos. Não havia padronização no cabeçalho nem no rodapé, e a única chamada para ação (CTA) precisava disputar atenção com um grande bloco de texto ao seu redor.
Depois: a mensagem agora apresenta o motivo do e-mail logo no início, permitindo que o cliente compreenda a situação nos primeiros segundos após a abertura. A oferta principal (pagamento sem juros até o fim da semana) foi destacada em um bloco próprio, em vez de ficar escondida em um parágrafo, tornando-a o elemento de leitura mais rápida e fácil da mensagem. O texto foi significativamente reduzido, mantendo apenas o que influencia a decisão do cliente: o problema, a solução e como obter ajuda, se necessário.
Esta versão também estabelece o padrão estrutural aplicado a todos os e-mails do novo design: um cabeçalho consistente com o logotipo (para reconhecimento imediato da marca e confiança), um rodapé com links para redes sociais, botão de contato com o suporte e opção de cancelamento de assinatura, além de um botão de CTA claro e de alto contraste.
E-mail de anúncio de evento ao vivo
E-mail de anúncio de evento ao vivo
Antes: o e-mail combinava dois banners distintos para o evento ao vivo (um no topo e outro duplicado mais abaixo), esquemas de cores conflitantes (ciano, azul-petróleo e azul-marinho escuro) e múltiplas fontes usadas de forma inconsistente para dar ênfase. Não havia um ponto de partida claro, e os itens da lista de verificação utilizavam ícones de "check" verdes simples, sem peso visual, o que fazia com que a proposta de valor passasse despercebida em uma leitura rápida.
Depois: o novo design aposta na energia de "evento ao vivo", conferindo-lhe estrutura. Um único banner coeso no topo estabelece o contexto do evento, o selo "Ganhe um PDF exclusivo" e a oferta em uma hierarquia visual clara, seguidos por uma tipografia consistente no título. Abaixo do banner, o corpo do e-mail reapresenta o mesmo conteúdo, agora organizado em cartões com ícones para cada benefício (dinheiro, relógio, brilhos); esses elementos são muito mais fáceis de assimilar visualmente do que simples ícones de "check" em uma lista corrida.
O e-mail também elimina totalmente o segundo banner duplicado — que repetia a mensagem já comunicada no cabeçalho —, reduzindo a redundância e tornando a mensagem mais concisa. A chamada para ação (CTA) agora consiste em um único botão de alto contraste, alinhado ao restante do novo design, em vez de duas chamadas concorrentes.
Este e-mail também reflete o padrão estrutural aplicado em toda a reformulação: cabeçalho consistente com o logotipo e rodapé contendo informações de contato para suporte, links para redes sociais e a opção de cancelamento de inscrição.
Antes: o e-mail combinava dois banners distintos para o evento ao vivo (um no topo e outro duplicado mais abaixo), esquemas de cores conflitantes (ciano, azul-petróleo e azul-marinho escuro) e múltiplas fontes usadas de forma inconsistente para dar ênfase. Não havia um ponto de partida claro, e os itens da lista de verificação utilizavam ícones de "check" verdes simples, sem peso visual, o que fazia com que a proposta de valor passasse despercebida em uma leitura rápida.
Depois: o novo design aposta na energia de "evento ao vivo", conferindo-lhe estrutura. Um único banner coeso no topo estabelece o contexto do evento, o selo "Ganhe um PDF exclusivo" e a oferta em uma hierarquia visual clara, seguidos por uma tipografia consistente no título. Abaixo do banner, o corpo do e-mail reapresenta o mesmo conteúdo, agora organizado em cartões com ícones para cada benefício (dinheiro, relógio, brilhos); esses elementos são muito mais fáceis de assimilar visualmente do que simples ícones de "check" em uma lista corrida.
O e-mail também elimina totalmente o segundo banner duplicado — que repetia a mensagem já comunicada no cabeçalho —, reduzindo a redundância e tornando a mensagem mais concisa. A chamada para ação (CTA) agora consiste em um único botão de alto contraste, alinhado ao restante do novo design, em vez de duas chamadas concorrentes.
Este e-mail também reflete o padrão estrutural aplicado em toda a reformulação: cabeçalho consistente com o logotipo e rodapé contendo informações de contato para suporte, links para redes sociais e a opção de cancelamento de inscrição.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
E-mail convite do evento "Jornada da Empregabilidade"
E-mail convite do evento "Jornada da Empregabilidade"
Antes: o e-mail não tinha um banner dedicado ao evento em si, apenas o cabeçalho padrão com a foto do Edgar, o que não conferia ao convite nenhum diferencial visual em relação aos demais e-mails do fluxo. Os três palestrantes convidados não apareciam — eram mencionados apenas vagamente como "especialistas" — e o leitor precisava passar por vários parágrafos de introdução antes de encontrar informações concretas sobre datas ou como participar.
Depois: o novo banner coloca em destaque o principal atrativo do evento — os três palestrantes convidados —, mostrando quem são eles, juntamente com o nome do evento, o formato (gratuito, ao vivo) e as datas, logo abaixo de suas fotos. Isso transforma a promessa abstrata de "aulas ministradas por especialistas" em algo concreto e confiável, antes mesmo de o leitor precisar rolar a página.
O corpo do e-mail foi reestruturado para começar com a proposta de valor, seguida por uma seção dedicada a apresentar cada palestrante individualmente (foto, data, breve biografia), permitindo que o leitor entenda exatamente o conteúdo e o horário de cada sessão ao vivo. O texto foi consideravelmente enxugado: eliminaram-se explicações repetitivas e consolidaram-se as instruções em um fluxo único e claro — abrangendo participação, prazo, chamada para ação (CTA) e os próximos passos —, sem as etapas extras e os ícones repetidos da versão original.
Antes: o e-mail não tinha um banner dedicado ao evento em si, apenas o cabeçalho padrão com a foto do Edgar, o que não conferia ao convite nenhum diferencial visual em relação aos demais e-mails do fluxo. Os três palestrantes convidados não apareciam — eram mencionados apenas vagamente como "especialistas" — e o leitor precisava passar por vários parágrafos de introdução antes de encontrar informações concretas sobre datas ou como participar.
Depois: o novo banner coloca em destaque o principal atrativo do evento — os três palestrantes convidados —, mostrando quem são eles, juntamente com o nome do evento, o formato (gratuito, ao vivo) e as datas, logo abaixo de suas fotos. Isso transforma a promessa abstrata de "aulas ministradas por especialistas" em algo concreto e confiável, antes mesmo de o leitor precisar rolar a página.
O corpo do e-mail foi reestruturado para começar com a proposta de valor, seguida por uma seção dedicada a apresentar cada palestrante individualmente (foto, data, breve biografia), permitindo que o leitor entenda exatamente o conteúdo e o horário de cada sessão ao vivo. O texto foi consideravelmente enxugado: eliminaram-se explicações repetitivas e consolidaram-se as instruções em um fluxo único e claro — abrangendo participação, prazo, chamada para ação (CTA) e os próximos passos —, sem as etapas extras e os ícones repetidos da versão original.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
E-mail de lançamento do podcast "Sou Bancário"
E-mail de lançamento do podcast "Sou Bancário"
Antes: o e-mail começava com uma introdução longa e informal antes de apresentar qualquer informação concreta, e os detalhes principais (data de lançamento, convidado, tema) estavam dispersos em parágrafos corridos, em vez de estarem visualmente separados. O convidado, Marcelo Billi, era mencionado apenas de passagem em um parágrafo denso, sem qualquer destaque visual, apesar de representar um forte sinal de credibilidade para o anúncio. Informações práticas (dia, horário, canal) também estavam inseridas no texto corrido com marcadores de emoji, sendo fáceis de passar despercebidas durante uma leitura rápida.
Depois: o novo design transforma o mesmo conteúdo em algo muito mais fácil de ler e memorizar. O banner agora destaca a identidade visual do podcast e a data de estreia, conferindo mais impacto ao anúncio antes mesmo de o leitor chegar ao corpo do texto. A proposta de valor foi dividida em três cartões com ícones ("conversas com vozes reais do mercado", "dicas para exames", "atualizações regulatórias"), substituindo um parágrafo denso por informações que o leitor assimila em segundos.
O primeiro convidado, Marcelo Billi, agora conta com um cartão dedicado contendo foto, cargo e tema, ganhando destaque em vez de ser apenas mais um nome em meio a um parágrafo. As informações principais (dia e horário, canal do YouTube, sino de notificações) foram reunidas em um bloco de destaque intitulado "Lembre-se", tornando os detalhes logísticos mais importantes os elementos mais fáceis de localizar e memorizar posteriormente.
Antes: o e-mail começava com uma introdução longa e informal antes de apresentar qualquer informação concreta, e os detalhes principais (data de lançamento, convidado, tema) estavam dispersos em parágrafos corridos, em vez de estarem visualmente separados. O convidado, Marcelo Billi, era mencionado apenas de passagem em um parágrafo denso, sem qualquer destaque visual, apesar de representar um forte sinal de credibilidade para o anúncio. Informações práticas (dia, horário, canal) também estavam inseridas no texto corrido com marcadores de emoji, sendo fáceis de passar despercebidas durante uma leitura rápida.
Depois: o novo design transforma o mesmo conteúdo em algo muito mais fácil de ler e memorizar. O banner agora destaca a identidade visual do podcast e a data de estreia, conferindo mais impacto ao anúncio antes mesmo de o leitor chegar ao corpo do texto. A proposta de valor foi dividida em três cartões com ícones ("conversas com vozes reais do mercado", "dicas para exames", "atualizações regulatórias"), substituindo um parágrafo denso por informações que o leitor assimila em segundos.
O primeiro convidado, Marcelo Billi, agora conta com um cartão dedicado contendo foto, cargo e tema, ganhando destaque em vez de ser apenas mais um nome em meio a um parágrafo. As informações principais (dia e horário, canal do YouTube, sino de notificações) foram reunidas em um bloco de destaque intitulado "Lembre-se", tornando os detalhes logísticos mais importantes os elementos mais fáceis de localizar e memorizar posteriormente.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
E-mail promocional (CFP)
E-mail promocional (CFP)
Antes: o banner reunia a manchete, o preço, os detalhes do evento e a foto do Edgar em um único visual carregado, com várias cores competindo entre si (laranja, vermelho, azul-marinho), dificultando saber onde focar primeiro. A oferta (R$ 100 por módulo) e a condição associada a ela (apenas para participantes da transmissão ao vivo) eram mencionadas separadamente em partes diferentes do texto; assim, um leitor que passasse o olho rapidamente poderia facilmente deixar passar o detalhe principal. Os três benefícios estavam formatados como uma lista simples com marcadores (emojis de alfinete), conferindo-lhes o mesmo peso visual de qualquer outra linha de texto.
Depois: o banner agora isola a mensagem mais urgente — "Última Chance" — como uma manchete clara, seguida pela oferta de preço logo abaixo, em uma hierarquia visual muito mais focada. O corpo do texto reorganiza o mesmo conteúdo em uma estrutura clara de causa e efeito: a oferta, a condição associada a ela (destacada em uma caixa própria: "é só para quem estiver assistindo nossa live ao vivo") e os três benefícios exibidos em cartões com ícones, em vez de uma lista simples. Isso torna impossível não perceber a relação de troca — "por que R$ 100" e "o que é preciso fazer para conseguir" —, algo que passava despercebido nos parágrafos contínuos da versão original.
Uma linha de lembrete logo acima da chamada para ação (CTA) reforça mais uma vez a condição de participação exclusiva na transmissão ao vivo antes de o leitor decidir, e a própria CTA agora se destaca como o próximo passo claro, em vez de ser apenas mais um elemento em negrito competindo por atenção.
Antes: o banner reunia a manchete, o preço, os detalhes do evento e a foto do Edgar em um único visual carregado, com várias cores competindo entre si (laranja, vermelho, azul-marinho), dificultando saber onde focar primeiro. A oferta (R$ 100 por módulo) e a condição associada a ela (apenas para participantes da transmissão ao vivo) eram mencionadas separadamente em partes diferentes do texto; assim, um leitor que passasse o olho rapidamente poderia facilmente deixar passar o detalhe principal. Os três benefícios estavam formatados como uma lista simples com marcadores (emojis de alfinete), conferindo-lhes o mesmo peso visual de qualquer outra linha de texto.
Depois: o banner agora isola a mensagem mais urgente — "Última Chance" — como uma manchete clara, seguida pela oferta de preço logo abaixo, em uma hierarquia visual muito mais focada. O corpo do texto reorganiza o mesmo conteúdo em uma estrutura clara de causa e efeito: a oferta, a condição associada a ela (destacada em uma caixa própria: "é só para quem estiver assistindo nossa live ao vivo") e os três benefícios exibidos em cartões com ícones, em vez de uma lista simples. Isso torna impossível não perceber a relação de troca — "por que R$ 100" e "o que é preciso fazer para conseguir" —, algo que passava despercebido nos parágrafos contínuos da versão original.
Uma linha de lembrete logo acima da chamada para ação (CTA) reforça mais uma vez a condição de participação exclusiva na transmissão ao vivo antes de o leitor decidir, e a própria CTA agora se destaca como o próximo passo claro, em vez de ser apenas mais um elemento em negrito competindo por atenção.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
E-mail promocional (CPA-20)
E-mail promocional (CPA-20)
Antes: o banner combinava três selos de certificação (CPA-10, CPA-20, CEA), fotos de três mentores diferentes, um selo da ANBIMA e dois títulos sobrepostos, criando vários pontos de foco que competiam entre si antes mesmo de o leitor entender que o e-mail tratava especificamente da CPA-20. A tabela de preços utilizava uma borda azul-vibrante, e os benefícios da lista de verificação eram apresentados com emojis de "check" alinhados ao texto, o que reduzia a separação visual em relação ao restante do conteúdo.
Depois: o banner agora destaca uma única certificação (CPA-20) com seu próprio selo — eliminando as outras certificações e fotos de mentores irrelevantes para esta oferta específica — e permite que o "40% OFF" se sobressaia como o elemento visual dominante. O corpo do e-mail mantém esse foco: nome da certificação, título e desconto são apresentados em uma hierarquia clara de cima para baixo, seguidos pela lista de benefícios inserida em um bloco de fundo cinza-claro, em vez de ficar solta na página.
Os cartões de preços foram reformulados com um fundo azul-marinho escuro e consistente, harmonizando com a paleta de cores do restante do e-mail e substituindo o contorno azul que destoava anteriormente; além disso, os nomes dos planos agora aparecem em pequenas etiquetas arredondadas, facilitando a comparação rápida entre as duas opções.
O botão de chamada para ação (CTA) também foi reposicionado para aparecer logo após os cartões de preços, encurtando a distância entre a informação do valor e o botão de ação, evitando a separação por divisórias ou textos adicionais que existia na versão original.
Antes: o banner combinava três selos de certificação (CPA-10, CPA-20, CEA), fotos de três mentores diferentes, um selo da ANBIMA e dois títulos sobrepostos, criando vários pontos de foco que competiam entre si antes mesmo de o leitor entender que o e-mail tratava especificamente da CPA-20. A tabela de preços utilizava uma borda azul-vibrante, e os benefícios da lista de verificação eram apresentados com emojis de "check" alinhados ao texto, o que reduzia a separação visual em relação ao restante do conteúdo.
Depois: o banner agora destaca uma única certificação (CPA-20) com seu próprio selo — eliminando as outras certificações e fotos de mentores irrelevantes para esta oferta específica — e permite que o "40% OFF" se sobressaia como o elemento visual dominante. O corpo do e-mail mantém esse foco: nome da certificação, título e desconto são apresentados em uma hierarquia clara de cima para baixo, seguidos pela lista de benefícios inserida em um bloco de fundo cinza-claro, em vez de ficar solta na página.
Os cartões de preços foram reformulados com um fundo azul-marinho escuro e consistente, harmonizando com a paleta de cores do restante do e-mail e substituindo o contorno azul que destoava anteriormente; além disso, os nomes dos planos agora aparecem em pequenas etiquetas arredondadas, facilitando a comparação rápida entre as duas opções.
O botão de chamada para ação (CTA) também foi reposicionado para aparecer logo após os cartões de preços, encurtando a distância entre a informação do valor e o botão de ação, evitando a separação por divisórias ou textos adicionais que existia na versão original.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
E-mail promocional da Semana dos Namorados
Antes: o banner reunia diversos elementos temáticos pequenos, adesivos de emoji apaixonados, o logotipo "Semana dos Namorados", a foto do Edgar e um selo de "50% OFF" em uma grade única e apertada, sem um ponto focal claro, o que dava a impressão de uma colagem em vez de uma hierarquia visual planejada. A mensagem de urgência ("último dia para o desconto") aparecia apenas como uma linha curta de texto, fácil de passar despercebida, e o estilo do botão de CTA (contorno rosa, emojis em ambos os lados) não condizia com o peso visual que a oferta merecia. O e-mail também repetia o mesmo texto de CTA duas vezes — uma perto do topo e outra na parte inferior —, sem acrescentar novas informações entre elas.
Depois: o banner agora organiza os mesmos elementos sazonais e lúdicos (rótulo do tema, foto, ícones de clima/emoção, desconto) em blocos claramente definidos, mantendo o tom romântico sem a poluição visual. O "50% OFF" ganhou um cartão exclusivo, tornando-se o elemento de maior destaque no banner, em vez de competir com vários outros itens. Abaixo do banner, o texto principal começa com "Última chance" e "Curso completo CEA" dispostos em uma hierarquia clara de cima para baixo, seguidos imediatamente pelo desconto em fonte grande; assim, a oferta e a urgência são compreendidas antes mesmo de o leitor ler uma única frase do corpo do texto.
O texto de apoio foi significativamente reduzido, eliminando argumentos persuasivos repetitivos e consolidando a mensagem em um único motivo claro para agir agora. O CTA aparece apenas uma vez, acompanhado logo abaixo por uma frase curta de reforço ("A promoção acaba hoje!"), em vez de um segundo botão redundante mais abaixo no e-mail.
Antes: o banner reunia diversos elementos temáticos pequenos, adesivos de emoji apaixonados, o logotipo "Semana dos Namorados", a foto do Edgar e um selo de "50% OFF" em uma grade única e apertada, sem um ponto focal claro, o que dava a impressão de uma colagem em vez de uma hierarquia visual planejada. A mensagem de urgência ("último dia para o desconto") aparecia apenas como uma linha curta de texto, fácil de passar despercebida, e o estilo do botão de CTA (contorno rosa, emojis em ambos os lados) não condizia com o peso visual que a oferta merecia. O e-mail também repetia o mesmo texto de CTA duas vezes — uma perto do topo e outra na parte inferior —, sem acrescentar novas informações entre elas.
Depois: o banner agora organiza os mesmos elementos sazonais e lúdicos (rótulo do tema, foto, ícones de clima/emoção, desconto) em blocos claramente definidos, mantendo o tom romântico sem a poluição visual. O "50% OFF" ganhou um cartão exclusivo, tornando-se o elemento de maior destaque no banner, em vez de competir com vários outros itens. Abaixo do banner, o texto principal começa com "Última chance" e "Curso completo CEA" dispostos em uma hierarquia clara de cima para baixo, seguidos imediatamente pelo desconto em fonte grande; assim, a oferta e a urgência são compreendidas antes mesmo de o leitor ler uma única frase do corpo do texto.
O texto de apoio foi significativamente reduzido, eliminando argumentos persuasivos repetitivos e consolidando a mensagem em um único motivo claro para agir agora. O CTA aparece apenas uma vez, acompanhado logo abaixo por uma frase curta de reforço ("A promoção acaba hoje!"), em vez de um segundo botão redundante mais abaixo no e-mail.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
*O banner exibido aqui é um modelo provisório criado para ilustrar a hierarquia, as proporções e a estrutura de conteúdo; trata-se de uma referência para a equipe de design desenvolver a versão final, e não do elemento gráfico definitivo.
Aprendizados
Aprendizados
UX é muito mais do que apenas telas
UX é muito mais do que apenas telas
Este projeto reforçou que o trabalho de design muitas vezes começa antes mesmo de se tocar em qualquer interface: repensando fluxos, organizando informações dispersas e encontrando soluções melhores, inclusive para processos realizados da mesma maneira há muito tempo. O fato de algo sempre ter sido feito de certa forma não significa que seja a maneira correta.
Este projeto reforçou que o trabalho de design muitas vezes começa antes mesmo de se tocar em qualquer interface: repensando fluxos, organizando informações dispersas e encontrando soluções melhores, inclusive para processos realizados da mesma maneira há muito tempo. O fato de algo sempre ter sido feito de certa forma não significa que seja a maneira correta.
A comunicação entre equipes não é opcional, é essencial
Todas as mudanças aqui propostas impactaram o trabalho de designers, redatores e da equipe de CRM nas etapas seguintes do processo. Priorizar essa comunicação desde o início, em vez de tratá-la como uma conversa paralela, foi tão importante para o sucesso do projeto quanto qualquer decisão de design.
Todas as mudanças aqui propostas impactaram o trabalho de designers, redatores e da equipe de CRM nas etapas seguintes do processo. Priorizar essa comunicação desde o início, em vez de tratá-la como uma conversa paralela, foi tão importante para o sucesso do projeto quanto qualquer decisão de design.
O design ocorre dentro de um contexto organizacional real.
O design ocorre dentro de um contexto organizacional real.
Entrar no projeto em andamento significou mapear pessoas e processos antes de propor qualquer mudança visual. Um redesign só funciona se estiver alinhado à forma como as pessoas realmente trabalham, e não a uma versão idealizada do fluxo de trabalho.
Entrar no projeto em andamento significou mapear pessoas e processos antes de propor qualquer mudança visual. Um redesign só funciona se estiver alinhado à forma como as pessoas realmente trabalham, e não a uma versão idealizada do fluxo de trabalho.
A consistência visual é uma questão de confiança, não apenas de estética.
A consistência visual é uma questão de confiança, não apenas de estética.
Relatos da equipe de suporte sobre clientes questionando a legitimidade de e-mails serviram como um lembrete claro de que um design inconsistente traz riscos reais para o negócio. Uma identidade visual unificada não serve apenas para transmitir um ar mais profissional; ela protege a relação entre uma marca e as pessoas que confiam nela.
Relatos da equipe de suporte sobre clientes questionando a legitimidade de e-mails serviram como um lembrete claro de que um design inconsistente traz riscos reais para o negócio. Uma identidade visual unificada não serve apenas para transmitir um ar mais profissional; ela protege a relação entre uma marca e as pessoas que confiam nela.
Uma boa solução de design precisa sobreviver sem você.
Uma boa solução de design precisa sobreviver sem você.
Entregar telas de alta fidelidade não bastava por si só; a verdadeira solução foi criar modelos no ActiveCampaign que permitissem à equipe de CRM continuar trabalhando de forma independente. Um design que depende do envolvimento constante do designer não é uma solução sustentável.
Entregar telas de alta fidelidade não bastava por si só; a verdadeira solução foi criar modelos no ActiveCampaign que permitissem à equipe de CRM continuar trabalhando de forma independente. Um design que depende do envolvimento constante do designer não é uma solução sustentável.
Confira mais dos meus trabalhos
Confira mais dos meus trabalhos
