Um site serve como uma porta de entrada crucial para novas oportunidades de negócios. Construir um novo site ou redesenhar um pode ser uma jornada desafiadora. Após liderar a reformulação do site da minha empresa, resolvi compartilhar um pouco da nossa jornada. Se você está pensando em construir um novo site ou redesenhar o atual, esperamos que isso o ajude, tornando sua jornada mais tranquila.

Avaliação

Nosso site é uma importante porta de entrada para novos negócios para nós. Sendo uma boutique de desenvolvimento web, a forma como nos apresentamos online diz muito sobre o nosso trabalho e o que os clientes podem esperar ao trabalhar connosco.

Assim que decidimos que queríamos criar um novo site que combinasse com nossa nova marca, ficou claro para nós que tínhamos que seguir o que falamos e mostrar aos nossos clientes e público um site de boa qualidade. Nossa equipe pensou muito e esforçou-se na fase de preparação antes de começar a trabalhar.

• Começamos com uma pergunta simples: Por que precisamos de um site ou de um redesenho? Essa é uma excelente forma de manter o foco em seus objetivos e evitar se desviar.
• Depois de entendermos o porquê, passamos pelo processo de identificação de nosso público-alvo. Para quem estávamos construindo este site. É essencial entender claramente quem você está tentando alcançar e o que deseja que eles saibam sobre sua marca e seu trabalho.
• Começamos então a pensar na Mensagem que queríamos passar para aquele público, como queríamos ser vistos e, o mais importante, como poderíamos provar que éramos bons no que fazemos. Grande parte desta mensagem foi pensada durante a criação da marca (Veja como criamos a nossa nova marca ), e tivemos que transmiti-la para o novo site.
• Como já tínhamos presença online, dedicamos algum tempo para avaliar nosso antigo site e listar os recursos e aspectos que achamos que estavam funcionando bem e o que sentimos que estava faltando.
• Também foi muito importante em todo este processo o acompanhamento de um Benchmark da Concorrência para tentar perceber o que as empresas do nosso setor estavam a fazer. Também procuramos outros tipos de sites para obter referências e inspiração. Isso nos deu alguns insights valiosos e nos ajudou a evitar a repetição de erros ou a perda de recursos essenciais.
• A etapa final desta fase de preparação foi a Lista de Funcionalidades e Funcionalidades que queríamos ter no nosso site. Foi como criar uma lista de desejos, como se pudéssemos fazer tudo o que quiséssemos. A lista foi posteriormente priorizada e selecionamos os recursos que eram OBRIGATÓRIOS e os que eram NICE TO TER que poderiam ser implementados posteriormente. É importante focar primeiro nos elementos mais críticos.

Algumas dessas etapas foram realizadas em conjunto com toda a equipe. Sendo uma equipe pequena, queríamos que todos estivessem envolvidos nesse processo até certo ponto. Após essa primeira avaliação, começamos a dividir e conquistar e contamos com equipes dedicadas responsáveis por transformar nosso novo site em realidade.

Projeto

Ficamos entusiasmados em mergulhar no processo de design do nosso projeto web. UI/UX Design é um aspecto crítico de qualquer projeto web. Tivemos uma equipe multidisciplinar envolvida, mas o designer foi a estrela do espetáculo, responsável por criar a representação visual da mensagem que queríamos passar ao nosso público.

Foi fundamental que o designer entendesse claramente as necessidades e expectativas do projeto para transmitir visualmente a nossa mensagem e estruturar o conteúdo de acordo. Nosso objetivo era um design conciso e envolvente com o tom certo.

Durante esta fase do projeto, seguimos estas etapas:

• Adotamos uma abordagem centrada no usuário desde o início. Nós nos concentramos em como nosso público-alvo nos perceberia e interagiria conosco. É por isso que começamos trabalhando na Arquitetura da Informação, decidindo as páginas, seções e componentes necessários e criando um primeiro rascunho da cópia.
• Em seguida, criamos wireframes de baixa fidelidade para fornecer uma representação aproximada e de baixa fidelidade do layout e da funcionalidade. Isso nos permitiu testar e experimentar ideias antes de investir muito tempo e esforço no design. Também consideramos o fluxo geral do usuário nesta fase.
• Esta fase foi crítica, pois lançou as bases para todo o cenário de componentes a serem utilizados: a criação de um Design System. Construímos uma biblioteca usando Figma que incluía padrões de design, diretrizes e exemplos. Esta biblioteca era uma fonte única de verdade, garantindo a coerência entre todos os elementos da UI e estabelecendo as bases para a escalabilidade ao introduzir novos componentes.
• Definido o design system, construímos os layouts em Alta Fidelidade. Aplicamos a UI aos wireframes lo-fi criados até então. Nesta fase, o design foi totalmente testado quanto à conformidade com os requisitos de acessibilidade, e tiramos conclusões mais refinadas em relação à exibição do conteúdo.

Utilizamos o Figma em todo o processo, o que facilitou a colaboração com a equipe e a realização de iterações. Depois de algumas iterações, tivemos uma versão ideal na qual nossos desenvolvedores puderam trabalhar.

Desenvolvimento

Nós nos concentramos na seleção da pilha de tecnologia e na implementação dos designs na fase de desenvolvimento do projeto. Trabalhamos em sprints baseados em um product backlog com histórias de usuários criadas pelo nosso gerente de projetos.

Escolhendo a pilha de tecnologia

À medida que a fase de design avançava, investigamos quais tecnologias melhor se adequavam ao site que queríamos construir. Nossos desenvolvedores conseguiram determinar isso com base nos resultados das fases anteriores.

Escolher a pilha de tecnologia certa tornou-se mais importante do que nunca no mundo de hoje, pois há muitas opções disponíveis. Consideramos diversos critérios, como requisitos do projeto, expertise da equipe, disponibilidade de recursos, custos, desempenho, segurança e escalabilidade.

Queríamos um site simples, rápido e bonito para este projeto.

Adotamos uma abordagem modular, dividindo os componentes, recursos e funcionalidades do site em componentes menores e reutilizáveis. Essa abordagem nos permitiu reutilizar componentes em diferentes partes do site, facilitando a colaboração entre desenvolvedores e designers, facilitando o teste e a manutenção do que foi desenvolvido e, em última análise, permitindo um melhor desempenho e tempos de carregamento de página reduzidos.

Nossos desenvolvedores defenderam o Astro , uma estrutura web completa para sites rápidos e focados em conteúdo. Eles estavam ansiosos para experimentar a estrutura focada em conteúdo mais rápida que existe. Três coisas chamaram a atenção de nossa equipe: renderização no servidor, resultados de desempenho e flexibilidade.

Com o site simples que buscávamos, não precisávamos de um Sistema de Gerenciamento de Conteúdo (CMS) completo, mas queríamos permitir que membros não técnicos da equipe trabalhassem no site. Pesquisamos extensivamente diferentes opções de CMS e finalmente escolhemos o Sanity devido aos seus recursos robustos e facilidade de uso. Sanity também tinha ótima documentação e um nível gratuito muito generoso.

Além do Astro e do Sanity, também decidimos usar o Netlify para o nosso projeto. Bem, sempre fazemos. Os recursos contínuos de implantação e hospedagem do Netlify geralmente são nossa rede de distribuição de conteúdo (CDN) preferida. Também usamos várias bibliotecas para animações, que discutiremos com mais detalhes em outra postagem do blog (em breve).

Um aspecto a melhorar foi o formulário que criamos para que potenciais clientes nos contatassem. Utilizamos o formulário do Netlify, que acabou não sendo a melhor opção devido a problemas do Forms com o Astro. Encontramos uma solução (hot-fix) e criamos uma única página para nosso formulário de contato. Ainda estamos considerando como mudar isso para o futuro.

Processo de desenvolvimento

Antes de iniciar a fase de desenvolvimento, o gerente do projeto criou um backlog de produto com detalhes de todos os recursos e funcionalidades a serem construídas pela equipe. Essas histórias de usuários tornaram o processo de desenvolvimento tranquilo e transparente. Antes de construir o site, a equipe teve que priorizar os recursos e funcionalidades que fariam parte da primeira entrega do site.

Para o repositório de código, usamos GitHub (GH) e utilizamos seus painéis de gerenciamento de projetos e recursos de planejamento de sprint. GH geralmente é nossa escolha para sistema de controle de versão, mas começamos a usar o Notion Projects e estamos adorando para gerenciamento de projetos.

Começamos a implementar os designs. Seguimos a metodologia ágil e trabalhamos em sprints para garantir que estávamos no caminho certo e entregando resultados dentro dos prazos definidos. Uma pequena observação: este foi um projeto interno e nossa principal prioridade foram os projetos de nossos clientes. Isso significa que os sprints aconteceriam logo após nossa equipe fazer uma pausa em outros projetos. Normalmente não é assim que trabalhamos, mas foi assim que conseguimos e uma lição aprendida para não repetir.

Outro ponto crítico para tornar todo o processo de desenvolvimento transparente e ágil foi ter um link de staging desde o início do projeto. Todos os envolvidos no projeto tiveram acesso a ele e pudemos acompanhar o progresso, dar feedback e fazer alterações e pequenas adaptações quando achamos necessário.

Durante a fase de desenvolvimento, a equipe de marketing pôde começar a inserir conteúdo. Isso os ajudou a se acostumar com a Sanidade e contribuiu para rodadas de feedback mais realistas. No geral, a fase de desenvolvimento foi um esforço colaborativo que envolveu toda a equipe trabalhando em conjunto para atingir os objetivos do projeto.

Garantia da Qualidade

Durante o desenvolvimento, um ou dois desenvolvedores testaram todos os recursos e funcionalidades. Todo o código passou por code review e, no final, fizemos um sprint final para testar e garantir que o site estava funcionando como deveria.

Os testes de usabilidade e acessibilidade já foram feitos durante a fase de design, conforme descrito acima. Para testes gerais, utilizamos as histórias de usuários e os critérios de aceitação criados pelo nosso gerente de projeto para nos orientar.

• Teste funcional: confirme se todos os recursos estavam funcionando conforme o esperado.
• Teste de desempenho: verifique a velocidade de carga e outras pontuações usando o Lighthouse.
• Teste entre navegadores e dispositivos: teste o site em vários navegadores (por exemplo, Chrome, Firefox, Safari, Edge) e dispositivos (desktop, celular, tablet) para garantir compatibilidade e uma experiência de usuário consistente. Para isso, utilizamos o BrowserStack . Seu produto é muito intuitivo de usar e permite muitos testes.

Preparação para entrada em operação

Estávamos todos prontos para colocar o site no ar no link de teste, mas antes de prosseguirmos, duas coisas cruciais tiveram que ser consideradas cuidadosamente: o redirecionamento para o novo domínio e o SEO. Como planejamos mudar o domínio, foi crucial garantir que nossa classificação de SEO não fosse afetada.

Portanto, decidimos usar redirecionamentos 301 para informar aos mecanismos de pesquisa e navegadores que o URL original foi substituído permanentemente por um novo. Aqui está o que fizemos:

• Lista de todas as páginas do site atual:
• Se a estrutura do URL de uma página foi mantida a mesma, confirme se o redirecionamento 301 estava funcionando.
• Quando o URL da página antiga não estiver no novo site, crie um redirecionamento para a página mais apropriada.
• Liste as páginas indexadas no Google para garantir que tivemos redirecionamentos para todas elas.
• Use o Netlify para redirecionar tudo, seguindo as etapas em seu Documentação Netlify .
• Notifique o Google sobre a mudança no console Mudança de endereço ferramenta.
• Peça ao Google para reindexar o novo domínio para que as páginas antigas não apareçam. Isso foi feito diretamente no Google Console, seguindo as etapas disponíveis no Documentação do console do Google.

Por último, mas definitivamente não menos importante, dedicamos um tempo para garantir que consideramos as melhores práticas para uma melhor classificação de SEO e identificamos o que precisava ser melhorado. A equipe de marketing fez questão de seguir o seguinte:

• Para otimizar o novo site para palavras-chave relevantes que buscam uma classificação mais elevada nos resultados de pesquisas e atrair tráfego orgânico, seguimos com uma pesquisa por palavras-chave usando ferramentas como Google Keyword Planner ou SEMrush para descobrir palavras-chave populares e menos competitivas
• Tentamos, tanto quanto possível, otimizar meta tags de título e meta descrições em cada página da web, incorporando palavras-chave relevantes e frases de chamariz atraentes para motivar os usuários a clicar nas páginas de resultados de mecanismos de pesquisa (SERPs)
• Garantiu que os URLs fossem limpos, concisos e incluíssem palavras-chave direcionadas
• Texto alternativo: forneça texto alternativo descritivo para imagens, utilizando palavras-chave quando apropriado
• Confirme a otimização do Page Speed (com a pilha que usamos, foi difícil não ter um ótimo resultado aqui).

Resultado

Bem, foi uma longa jornada até colocarmos nosso site no ar. Mas adivinhe? O trabalho continuou após o lançamento.

A primeira fase foi uma base sólida para o que queríamos alcançar. Construí-lo em uma abordagem modular também nos deu flexibilidade para iterar, alterar e adaptar o site às novas tendências e necessidades. Estamos felizes com o resultado e orgulhosos de como chegamos até aqui. Esperamos que, ao compartilhar nossa jornada, você saiba o que esperar ao construir um novo site ou redesenhar um.

Para resumir tudo o que compartilhamos aqui, preparamos uma pequena folha de dicas para que você possa usar em seu projeto.