Redesign do website de software ERP
Empresa:
Alternativa Sistemas
Ano:
2024-2025
Atualização do website institucional de uma empresa de ERP desde o pré‑projeto até o código.
O projeto foi executado como uma extensão técnica do meu escopo principal, focada na aplicação de UI e Front-end para suprir uma demanda de atualização da interface da empresa.
Resultando num website atualizado e alinhado com a identidade e posicionamento atual da marca.
Contexto
Website sem atualizações recentes
A Alternativa Sistemas, empresa desenvolvedora do Master ERP, identificou a necessidade de realizar um redesign estratégico de seu website institucional.
O objetivo central é reposicionar as marcas com base na identidade visual mais recente, estabelecendo uma hierarquia de marca evidente que coloque o Master ERP como produto principal, prevendo o acréscimo de novos produtos.
Auditoria do website
A estratégia de marketing, focada em anúncios e redes sociais, recebeu uma atualização de identidade visual. No entanto, o material de inbound e as propriedades institucionais não foram atualizados, resultando em uma comunicação visual fragmentada e destoante da estratégia atual.
| Problema | Impacto |
|---|---|
| Identidade visual diferente dos anúncios | Identidade de marca inconsistente |
| Uso de 8 paleta de cores | Falta de hierarquia e consistência visual |
| Layout mobile repetitivo e defasado | Baixa performance mobile |
| Blog com diferentes tamanhos de imagem de banners | Criação de 5 imagens para cada postagem |
Visual e conteúdo desatualizado
8 identidades visuais sem hierarquia
Versão mobile repetitiva e defasada
Abordagem
Duplo diamante
Metodologia de desenvolvimento focada nos objetivos de negócio.
Expansão das possibilidades identificando os websites existentes dos concorrentes. Definindo a estrutura da arquitetura do website adequada para os objetivos.
Desenvolvimento de protótipos para validação das ideias. Execução do projeto definido pelos mockups finais.
Benchmarking
Website de 20 concorrentes diretos e indiretos definidos pela diretoria analisados nos seguintes quesitos:
- Paleta: uso de cores principais e secundárias no design do website.
- Tipografia: Uso de tipografias para banners, títulos, subtíutulos, parágrafos e botões.
- Grafismos: Uso de imagens para ilustrar elementos.
- Posicionamento: mapeamento de posicionamento de marca e produto dos concorrentes.
Achados
- Paleta: 4 paletas similares. Azul é utilizado em tipografias e botões, amarelo como cor de destaque e fundo branco.
- Tipografia: majoritariamente sans-serif com uso de apenas uma fonte.
- Grafismos: destaque na combinação de imagens com formas que remetem ao logo e utilização de telas dos programas.
- Posicionamento: posicionamento atual da marca não conflita com nenhum concorrente.
Sitemap
Estruturação das páginas e seções de conteúdo do website que antes possuia apenas um nível hierarquico e inúmeras identidades visuais.
Aproveitamento de conteúdo pré existente em materiais institucionais recentemente atualizados.
- Página de contato ser disponível em um clique a partir de qualquer página;
- Definição de uma hierarquia clara entre a marca da empresa e de seu produto principal;
- Simplificação das diferentes identidades visuais para complementos e funcionalidades do produto;
- Estrutura que permite a escalabilidade com a adição de novos produtos.
Insight
Priorizar contato comercial na página de contato em vez de apenas focar no suporte.
Wireframes
O foco dessa etapa foi definir os elementos de navegação contextual para diferenciar os ambientes direcionados a instituição dos do produto.
Exploração de formas de utilizar a elípse do logo para criar elementos visuais que reforcem a identidade da marca.
Insight
Diferenciação de elementos da marca.
Mockups
Aplicação da identidade visual atualizada nos elementos das telas.
Customização de UI Kit de Bootstrap no Figma para padronização de componentes.
Direção de arte das imagens do website para a designer gráfica responsável.
Oportunidade
Utilizar azul como cor de fundo, visto que no benchmarking, empresas com paletas similares utilizam apenas o branco.
Resultado
Atualização do website de acordo com o posicionamento atual da empresa.
O projeto resultou em uma plataforma escalável que unifica a presença institucional e o ecossistema do produto.
A implementação técnica priorizou a performance e a autonomia na gestão de conteúdo através de uma arquitetura modular.
Website responsivo
Utilização do framework Bootstrap para o desenvolvimento do website a partir de uma versão personalizada customizada via Sass.
Inserção de Header, Footer e listas de parceiros, clientes e funcionalidades através de PHP para construção do HTML.
Atualização do tema do blog Wordpress para se adequar a nova identidade do website.
Baixa manutenção
Para atualizar o conteúdo basta editar o objeto do JSON que contenha o respectivo grupo de informações.
Métricas pós lançamento
Após três meses de implantação, os dados indicam um desempenho positivo nas principais métricas de uso.
A implementação da nova arquitetura de informação e o refinamento da interface impactaram diretamente a retenção de público.
Reconhecimento interno
O projeto foi validado internamente como uma entrega de alto impacto, resultando em um reconhecimento por mérito e bonificação.
| Métrica | Resultado |
|---|---|
| Tempo médio na pagina | +83% |
| Visualizações | +89% |
| Usuários no site | +40% |
| Visualizações por usuário | +44% |
Avaliação dos resultados
A correlação entre o aumento da permanência e a profundidade de navegação confirma a eficácia da nova hierarquia na exploração do website.