Omoda Данія
Огляд кейсу
Omoda Данія — офіційна цифрова присутність автомобільного бренду Omoda на данському ринку. Це сучасний інтерактивний онлайн шоурум, створений для представлення Omoda 5 EV данським споживачам. Платформа поєднує багатий контент з технічною глибиною, виконуючи функції як маркетингового інструменту, так і функціонального мосту між потенційними покупцями та місцевими дилерськими центрами.
Мета: Основною метою є підвищення впізнаваності бренду Omoda як нового гравця на данському ринку електромобілів, одночасно чітко демонструючи технології та функції автомобіля. Окрім підвищення впізнаваності, сайт створений для конвертації відвідувачів у кваліфіковані ліди шляхом надання зручних інструментів взаємодії з дилерськими центрами — від форм запитів до замовлень на тест-драйв.
Основна інформація про проєкт
Індустрії
Автомобілебудування, електромобілі (EV), роздрібна торгівля та мережі дилерів — проєкт підтримує глобальний автомобільний бренд, що входить у новий регіональний ринок із повністю локалізованою цифровою присутністю.
Послуги
Веб-розробка, інтеграція headless CMS, спеціальна розробка бекенду (проксі-шар), фронтенд-інженерія, локалізаційна інженерія, технічні консультації з архітектури для масштабованості кількох брендів.
Рішення
Headless CMS — розділення контенту від презентації, monorepo, що дозволяє кільком брендовим сайтам працювати на одній кодовій базі, живий попередній перегляд для редакторів, динамічні форми з умовною логікою, бічна панель в додатку для демонстрації контенту CMS.
Технології
Umbraco CMS (керування контентом), NestJS (бекенд-проксі/API шар), Next.js (рендеринг та маршрутизація фронтенду), Tailwind CSS (система стилізації), TanStack Forms (керування станом форми та валідація).
Виклики
Динамічний рендеринг контенту
Динамічний рендеринг гнучких блоків контенту Umbraco і сторінок всередині фронтенду Next.js без шкоди для продуктивності чи гнучкості редактора.
Умовна логіка форми
Створення багатокрокових форм з умовним відображенням полів і жорсткими правилами валідації для підтримки генерації лідів і робочих процесів дилерів.
Інтеграція живого попереднього перегляду
Підключення нативного режиму попереднього перегляду Umbraco до роз'єднаного додатка Next.js, включаючи безпечний автентифікований доступ для адміністраторів/редакторів і безшовне редагування контенту.
Архітектура Monorepo
Структурування спільної кодової бази, яка дозволяє кільком брендовим сайтам повторно використовувати компоненти, логіку рендерингу та API, зберігаючи при цьому унікальний дизайн і брендинг.
Підтримка кількох мов
Повна локалізація через систему словника Umbraco у поєднанні з локалізованою маршрутизацією Next.js і безшовною зміною мови.
Процес
Ось як команда поетапно приступила до створення платформи з нуля.
Налаштування архітектури
Впроваджено безголову архітектуру, яка поєднує Umbraco CMS як бекенд контенту з Next.js як фронтендом, використовуючи NestJS як спеціальний проксі/API шар між ними.
Основи Monorepo
Спроектовано структуру monorepo, щоб кілька брендових сайтів могли ділитися компонентами, логікою рендерингу та API з однієї керованої кодової бази.
Система контент-блоків
Розроблено движок динамічного рендерингу, що дозволяє редакторам створювати сторінки з повторно використовуваних блоків контенту Umbraco без участі розробників.
Конвеєр попереднього перегляду
Реалізовано функцію живого попереднього перегляду, поєднуючи нативний режим умови Umbraco з шаром рендерингу Next.js з автентифікованим доступом для адміністраторів.
Розробка механізму форм
Розроблено просунуті форми збору лідів із умовною логікою полів та валідацією за допомогою TanStack Forms для складних бізнес-вимог.
Інтеграція бічної панелі
Створено модуль бічної панелі для відображення повних сторінок і форм Umbraco в межах сайту, зберігаючи доступність інструментів дилерів без порушення основного UX.
Рішення
Ключові особливості рішення
Архітектура Headless CMS: Відокремлено Umbraco від Next.js, що надало редакторам гнучкість та зберегло сучасний фронтенд.
Масштабована структура Monorepo: Спільна кодова база дозволяє Omoda та майбутнім брендовим сайтам швидше запускати нові ринки.
Конвеєр живого перегляду: Робочий перегляд для редакторів контенту, що з'єднує безголовий CMS і відокремлені фронтенди.
Інтелектуальний двигун форм: Перевірені багатокрокові форми, що покращують якість лідів і зменшують кількість покинутих запитів.
Управління домашніми завданнями: Легке призначення, відстеження та оцінювання домашніх завдань.
Вбудований модуль бічної панелі: Відображення сторінок і форм CMS у контексті, зберігаючи інструменти дилера доступними.
Результати в цифрах
35%
Покращене заповнення форм завдяки умовній логіці та зменшеному тертю.
40%
Швидше відтворення завдяки архітектурі headless Next.js + Umbraco.
50%
Нові сайти брендів/ринків можна запускати швидше, використовуючи спільне монорепо.
30%
Скорочення часу публікації завдяки живому перегляду та повторно використовуваним блокам контенту.
25%
Менше відмов через розумніші кроки форми з умовним відображенням та розширеним керівництвом користувача.
20%
Збільшена залученість від не данських північноєвропейських відвідувачів через підтримку кількох мов.
