Desenvolver e implementar o site de marketing da nossa empresa: A minha jornada do conteúdo à implementação

Se és um utilizador do Logto, podes ter reparado que o site da nossa empresa foi recentemente renovado. Se não és, dá uma olhada no site, logto.io, e tenta adivinhar quantos recursos investimos para que isto acontecesse.

Podes pensar: vocês vão promover-se, dizendo que precisou de muito trabalho, esforço, e um design cuidadoso só para mostrar a vossa excelência na execução?

Não!

Pelo contrário, queremos mostrar como inteligentemente aproveitamos ferramentas e métodos para melhorar a qualidade do nosso produto e entregar os melhores produtos e serviços aos nossos utilizadores.

Recebemos alguns comentários positivos da nossa comunidade e estamos a questionar-nos como fizemos isso. Esta ronda de atualizações é diferente porque reinventámos completamente um novo fluxo de trabalho num ambiente em rápida evolução. Gostaríamos de apresentar as nossas melhores práticas e também olhar mais de perto para a nossa cultura de trabalho em equipa e colaboração.

O contexto#

Somos uma equipa tecnológica focada em fornecer uma ampla gama de serviços de desenvolvimento relacionados com a identidade do cliente e trabalho de infraestrutura. A pressão para entregar é significativa. Entretanto, precisamos apoiar várias tarefas de storytelling e operacionais, como criar sites de marketing de marca, escrever blogs, promover os nossos projetos e interagir com os nossos utilizadores.

Um site de aterragem apelativo é crucial, pois muitas vezes é a primeira impressão que o teu público tem do teu produto, ajudando-os a entender os problemas que o teu produto pretende resolver, incluindo preços e clientes notáveis como prova social.

Além disso, pode cumprir vários objetivos de negócios:

• Apresentar a marca e a proposta de valor do teu produto.
• Gerar leads.
• Servir como um hub de conteúdo, especialmente importante para uma empresa focada em crescimento orientado por produto ou por desenvolvedores.
• Proporcionar um local para otimizar SEO, adquirir utilizadores, e acompanhar o tráfego regular.

No meu trabalho anterior, participei num projeto de website. Vamos olhar para o que um fluxo de trabalho típico envolve:

1. Primeiro, os gestores de marketing de produto e os gestores de produto definem o conteúdo e os requisitos.
2. Os designers de produto e um UX writer refinam o conteúdo.
3. Passamos o trabalho em progresso, geralmente uma versão de baixa fidelidade, para designers visuais e de branding para os retoques finais antes da produção.
4. Os engenheiros e gestores de produto então começam a implementação, focando na animação e design web responsivo.

Este processo é tedioso e envolve muitas pessoas e interessados, tornando-o inadequado para um ambiente de rápida evolução.

Mesmo que inicialmente tenhamos apenas duas pessoas a manter isto—um designer de produto e um engenheiro—, as tarefas de gerir o desempenho web, carregar imagens, assegurar design responsivo, lidar com formatos de imagem, e atualizar conteúdo ainda requerem muita comunicação de ida e volta.

Este fluxo de trabalho é ineficiente. Estou constantemente a pensar em como libertar recursos de engenharia para focar no trabalho de produto principal enquanto eu gerencio o resto.

Usar ferramentas para aumentar a produtividade é uma filosofia chave da nossa equipa. Portanto, comecei a pesquisar ferramentas que podem ajudar a simplificar esses processos.

Analisar as necessidades#

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

1. Conteúdo: A base de qualquer site de marketing é saber exatamente o que exibir. Isso requer um entendimento profundo dos teus clientes-alvo, dos seus casos de uso típicos, e da proposta de valor do teu produto. Nenhuma ferramenta pode substituir esse entendimento. Felizmente, a minha participação no design de produto e nas estratégias de entrada no mercado significa que estou bem equipado para criar conteúdo que atenda às necessidades dos utilizadores.
2. Design: O site deve ter um apelo visual polido e elegante. O meu histórico em design UX/produto, embora não tão extenso quanto o de um designer criativo dedicado, capacita-me a lidar com este aspeto de forma competente.
3. Engenharia: Considerações técnicas chave incluem hospedar o site, garantir design responsivo e permitir micro-interações suaves. Também é crucial integrar o site de forma transparente com outros componentes, como redirecionamentos de links e a página de autenticação do produto.

Tendo realizado algumas pesquisas, aqui está o conjunto de ferramentas que planeio usar para os aspetos de design:

Conteúdo de Produto e Marketing#

ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper, ou aplicações semelhantes de IA como copiloto.

Isto é para afinar e otimizar o meu conteúdo e mensagens de marketing. É importante ser claro sobre o objetivo e a intenção por trás delas. A IA é apenas um copiloto, não um tomador 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 queres abordar na mensagem?
4. O que esperas que o utilizador faça a seguir?
5. Esta mensagem é destinada a educar ou a conduzir a uma ação específica?
6. Tem o potencial de ser enganosa ou exagerada?

Depois, escrevo um rascunho inicial dos pontos que quero comunicar.

Às vezes, a IA pode introduzir palavras que parecem usadas demais ou torcer a tua intenção original para que pareça logicamente correta. No entanto, deves relembrar a tua intenção e manter-te fiel aos teus objetivos. Deves estabelecer padrões para garantir que as palavras entregues ao público sejam claras, diretas, concisas e transparentes. Isso é especialmente importante na nossa área de produto, que serve muitas empresas e desenvolvedores.

Design#

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

Tenho uma formação em design, principalmente focada em design de produto, o que envolve a criação de UI e UX. Embora projetar uma UI polida não seja um desafio para mim, o meu trabalho não é tão sofisticado quanto o de um profissional. No entanto, com algumas habilidades básicas de design visual e ilustração, e escolhendo as ferramentas certas, podes melhorar a qualidade do teu trabalho. Uso o Framer e o Figma neste processo criativo.

Este é o nosso design antigo, que foi completamente criado no Figma

O 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 proporcionou um bom ponto de partida.

O próximo passo é desenhar. Se já utilizaste o Figma anteriormente, a transição para o Framer é um processo suave, uma vez que a experiência geral do utilizador é bastante semelhante. Vou destacar algumas interações interessantes que melhoram significativamente a produtividade.

Layout#

Os utilizadores do Figma apreciam o layout automático porque poupa muito tempo ao dispor e posicionar elementos. No entanto, as funções de layout no Framer são ainda mais inteligentes, alinhando-se mais com uma mentalidade de front-end. No Framer, podes escolher se queres usar um layout de grelha ou de pilha, definir as colunas, definir uma largura máxima, e ele irá automaticamente mudar para outra linha, se necessário. Esta funcionalidade melhora o processo de design, refletindo como os elementos irão comportar-se num ambiente web ao vivo.

Pontos de interrupção para design responsivo#

Confiando inteligentemente na configuração de pontos de interrupção e nas definições de largura (como preencher, fixo, relativo e ajustar ao conteúdo) e definindo diferentes telas, podes alcançar facilmente e com precisão diversos designs responsivos. Esta abordagem permite-te adaptar o layout a diferentes tamanhos de ecrãs 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 extensivamente no nosso site para mostrar o nosso trabalho. Podes configurar o componente e incorporá-lo neste widget. Permite-te definir várias configurações, como velocidade, direção, espaçamento, e mais, dando-te flexibilidade e controlo sobre como a animação se comporta no teu site.

Outra funcionalidade útil no Framer é a capacidade de personalizar animações de rolagem. Por exemplo, podes especificar como os itens aparecem à medida que surgem durante a rolagem. Configurar a tua animação de rolagem permite-te controlar o tempo e o estilo de como os elementos são exibidos, melhorando a experiência do utilizador e o envolvimento com o teu conteúdo.

Publicação Rápida#

Um dos meus requisitos principais é a possibilidade de:

1. Desenhar rapidamente várias páginas de aterragem para otimização de SEO e campanhas de marketing. A rapidez é fundamental.
2. Atualizar frequentemente o conteúdo por minha conta. A tua página de produto deve refletir os desenvolvimentos mais recentes e o posicionamento atual do teu produto. Conteúdo desatualizado significa perder oportunidades de mercado e não estar em sintonia com as necessidades dos teus clientes.

No meu fluxo de trabalho anterior, cada vez que precisava atualizar o conteúdo, tinha de pedir a um engenheiro para fazê-lo ou submeter um pedido de pull eu mesmo. A nossa equipa 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 alteração e clico em publicar, ela é imediatamente refletida na produção ao vivo. Esta capacidade simplificou significativamente o processo, permitindo atualizações rápidas e uma maior autonomia na gestão de conteúdo.

Engenharia#

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

O nosso site atual consiste em 20-30 páginas; algumas são desenvolvidas usando o Framer, enquanto outras são criadas através de métodos tradicionais de desenvolvimento de software. Estamos a avaliar as melhores ferramentas para manter as nossas páginas. Por exemplo, para documentação de desenvolvedores, que é difícil de gerir com o Framer, usar uma framework de documentação amigável para desenvolvedores para hospedar o teu conteúdo é a escolha ideal. No futuro, avaliar-nos-emos as nossas necessidades e decidiremos se continuaremos a hospedar por conta própria ou a transitar completamente para o Framer.

Como isto mudou o nosso fluxo de trabalho#

Transformamos completamente o nosso fluxo de trabalho, tornando a produção de sites de marketing completamente sem esforço. É confiável, fácil de manter, e altamente eficiente.

Escrevi este blog para partilhar as melhores práticas. Se tens experiências com o Framer e projetos de sites bonitos, adoraria ouvir sobre elas. Vamos conversar e aprender uns com os outros.

Agora, é hora de descobrir o nosso produto! Visita-nos em logto.io.