Como a Sem Parar usa a Croct para ter autonomia

NovidadesPor Mariana Bonanomi

Conhecer bem as personas é parte fundamental da estratégia de marketing de empresas bem-sucedidas. O mesmo é válido para reconhecer clientes em potencial. Considerar os gostos e preferências das diferentes audiências que você atende é a chave para criar uma conexão sólida com os consumidores e até mesmo engajar públicos maiores.

Por isso, os times de marketing e design da empresa de tag automática Sem Parar se uniram na criação de experiências de navegação únicas. Desde seu primeiro caso de uso de personalização, muita coisa mudou nos objetivos de marketing da empresa. Nesse post, discutiremos sobre como os desafios da Sem Parar levaram a essas mudanças e quais soluções foram encontradas.

Tenha a autonomia que você precisaConfira nossas demos interativas e veja como a Croct pode te ajudar a não depender de desenvolvedores no dia a dia.
Algumas linhas de código para o desenvolvedor editar, e o site para o profissional de marketing editar.

Os desafios de personalização da Sem Parar

Atrair novos clientes custa, em média, 5 a 7 vezes mais para uma empresa do que transformar os clientes atuais em compradores recorrentes. No início, o site da Sem Parar tinha como foco principal campanhas de aquisição de leads. Por isso, não existia uma divisão clara de comunicação para usuários que eram clientes e outros que acessavam o site para conhecer o produto. Ambos os públicos visualizavam o mesmo conteúdo.

Além disso, nem sempre era possível garantir que novas experiências e implementações por parte do time de marketing não quebrassem o site ou desrespeitassem o design system definido. Este é também o desafio de muitas empresas que precisam alterar seu conteúdo com frequência.

Por isso, a Sem Parar criou um novo design system utilizando a Croct, que permite que o time de marketing tenha flexibilidade seguindo as diretrizes da marca e garantindo que nada vá dar errado na implementação do site.

O que é um design system?

Um design system (ou Sistema de Design) é um conjunto de diretrizes, padrões, componentes, estilos e princípios que definem a maneira como um site ou produto digital é projetado e desenvolvido. O objetivo principal é estabelecer um padrão para essas interfaces gráficas. Isso garante a coesão e harmonia entre diferentes equipes, produtos e plataformas, promovendo uma experiência de usuário unificada e consistente.

Um design system geralmente inclui:

  • Diretrizes de design: Documentação que estabelece os princípios de design da organização. Isso pode incluir orientações para tipografia, cores, espaçamento, hierarquia visual, microinterações, entre outros aspectos.

  • Componentes reutilizáveis: Conjunto de elementos de UI que podem ser recombinados de maneira coesa para criar páginas, telas e fluxos. Pode incluir botões, formulários, cards, barras de navegação, ícones e outros elementos de interface.

  • Estilos e temas: Conjunto de estilos gráficos, como paleta de cores e tipografia. Também pode incluir temas para diferentes contextos, como um tema claro e um tema escuro.

  • Documentação e treinamento: Um documento que descreve como utilizar e implementar os componentes do design system. Isso pode incluir exemplos de snippets de código, guias de uso, tutoriais e recursos para ajudar as equipes a adotarem e trabalharem com o design system de forma eficaz.

Ao aliar uma plataforma de personalização à criação do design system, é possível utilizar componentes predeterminados para modificar dinamicamente o layout do site sem interferir no padrão estabelecido. Isso significa que o time de design não precisa revisar cada alteração realizada. A documentação e os campos disponíveis para alteração já estão predefinidos, oferecendo flexibilidade aos times de marketing para realizar testes e implementar mudanças com frequência.

Exemplo de design-system com página de banner e indicação de todos os elementos personalizáveis e que podem ser alterados de acordo com as diretrizes da marca.
Modelo de Design System do Sem Parar com a Croct

Para entender melhor como a Sem Parar utiliza a nossa plataforma na personalização do site, conversamos com a Bruna Bazan, Senior Design Analyst responsável pelo projeto.

Reinventando a comunicação com os usuários

Para construir a estratégia atual de comunicação do site, o time de marketing da Sem Parar segmentou o público entre clientes e visitantes. Além disso, criou audiências distintas com base na localização dos usuários. Usuários novos e retornantes passaram a visualizar conteúdos relevantes para o seu estágio na jornada de compra. Até esse momento, as variações de conteúdo no site ainda eram limitadas em termos de frequência e quantidade.

Como eu diria para o paulista 'não ficar chateado' e o paranaense 'não ficar jururu' no mesmo banner sem a Croct?

Bruna Bazan
Exemplo de diretrizes de design system para alterações no banner promocional do Sem Parar, mostrando elementos fixos e variáveis com personalização.
Diretrizes de design para banner promocional

Tanto em comunicação quanto em implementação de testes, a Croct permitiu que o time de marketing tivesse mais autonomia e produtividade, já que não dependiam de outros times para alterações diárias de conteúdo.

Há um tempo, precisamos trocar um banner de última hora. Graças à Croct, conseguimos executar isso em questão de minutos, sem movimentar um grande número de funcionários.

Bruna Bazan

O número e a velocidade das análises também aumentou, já que o time pode acessar dados de experimentos diretamente no dashboard da Croct. Nele, encontra todas as informações necessárias para orientar suas tomadas de decisões e definir os próximos projetos.

Com a Croct, eu tenho autonomia para fazer testes que antes precisariam de um desenvolvedor para serem implementados. A liberdade de realizar isso sozinha me ajudou a otimizar vários processos e dar asas à criatividade.

Bruna Bazan

Utilizando a Croct, a Bruna conseguiu criar um novo design system para sessões chave do site da Sem Parar. Primeiramente, ela buscou entender como as experiências personalizadas poderiam ser editadas. Em seguida, criou um documento com informações detalhadas do que poderia ou não ser alterado no site, considerando a integridade da identidade visual da marca.

Exemplos de personalização com detalhes de cada atributo para box da direita, esquerda e versão mobile do Sem Parar.
Exemplo de personalização de desk box

Como dito pela própria Bruna, o objetivo desse documento é que mesmo quem não tem conhecimento em design entenda a organização das informações, deixando explícito como devem ser realizadas as alterações.

O conteúdo personalizado muda de acordo com a audiência definida na plataforma sem que isso impacte o design ou o código do site. Dessa maneira, todos os detalhes do banner, por exemplo, podem ser editados com a Croct, desde cores de botões e backgrounds até fontes tipográficas. O tempo valioso dos designers é poupado quando o time de marketing ajusta o conteúdo do site através da Croct, evitando retrabalho.

Sem Parar banner
Banner personalizado da Sem Parar

Esse projeto foi amplamente elogiado por todos na Sem Parar, e se tornou uma referência em colaboração entre diferentes times dentro de uma empresa.

As possibilidades proporcionadas pela Croct contribuíram para otimizar resultados e trazer novas ideias e insights para o time do Sem Parar.

Quer ganhar autonomia para personalizar seu site, assim como a Sem Parar? Crie sua conta grátis na Croct hoje.

Vamos crescer juntos!

Descubra as táticas que nossos clientes usam para crescer 20% ou mais.