Omoda Dinamarca
Visão Geral do Caso
Omoda Dinamarca é a presença digital oficial da marca automóvel Omoda no mercado dinamarquês. Serve como uma vitrine online moderna e interativa desenhada para apresentar o Omoda 5 EV aos consumidores dinamarqueses. A plataforma combina uma apresentação rica de conteúdos com profundidade técnica, atuando tanto como uma ferramenta de marketing como uma ponte funcional entre potenciais compradores e concessionárias locais.
Objetivo: O objetivo principal é construir o reconhecimento da marca Omoda como um novo participante no mercado dinamarquês de veículos elétricos, ao mesmo tempo que apresenta claramente a tecnologia e as funcionalidades do veículo. Para além do reconhecimento, o site foi construído para converter visitantes em leads qualificados, oferecendo ferramentas simplificadas e de baixo atrito para interação com concessionárias — desde formulários de consulta a pedidos de test drive.
Informações Chave do Projeto
Indústrias
Automóvel, Veículos Elétricos (EV), Redes de Retalho e Concessionárias — o projeto apoia uma marca automóvel global a entrar num novo mercado regional com uma presença digital totalmente localizada.
Serviços
Desenvolvimento Web, Integração Headless CMS, Desenvolvimento Customizado de Backend (camada proxy), Engenharia de Frontend, Engenharia de Localização, Consultoria Técnica sobre arquitetura para escalabilidade multi-marca.
Soluções
Headless CMS desacoplando conteúdo da apresentação, monorepo permitindo múltiplos sites de marcas numa única base de código, pré-visualização ao vivo para editores, formulários dinâmicos com lógica condicional, barra lateral in-app exibindo conteúdo do CMS.
Tecnologias
Umbraco CMS (gestão de conteúdo), NestJS (camada proxy/API backend), Next.js (renderização e roteamento frontend), Tailwind CSS (sistema de estilos), TanStack Forms (gestão e validação de estado de formulários).
Os Desafios
Renderização Dinâmica de Conteúdo
Renderizar blocos flexíveis de conteúdo Umbraco e páginas dinamicamente dentro do frontend Next.js, sem sacrificar performance ou flexibilidade para os editores.
Lógica Condicional de Formulários
Construir formulários multi-etapas com renderização condicional de campos e regras rígidas de validação para suportar produtividade de geração de leads e fluxos de trabalho de concessionárias.
Integração de Pré-visualização Ao Vivo
Conectar o modo de pré-visualização nativo do Umbraco a uma app Next.js desacoplada, incluindo acesso seguro autenticado para utilizadores administradores/editores e edição de conteúdo fluida.
Arquitetura Monorepo
Estruturar uma base de código compartilhada que permita a múltiplos sites de marcas reutilizar componentes, lógica de renderização e APIs, mantendo designs e branding distintos.
Suporte Multilíngue
Fornecer localização completa através do sistema de Dicionário do Umbraco combinado com roteamento Next.js consciente de localização e troca de idioma fluida.
O Processo
Aqui está como a equipa abordou a construção da plataforma desde o início, passo a passo.
Configuração da Arquitetura
Estabeleceu uma arquitetura headless unindo o Umbraco CMS como backend de conteúdo com o Next.js como frontend, usando NestJS como camada proxy/API dedicada entre os dois.
Fundação do Monorepo
Desenhou uma estrutura monorepo para que múltiplos sites de marcas pudessem partilhar componentes, lógica de renderização e APIs a partir de uma única base de código mantida.
Sistema de Blocos de Conteúdo
Construiu o motor de renderização dinâmica que permite aos editores compor páginas a partir de blocos reutilizáveis de conteúdo Umbraco sem envolvimento do desenvolvedor.
Pipeline de Pré-visualização
Implementou a funcionalidade de pré-visualização ao vivo, ligando o modo de pré-visualização nativo do Umbraco à camada de renderização Next.js com acesso autenticado de administrador.
Desenvolvimento do Motor de Formulários
Desenvolveu formulários avançados para captura de leads com lógica condicional de campos e validação utilizando TanStack Forms para requisitos empresariais complexos.
Integração da Barra Lateral
Construiu o módulo da barra lateral para exibir páginas e formulários completos do Umbraco dentro do site, mantendo as ferramentas da concessionária acessíveis sem interromper a UX principal.
Soluções
Principais Funcionalidades da Solução
Arquitetura Headless CMS: Desacoplou o Umbraco do Next.js, dotando os editores de flexibilidade enquanto mantém o frontend moderno.
Configuração Escalável do Monorepo: Base de código partilhada que permite à Omoda e futuros sites de marcas lançar novos mercados mais rapidamente.
Pipeline de Pré-visualização Ao Vivo: Pré-visualização funcional para editores de conteúdo, ligando o CMS headless aos frontends desacoplados.
Motor Inteligente de Formulários: Formulários validados em múltiplas etapas que melhoram a qualidade dos leads e reduzem a desistência nas consultas.
Gestão de Tarefas de Casa: Facilidade na atribuição, acompanhamento e avaliação das tarefas de casa.
Módulo de Barra Lateral Incorporado: Exibe páginas e formulários do CMS em contexto, mantendo as ferramentas da concessionária acessíveis.
Resultados em Números
35%
Melhora na conclusão de formulários impulsionada pela lógica condicional e menor atrito.
40%
Renderização mais rápida graças à arquitetura headless Next.js + Umbraco.
50%
Novos sites de marca/mercado podem ser lançados mais rapidamente usando o monorepo partilhado.
30%
Tempo de publicação reduzido graças à pré-visualização ao vivo e blocos de conteúdo reutilizáveis.
25%
Menor desistência devido a passos de formulário mais inteligentes, renderizados condicionalmente e com orientação melhorada ao utilizador.
20%
Aumento do envolvimento de visitantes nórdicos não dinamarqueses através de suporte multilíngue.
