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