Projeto Fafinstala

Visão Geral

CLIENTE

Fafinstala
Gafanha da Encarnação - Portugal

DURAÇÃO

4 semanas

MEU PAPEL

UX/UI Designer - Web Designer

Tecnologias/Ferramentas

Figma - WordPress -CSS

Desafio

O principal desafio era realizar o redesign completo do website da Fafinstala, uma vez que a versão existente não refletia a qualidade dos serviços. O objetivo fundamental era tornar o site mais profissional e moderno, ao mesmo tempo que transmitisse confiança e expertise técnica.

Objetivo

Desenvolver um website customizado e moderno, utilizando o WordPress, para criar um design diferenciado, profissional e que transmitisse a confiança e a expertise técnica da Fafinstala. O foco principal era converter o interesse em contactos qualificados, distinguindo a empresa de forma clara da concorrência no setor de instalações e manutenção.

Processo de Design

Descoberta

O principal objetivo desta fase foi compreender profundamente o negócio e o seu mercado, identificando as necessidades dos utilizadores e as falhas do website existente, para que o redesign fosse baseado em dados e não em suposições.

Arquitetura da Informação

A Arquitetura da Informação foi a fase crítica que se seguiu à Descoberta, visando estruturar o conteúdo do website de forma a otimizar a conversão de interesse em contacto, dada a natureza técnica e a diversidade dos serviços. A prioridade foi simplificar a navegação e garantir a visibilidade imediata dos elementos que geram confiança e credibilidade no setor de instalações. Para tal, foi decidido priorizar a apresentação clara dos serviços chave e a inclusão imediata de provas de credibilidade (como a experiência da empresa, testemunhos e os logotipos de clientes de referência), evitando sobrecarregar o utilizador com informações excessivas. Essa abordagem permitiu desenvolver um fluxo de utilizador simples e eficaz, resolvendo o problema central de garantir que potenciais clientes encontrassem rapidamente a informação técnica necessária e fossem guiados ao formulário de contacto.

Wireframes

A fase de Wireframes concentrou-se em esboçar a estrutura e o layout de cada página do site em low-fidelity (baixa fidelidade). O principal objetivo foi validar a hierarquia do conteúdo e a usabilidade antes de aplicar o design visual.
O resultado desta fase foi um esqueleto funcional do website que validou o fluxo do utilizador e a distribuição do conteúdo, assegurando que a funcionalidade e a conversão seriam priorizadas no design final.

Mockups

Com o Guia de Estilo definido, o passo seguinte foi aplicar essa linguagem visual na estrutura dos wireframes para criar os mockups. Utilizando o Figma, foram construídas as telas finais, garantindo que cada elemento de UI estivesse perfeitamente integrado e responsivo. O foco nesta fase foi refinar a hierarquia visual, garantir a leitura clara e a apresentação dos serviços e, acima de tudo, maximizar o impacto das imagens, preparando o design para a fase de desenvolvimento.

Processo de Desenvolvimento

Escolha da Tecnologia

Para a implementação do redesign, mantivemos o WordPress como o Sistema de Gestão de Conteúdos (CMS). Esta foi uma escolha estratégica para garantir a facilidade de gestão e atualização do conteúdo por parte do cliente, sem necessidade de conhecimento técnico avançado.
O desenvolvimento do template foi executado para assegurar a responsividade mobile-first e a integridade visual do design em todos os dispositivos. A solução final concentrou-se em performance, facilidade de manutenção e na otimização das taxas de conversão para pedidos de orçamento.

Desafios Técnicos

O principal desafio estava relacionado com a performance, devido a utilização de plugins. Neste sentido, foi realizada a otimização da base de dados e remoção de plugins desnecessários, bem como a configuração de um sistema de caching no WordPress, garantindo performance sem sacrificar a qualidade visual.

Personalização do CMS

Para atender ao redesign foi criado um Tema Filho (Child Theme) e para os artigos do Blog foi criado um template. Foi utilizado CSS para criar estilos customizados (nos cards do blog), garantindo que a estrutura responsiva fosse mantida, resultando numa tradução fiel e eficiente do design.

Resultado Final

O Detalhe que faz a diferença

No redesign do website, o detalhe crucial foi a criação de uma interface intuitiva e simples que servisse como prova de confiança e profissionalismo. A prioridade não foi apenas a estética, mas garantir que a usabilidade e a clareza da informação fossem máximas. Isto resultou numa navegação lógica, onde o utilizador encontra os serviços e as provas de credibilidade (clientes, experiência) sem esforço. Este foco na clareza da Arquitetura da Informação transformou a experiência do utilizador, levando a uma conversão mais eficaz de visitantes em pedidos de contacto qualificados.

Lições Aprendidas

Em websites de serviços técnicos, o design é um fator de credibilidade. Priorizar a Arquitetura da Informação (AI) para destacar imediatamente as provas de confiança (experiência, clientes de referência) é crucial para guiar o utilizador diretamente ao pedido de contacto.