Omoda Danimarca
Panoramica del caso
Omoda Danimarca è la presenza digitale ufficiale per il marchio automobilistico Omoda nel mercato danese. Funziona come una vetrina online moderna e interattiva progettata per introdurre l'Omoda 5 EV ai consumatori danesi. La piattaforma combina una ricca presentazione di contenuti con profondità tecnica, fungendo sia da strumento di marketing che da ponte funzionale tra potenziali acquirenti e concessionarie locali.
Obiettivo: L'obiettivo principale è costruire la consapevolezza del marchio Omoda come nuovo entrante nel mercato danese dei veicoli elettrici, mostrando chiaramente la tecnologia e le caratteristiche del veicolo. Oltre alla consapevolezza, il sito è progettato per convertire i visitatori in lead qualificati offrendo strumenti di engagement con le concessionarie snelli e a bassa frizione — dai moduli di richiesta alle richieste di test drive.
Informazioni chiave sul progetto
Settori
Automotive, veicoli elettrici (EV), retail e reti di concessionarie — il progetto supporta un marchio automobilistico globale che entra in un nuovo mercato regionale con una presenza digitale completamente localizzata.
Servizi
Sviluppo Web, integrazione Headless CMS, sviluppo backend personalizzato (livello proxy), ingegneria frontend, ingegneria della localizzazione, consulenza tecnica sull'architettura per la scalabilità multi-brand.
Soluzioni
Decoupling Headless CMS dei contenuti dalla presentazione, monorepo che consente più siti di marchio su un'unica base di codice, anteprima live per gli editor, moduli dinamici con logica condizionale, barra laterale in-app che mostra contenuti CMS.
Tecnologie
Umbraco CMS (gestione contenuti), NestJS (livello proxy/API backend), Next.js (rendering e routing frontend), Tailwind CSS (sistema di styling), TanStack Forms (gestione stato moduli e validazione).
Le sfide
Rendering dinamico dei contenuti
Rendering dinamico di blocchi e pagine di contenuto Umbraco flessibili all'interno di un frontend Next.js, senza sacrificare le prestazioni o la flessibilità per gli editor.
Logica condizionale dei moduli
Creazione di moduli multi-step con rendering condizionale dei campi e regole di validazione rigorose per supportare flussi di lavoro di generazione lead e concessionarie.
Integrazione dell'anteprima live
Collegamento della modalità anteprima nativa di Umbraco a un'app Next.js decouple con accesso sicuro autenticato per utenti admin/editor e modifica seamless dei contenuti.
Architettura Monorepo
Strutturazione di una base di codice condivisa che consente a più siti di marchio di riutilizzare componenti, logica di rendering e API mantenendo design e branding distinti.
Supporto multilingue
Fornitura di una localizzazione completa tramite il sistema Dizionario di Umbraco combinato con routing locale-aware di Next.js e cambio lingua senza interruzioni.
Il processo
Ecco come il team ha affrontato la costruzione della piattaforma da zero, passo dopo passo.
Configurazione dell'architettura
Stabilita una architettura headless abbinando Umbraco CMS come backend dei contenuti a Next.js come frontend, utilizzando NestJS come livello proxy/API dedicato tra di loro.
Fondazione Monorepo
Progettata una struttura monorepo in modo che più siti di marchi possano condividere componenti, logica di rendering e API da una singola base di codice manutenibile.
Sistema di blocchi di contenuto
Costruito il motore di rendering dinamico che permette agli editor di comporre pagine da blocchi di contenuto Umbraco riutilizzabili senza coinvolgimento dello sviluppatore.
Pipeline di anteprima
Implementata la funzione di anteprima live, collegando la modalità anteprima nativa di Umbraco al livello di rendering di Next.js con accesso admin autenticato.
Sviluppo del motore moduli
Sviluppati moduli avanzati per la cattura lead con logica condizionale dei campi e validazione usando TanStack Forms per requisiti aziendali complessi.
Integrazione sidebar
Costruito il modulo della barra laterale per mostrare pagine e moduli Umbraco completi all'interno del sito, mantenendo accessibili gli strumenti per le concessionarie senza interrompere l'UX principale.
Soluzioni
Caratteristiche chiave della soluzione
Architettura Headless CMS: Decoupled Umbraco da Next.js, dando agli editor flessibilità mantenendo il frontend moderno.
Configurazione Scalabile Monorepo: Base di codice condivisa che consente a Omoda e ai futuri siti di marchio di lanciare nuovi mercati più velocemente.
Anteprima Live Pipeline: Anteprima funzionante per gli editor di contenuti, colmando il divario tra CMS headless e frontend disaccoppiati.
Motore Smart Form: Moduli multi-fase convalidati che migliorano la qualità dei lead e riducono l'abbandono delle richieste.
Gestione Compiti: Assegnazione, tracciamento e valutazione dei compiti facilitati.
Modulo Barra Laterale Integrata: Visualizza pagine CMS e moduli nel contesto, mantenendo accessibili gli strumenti della concessionaria.
Risultati in Numeri
35%
Miglioramento del completamento dei moduli grazie alla logica condizionale e alla minore frizione.
40%
Rendering più veloce grazie all'architettura headless Next.js + Umbraco.
50%
Nuovi siti brand/mercato possono essere lanciati più velocemente utilizzando il monorepo condiviso.
30%
Riduzione del tempo di pubblicazione grazie all'anteprima dal vivo e ai blocchi di contenuto riutilizzabili.
25%
Minore abbandono grazie a passaggi del modulo intelligenti e condizionali con guida utente migliorata.
20%
Aumento dell'engagement da visitatori nordici non danesi grazie al supporto multilingue.
