Omoda Dinamarca
Resumen del Caso
Omoda Dinamarca es la presencia digital oficial de la marca automotriz Omoda en el mercado danés. Sirve como un showroom en línea moderno e interactivo diseñado para presentar el Omoda 5 EV a los consumidores daneses. La plataforma combina una presentación de contenido rica con profundidad técnica, actuando tanto como herramienta de marketing como puente funcional entre compradores potenciales y concesionarios locales.
Objetivo: El objetivo principal es construir reconocimiento de marca para Omoda como un nuevo participante en el mercado danés de vehículos eléctricos, mientras se exhiben claramente la tecnología y características del vehículo. Más allá del reconocimiento, el sitio está diseñado para convertir visitantes en prospectos calificados ofreciendo herramientas de interacción con concesionarios eficientes y sin fricciones — desde formularios de consulta hasta solicitudes de prueba de manejo.
Información Clave del Proyecto
Industrias
Automotriz, Vehículos Eléctricos (EV), Redes de Venta y Concesionarios — el proyecto soporta a una marca automotriz global que entra a un nuevo mercado regional con una presencia digital totalmente localizada.
Servicios
Desarrollo Web, Integración de CMS Headless, Desarrollo Backend Personalizado (capa proxy), Ingeniería Frontend, Ingeniería de Localización, Consultoría Técnica en arquitectura para escalabilidad multi-marca.
Soluciones
CMS Headless desacoplando contenido de presentación, monorepo que permite múltiples sitios de marcas en una sola base de código, vista previa en vivo para editores, formularios dinámicos con lógica condicional, barra lateral en la app mostrando contenido del CMS.
Tecnologías
Umbraco CMS (gestión de contenido), NestJS (capa proxy/API backend), Next.js (renderizado y enrutamiento frontend), Tailwind CSS (sistema de estilos), TanStack Forms (gestión de estado y validación de formularios).
Los Desafíos
Renderizado Dinámico de Contenido
Renderizar bloques y páginas de contenido flexible de Umbraco dinámicamente dentro de un frontend Next.js, sin sacrificar rendimiento o flexibilidad para los editores.
Lógica Condicional de Formularios
Construcción de formularios multi-paso con renderizado condicional de campos y reglas estrictas de validación para soportar generación de leads y flujos de trabajo de concesionarios.
Integración de Vista Previa en Vivo
Conexión del modo de vista previa nativa de Umbraco a una app Next.js desacoplada, incluyendo acceso autenticado seguro para usuarios admin/editor y edición de contenido sin interrupciones.
Arquitectura Monorepo
Estructurar una base de código compartida que permite a múltiples sitios de marca reutilizar componentes, lógica de renderizado y APIs mientras mantienen diseños y marcas distintas.
Soporte Multilenguaje
Proveer localización completa a través del sistema de Diccionario de Umbraco combinado con enrutamiento Next.js sensible a la localización y cambio de idioma perfecto.
El Proceso
Así fue como el equipo abordó la construcción de la plataforma desde cero, paso a paso.
Configuración de Arquitectura
Se estableció una arquitectura headless emparejando Umbraco CMS como backend de contenido con Next.js como frontend, usando NestJS como una capa proxy/API dedicada entre ambos.
Fundación Monorepo
Se diseñó una estructura monorepo para que múltiples sitios de marca pudieran compartir componentes, lógica de renderizado y APIs desde una única base de código mantenible.
Sistema de Bloques de Contenido
Se construyó el motor de renderizado dinámico que permite a los editores componer páginas con bloques de contenido reutilizables de Umbraco sin intervención de desarrolladores.
Canal de Vista Previa
Se implementó la función de vista previa en vivo, enlazando el modo de vista previa nativa de Umbraco con la capa de renderizado de Next.js con acceso autenticado para administradores.
Desarrollo del Motor de Formularios
Se desarrollaron formularios avanzados para captura de leads con lógica condicional de campos y validación usando TanStack Forms para requisitos de negocio complejos.
Integración en Barra Lateral
Se construyó el módulo de barra lateral para mostrar páginas completas y formularios de Umbraco dentro del sitio, manteniendo herramientas de concesionarios accesibles sin interrumpir la experiencia principal.
Soluciones
Características Clave de la Solución
Arquitectura CMS Headless: Se desacopló Umbraco de Next.js, dando flexibilidad a los editores mientras se mantiene un frontend moderno.
Configuración Monorepo Escalable: Base de código compartida permitiendo que Omoda y futuros sitios de marca lancen mercados nuevos más rápido.
Canal de vista previa en vivo: Vista previa funcional para editores de contenido, cerrando la brecha entre CMS sin cabeza y frontends desacoplados.
Motor de Formularios Inteligentes: Formularios de múltiples pasos validados que mejoran la calidad de los leads y reducen la deserción en consultas.
Gestión de Tareas: Asignación, seguimiento y calificación de tareas de forma sencilla.
Módulo de Barra Lateral Integrado: Muestra páginas y formularios del CMS en contexto, manteniendo accesibles las herramientas del concesionario.
Resultados en Números
35%
Mejora en la finalización de formularios motivada por lógica condicional y reducción de fricciones.
40%
Renderizado más rápido gracias a la arquitectura sin cabeza de Next.js + Umbraco.
50%
Nuevos sitios de marcas/mercados pueden lanzarse más rápido usando el monorepo compartido.
30%
Tiempo de publicación reducido gracias a la vista previa en vivo y bloques de contenido reutilizables.
25%
Menor abandono debido a pasos de formulario más inteligentes y renderizados condicionalmente con mejor guía al usuario.
20%
Incremento del compromiso de visitantes nórdicos no daneses gracias al soporte multilingüe.
