Desenvolvendo e implementando o site de marketing da nossa empresa: Minha jornada do conteúdo à implementação

Se você é um usuário do Logto, pode ter notado que o site da nossa empresa foi atualizado recentemente. Se não for, dê uma olhada no site, logto.io, e tente adivinhar quantos recursos investimos para fazer isso acontecer.

Você pode pensar, vocês estão se promovendo para dizer que leva muito trabalho, esforço e um design cuidadoso para mostrar sua excelência na execução?

Não!

Pelo contrário, queremos mostrar como usamos ferramentas e métodos de forma inteligente para melhorar a qualidade do nosso produto e entregar os melhores produtos e serviços aos nossos usuários.

Recebemos alguns feedbacks positivos da nossa comunidade e estamos nos perguntando como conseguimos isso. Esta rodada de atualizações é diferente porque reinventamos completamente um novo fluxo de trabalho em um ambiente de rápido movimento. Gostaríamos de apresentar nossas melhores práticas e também dar uma olhada mais de perto na nossa cultura de trabalho em equipe e colaboração.

O contexto#

Somos uma equipe técnica focada em oferecer uma ampla gama de serviços de desenvolvimento relacionados à identidade do cliente e trabalho de infraestrutura. A pressão para entregar é significativa. Enquanto isso, precisamos dar suporte a várias tarefas operacionais e de contar histórias, como construir sites de marketing de marca, escrever blogs, promover nossos projetos e engajar com nossos usuários.

Um site de aterrissagem atraente é crucial, pois muitas vezes forma a primeira impressão que o seu público tem do seu produto, ajudando-os a entender os problemas que seu produto visa resolver, incluindo preços e quaisquer clientes notáveis para prova social.

Além disso, ele pode cumprir múltiplos objetivos de negócios:

• Destacar a marca do seu produto e a proposta de valor.
• Gerar leads.
• Atuar como um centro de conteúdo, especialmente importante para uma empresa focada em crescimento liderado por produto ou por desenvolvedor.
• Fornecer um local para otimizar SEO, adquirir usuários e rastrear tráfego regular.

No meu emprego anterior, estive envolvido em um projeto de website. Vamos analisar o que um fluxo de trabalho típico envolve:

1. Primeiro, os gerentes de marketing de produto e os gerentes de produto definem o conteúdo e os requisitos.
2. Designers de produto e um escritor de UX refinam o conteúdo.
3. Nós fazemos a transição do trabalho em andamento, geralmente uma versão de baixa fidelidade, para designers visuais e de marca para os toques finais antes da produção.
4. Engenheiros e gerentes de produto então começam a implementação, concentrando-se em animação e design web responsivo.

Esse processo é tedioso e envolve muitas pessoas e partes interessadas, tornando-o inadequado para um ambiente de rápido movimento.

Mesmo que inicialmente tenhamos apenas duas pessoas mantendo isso—um designer de produto e um engenheiro—, as tarefas de gerenciamento de desempenho do site, upload de imagens, garantia de design responsivo, manuseio de formatos de imagem e atualização de conteúdo ainda exigem muita comunicação para frente e para trás.

Esse fluxo de trabalho é ineficiente. Eu constantemente penso em como liberar recursos de engenharia para que possam se concentrar no trabalho principal do produto enquanto eu gerencio o restante.

Utilizar ferramentas para aumentar a produtividade é uma filosofia fundamental da nossa equipe. Portanto, comecei a pesquisar ferramentas que possam ajudar a simplificar esses processos.

Desmembrando as necessidades#

Para desenvolver um site de marketing SaaS bem-sucedido, vamos desmembrar os elementos essenciais necessários:

1. Conteúdo: A base de qualquer site de marketing é saber exatamente o que exibir. Isso exige um profundo entendimento de seus clientes-alvo, seus casos de uso típicos e a proposta de valor do seu produto. Nenhuma ferramenta pode substituir esse entendimento. Felizmente, meu envolvimento no design de produtos e estratégias de go-to-market significa que estou bem equipado para criar conteúdo que atenda às necessidades dos usuários.
2. Design: O site deve ter um apelo visual polido e elegante. Meu histórico em design de UX/produtos, apesar de não ser tão extenso quanto o de um designer criativo dedicado, me capacita a lidar com esse aspecto de forma competente.
3. Engenharia: Considerações técnicas importantes incluem hospedar o site, garantir design responsivo e permitir micro-interações suaves. Também é crucial integrar o site perfeitamente com outros componentes, como redirecionamentos de links e a página de autenticação do produto.

Tendo feito algumas pesquisas, aqui está o conjunto de ferramentas que planejo usar para os aspectos de design:

Conteúdo de Produto e Marketing#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper ou aplicativos similares de IA como copiloto.

Isso é para ajustar e otimizar meu conteúdo de marketing e mensagens. É importante ter clareza sobre o objetivo e a intenção por trás delas. A IA é apenas um copiloto, não uma tomadora de decisões. Antes de escrever qualquer mensagem de marketing, faço a mim mesmo algumas perguntas:

1. Quem vai ler a mensagem?
2. Eles precisam de algum contexto extra?
3. Qual é o ponto chave que você quer abordar na mensagem?
4. O que você espera que o usuário faça como próximo passo?
5. Essa mensagem é destinada a educar ou impulsionar uma ação específica?
6. Isso tem o potencial de ser enganoso ou exagerado?

Então, vou escrever um rascunho inicial dos pontos que quero comunicar.

Às vezes, a IA pode introduzir palavras que parecem desgastadas ou distorcer sua intenção original para fazê-la parecer logicamente correta. No entanto, você deve reafirmar sua intenção e manter seus objetivos. Você deve estabelecer padrões para garantir que as palavras entregues ao público sejam claras, diretas, concisas e transparentes. Isso é especialmente importante em nosso domínio de produtos, que atende a muitas empresas e desenvolvedores.

Design#

Figma, Framer para interação e design visual, bem como animação e prototipagem

Tenho um histórico em design, principalmente focado em design de produtos, que envolve a criação de UI e UX. Embora o design de UI polido não seja um desafio para mim, meu trabalho não é tão elegante quanto o de um profissional. No entanto, com algumas habilidades básicas de design visual e ilustração, e escolhendo as ferramentas certas, você pode aumentar a qualidade do seu trabalho. Eu uso Framer e Figma nesse processo criativo.

Este é o nosso design antigo, que é completamente construído pelo Figma

Nosso design original foi criado no Figma. Usei o plugin oficial do Framer, "Framer to HTML", para copiar e colar o design básico no Framer, o que forneceu um bom ponto de partida.

O próximo passo é o design. Se você já usou Figma anteriormente, a transição para o Framer é um processo suave, pois a experiência do usuário geral é bastante similar. Vou destacar algumas interações interessantes que aumentam significativamente a produtividade.

Layout#

Os usuários do Figma apreciam o auto-layout porque economiza muito tempo na disposição e colocação de elementos. No entanto, as funções de layout do Framer são ainda mais inteligentes, alinhando-se mais com uma mentalidade de front-end. No Framer, você pode escolher entre usar uma grade ou layout em pilha, definir as colunas, definir uma largura máxima, e ele automaticamente ajusta para outra linha, se necessário. Essa funcionalidade melhora o processo de design espelhando como os elementos se comportarão em um ambiente web ao vivo.

Pontos de Interrupção para Design Responsivo#

Confiando inteligentemente na configuração de pontos de interrupção e configurações de largura (como preencher, fixo, relativo e ajustar ao conteúdo) e definindo diferentes telas, você pode facilmente e com precisão alcançar vários designs responsivos. Esta abordagem permite que você adapte o layout a diferentes tamanhos de tela e dispositivos de forma eficiente.

Animação#

O Framer oferece uma variedade de animações pré-construídas, incluindo uma animação ticker que usamos amplamente em nosso site para exibir nosso trabalho. Você pode configurar o componente e incorporá-lo dentro deste widget. Ele permite que você defina várias configurações, como velocidade, direção, espaçamento e mais, dando-lhe flexibilidade e controle sobre como a animação se comporta no seu site.

Outro recurso útil no Framer é a capacidade de personalizar animações de rolagem. Por exemplo, você pode especificar como os itens aparecem conforme entram em vista durante a rolagem. Configurar sua animação de rolagem permite que você controle o tempo e o estilo de como os elementos são exibidos, melhorando a experiência do usuário e o engajamento com o seu conteúdo.

Publicação Rápida#

Um dos meus requisitos principais é a capacidade de:

1. Projetar rapidamente várias landing pages para otimização de SEO e campanhas de marketing. A velocidade é essencial.
2. Atualizar conteúdo com frequência por conta própria. Sua landing page de produto deve refletir os desenvolvimentos mais recentes e o posicionamento atual do seu produto. Conteúdos desatualizados significam perda de oportunidades de mercado e falta de alinhamento com as necessidades dos seus clientes.

No meu fluxo de trabalho anterior, sempre que eu precisava atualizar conteúdo, tinha que pedir a um engenheiro para fazer isso ou enviar uma pull request eu mesmo. Nossa equipe de engenharia segue um processo rigoroso para garantir a qualidade do código, o que pode ser demorado e restringe a minha capacidade de fazer mudanças rápidas.

O Framer resolveu esse problema para mim. Agora, sempre que faço uma mudança e clico em publicar, ela é refletida imediatamente ao vivo na produção. Essa capacidade facilitou muito o processo, permitindo atualizações rápidas e maior autonomia na gestão de conteúdo.

Engenharia#

Como é hospedado pelo Framer, não há necessidade de qualquer implementação ou trabalho técnico da nossa parte. Nossos engenheiros precisaram de cerca de 10 minutos para integrá-lo ao restante do nosso site.

Nosso site atual consiste em 20-30 páginas; algumas são desenvolvidas usando Framer, enquanto outras são criadas por métodos tradicionais de desenvolvimento de software. Estamos no processo de selecionar as melhores ferramentas para manter nossas páginas. Por exemplo, para documentação de desenvolvedor, que é desafiadora de gerenciar com o Framer, usar um framework de documentação amigável ao desenvolvedor para hospedar seu conteúdo é a escolha ótima. No futuro, vamos avaliar nossas necessidades e decidir se continuamos hospedando por conta própria ou se fazemos a transição completa para o Framer.

Como mudou nosso fluxo de trabalho#

Nós transformamos completamente nosso fluxo de trabalho, tornando a produção de sites de marketing completamente sem esforço. É confiável, de fácil manutenção e altamente eficiente.

Escrevi este blog para compartilhar as melhores práticas. Se você tem experiências com o Framer e o design de websites bonitos, adoraria ouvir sobre elas. Vamos conversar e aprender uns com os outros.

Agora, é hora de conferir nosso produto! Visite-nos em logto.io.