Como construímos sites na Articulate Marketing

Em primeiro lugar, criamos sites do HubSpot CMS. Se você não sabe o que é o HubSpot, não se preocupe. Cabeça aqui para uma introdução fácil. Para aqueles que ainda estão conosco, hoje estamos descrevendo o processo de construção de sites para nossos clientes.

Este artigo é baseado em um de nossos webinars, que foi hospedado por mim, Ioana Negulescu, chefe de estúdio da Articulate Marketing. Você pode ver o vídeo e baixar os slides abaixo:

Desafios de criação de sites

Geralmente, há uma etapa inicial quando se trata de criar um novo site (ou migrar um site existente). Precisamos aliviar alguns medos. Não é incomum ter clientes que foram queimados antes por experiências com agências anteriores.

Quando ouvimos...

'Nós nos preocupamos em ter um novo site porque o último foi uma dor de cabeça.'

Nós fazemos isso...

Já ouvimos isso tantas vezes. Então, nós nos esforçamos para fazer melhor.

Por exemplo, em vez de usar gráficos de Gantt, gostamos de usar marcos . Uma das coisas em que focamos é ter um processo transparente com atualizações contínuas sobre o progresso. Isso dá aos nossos clientes uma sensação de segurança.

Uma coisa que é muito, muito importante para nós durante o processo de web design é isso: videochamadas por e-mail. É importante porque podemos avaliar as reações de nossos clientes. Se eles estiverem um pouco quietos, se estiverem muito animados, e assim por diante. Dessa forma, podemos fazer recomendações que estejam de acordo com suas expectativas. E, claro, também responder a quaisquer perguntas que possam ter.

Quando ouvimos...

'Nós tentamos perseguir o desenvolvedor tantas vezes, eles simplesmente não voltam para nós.'

Nós fazemos isso...

Para marcar o progresso, usamos chamadas regulares de gerenciamento de projetos e as temos no calendário desde o primeiro dia. Durante essas chamadas de gerenciamento de projetos, apresentamos novos trabalhos e identificamos bloqueadores.

Designers e desenvolvedores precisam de tempo para realmente fazer o trabalho, então nem sempre faz sentido para eles atenderem a todas essas chamadas. Nós os trazemos quando é relevante.

Quando ouvimos...

'E se o novo site não atender às nossas expectativas?'

Nós fazemos isso...

Antes de iniciarmos qualquer projeto de design de site, percorremos os fundamentos de sua estratégia de marketing. Isso é muito importante porque é nessa fase que aprendemos sobre os clientes de um cliente, a jornada do comprador e as metas de marketing da empresa. Isso informará muitas decisões estratégicas que tomamos sobre o site, definindo as expectativas desde o início.

Em seguida, passamos para a arquitetura da marca. Aqui, apresentamos os fundamentos do site. As cores, as imagens ou ilustrações, os elementos UX/UI, as fontes - a estética geral do site. Este é um processo extremamente colaborativo. Nossos clientes estão envolvidos em todas as etapas , de modo que suas contribuições e requisitos são incorporados ao produto final.

Um exemplo: HTG

Construímos um site premiado para o HTG, por isso vamos usá-lo como exemplo.

Eles expressaram esses medos e descreveram seus desafios quando falamos com eles pela primeira vez. Estes são problemas bastante comuns entre as empresas de tecnologia B2B:

• Metas ambiciosas de crescimento de negócios
• Site desatualizado (e marca)
• Poucas oportunidades de captura de leads
• Navegação desajeitada
• Experiência do usuário ruim
• Desempenho ruim do site

Se isso soa como você, então vá aqui para pontuar seu site.

O processo articulado

Aqui está o nosso processo, em poucas palavras. Clique nesta imagem para vê-la com mais detalhes:

Vamos voltar ao exemplo do HTG. Com eles, seguimos nosso processo usual de sete etapas:

1. Lançamento

O kick-off é a primeira interação para o projeto do site. Durante essa ligação, tentamos avaliar as preferências de nossos clientes por design e aspirações de marca. Queremos alinhar essas preferências, estrategicamente, com o objetivo final de qualquer site feito pela Articulate: construir um mecanismo de marketing que funcione bem.

2. Moodboards e estrutura do site

Aqui executamos dois processos internos. Uma é montar moodboards, recomendações de fontes, recomendações de cores, imagens e assim por diante.

A outra é que, com nossa equipe de redatores de marketing, reunimos recomendações de mapas do site. Esta é a estrutura da navegação e as páginas que precisaremos construir.

Em seguida, temos uma chamada de revisão do cliente, que é nosso primeiro grande marco. Ao final de cada uma das etapas, temos uma chamada de revisão. Se tudo for aprovado, passamos para a próxima etapa. Se não, voltamos e iteramos.

3. Projetos iniciais e wireframes

Aqui, projetamos a página inicial como forma de mostrar a estética do site. Normalmente, criamos algumas opções diferentes para o cliente escolher. Como projetamos de maneira modular , pensamos nisso como o passo para mostrar como serão alguns dos mais importantes 'tijolos de Lego'.

Em paralelo, criamos estratégias em torno da estrutura da página. Ou seja, que tipo de conteúdo vai para qual página? Quais peças de Lego precisamos?

Nossa equipe então constrói wireframes, que são como esboços das páginas do site sem elementos de design.

4. Projete todos os módulos e escreva o rascunho da cópia da web

Nesta fase, nossa equipe de redatores começa a redigir a cópia enquanto a equipe de design passa a projetar todos os módulos necessários para o site. Nem sempre escrevemos todo o texto nos sites de nossos clientes, mas quando o fazemos, cobramos uma base transparente por página com base em um mapa do site pré-acordado.

5. Desenvolva o site

Para mostrar os designs dos módulos in situ, desenvolvemos e construímos todas as páginas com lorem ipsum copy e imagens placeholder , para que nossos clientes possam ter uma ideia adequada do resultado final.

Ao trabalhar com um desenvolvedor, qualquer desenvolvedor, você deseja fazer algumas perguntas pertinentes:

• Quais são os principais passos que você toma para codificar nosso site?
• Como você garante que o código está organizado? (Um grande problema com sites de modelo.)
• Quando e com que frequência você verifica a velocidade e o desempenho geral?
• Como é a construção de uma página depois que o site é desenvolvido? É uma experiência de usuário amigável para quem cria a página?

Ou se você estiver trabalhando com Articulate, 'Qual é o tempo mais rápido que você resolveu um cubo mágico?' Congratulamo-nos com tais perguntas.

Nosso processo de desenvolvimento começa no Notion, onde planejamos nosso trabalho. Em seguida, definimos o código base para as navegações e alguns módulos globais. Em seguida, preparamos uma lista de verificação de garantia de qualidade para cada elemento de design e funcionalidade que precisamos criar para esse site específico. Isso nos manterá corretos durante toda a construção.

Nós montamos todos os módulos em HTML, então começamos a olhar para o estilo. Então, pense em tijolos, gesso, pintura e decoração.

Durante todo o processo, testamos tudo, verificamos o desempenho e fazemos melhorias. Muitas vezes, aprenderemos a fazer algo melhor e traremos essa experiência para o nosso próximo site.

6. Preencha as páginas

Nesse estágio, após várias iterações e análises de clientes, preenchemos as páginas com textos e imagens aprovados. Nesta fase, o site está quase pronto para o lançamento. Passamos por outra etapa de revisão do cliente e, depois disso, executamos uma lista de verificação completa de controle de qualidade pré-lançamento.

7. Lançamento!

Lançamos e, em seguida, executamos outra lista de verificação de controle de qualidade pós-lançamento, porque é muito importante garantir que o site esteja funcional e que nada tenha sido interrompido da fase de preparação para o lançamento.

Finalmente, claro, comemoramos!

10 dicas para um ótimo design de site

Aqui estão algumas regras que aprendemos ao longo dos anos e em dezenas de construções de sites:

1. Coloque suas preferências em segundo lugar e os pontos problemáticos de suas personas em primeiro lugar.
2. Concentre-se em como você ajuda seus clientes, em vez de apenas listar seus serviços.
3. Não tente reinventar a roda. O que funciona, funciona por uma razão. Por exemplo, focar apenas na área acima da dobra é um mito. Todo mundo sabe rolar. Existe até um site sobre isso: http://abovethefold.fyi/
4. Mantenha a navegação curta e simples.
5. Faça botões orientados por valor. Evite cópias genéricas sempre que possível.
6. Sempre vincule a uma página relevante se existir uma página com mais contexto.
7. Nas páginas-chave, evite ter muitos links externos. (Seu blog é uma história diferente.)
8. Sempre finalize a página com um ou mais CTAs (calls to action), levando o usuário para a próxima etapa do processo.
9. Não subestime o poder de uma página de contato - muitas vezes é um ponto de saída, mas você realmente quer manter as pessoas nessa página.
10. Menos é mais!

Bônus: não deixe o logotipo ditar um design ruim

Quando projetamos o site da HTG, seu logotipo estava desatualizado e não se encaixava mais na marca que estávamos procurando. Nós o modernizamos com algumas mudanças simples:

Aqui está algum alimento para o pensamento. Em nossa era digital, é mais provável que sua marca seja seu site, e não seu logotipo. Então, pense primeiro no site, depois no logo.

O que acontece após o lançamento?

Tudo bem. Você tem um novo site. O que agora? Como dissemos, na Articulate vemos os sites como mecanismos de marketing, portanto, nosso engajamento não precisa terminar no lançamento. Na verdade, esse é apenas o começo da jornada para a maioria de nossos clientes.

Desde a criação de novo conteúdo, como blogs, páginas principais, ofertas fechadas e páginas de 'squeeze', até a execução de rastreamento de comportamento e testes multivariantes, há muito mais que seu site pode fazer.

Sneak peak: Núcleo

Então, como você pode obter um site da HubSpot? Existem algumas opções, como a criação de um site sob medida, mas uma maneira é usar um tema do HubSpot. Nucleus é o tema do Articulate.

Um tema é como um modelo de site muito mais sofisticado. Nosso próprio site é construído no Nucleus, e o usamos para vários clientes com uma enorme variedade de estilos de design. Estamos lançando-o no HubSpot Marketplace em 2022. Com o Nucleus, podemos criar sites altamente otimizados em semanas, até dias, para nossos clientes. É tudo muito emocionante!

>> Clique aqui para explorar o Núcleo <<