Omoda Dania
Przegląd przypadku
Omoda Dania to oficjalna obecność cyfrowa marki motoryzacyjnej Omoda na rynku duńskim. Służy jako nowoczesny, interaktywny salon online zaprojektowany, aby przedstawić Omoda 5 EV duńskim konsumentom. Platforma łączy bogatą prezentację treści z głębią techniczną, działając zarówno jako narzędzie marketingowe, jak i funkcjonalny most łączący potencjalnych nabywców z lokalnymi dealerami.
Cel: Głównym celem jest budowanie świadomości marki Omoda jako nowego uczestnika duńskiego rynku pojazdów elektrycznych, przy jednoczesnym wyraźnym przedstawieniu technologii i funkcji pojazdu. Poza budowaniem świadomości, strona została stworzona, aby przekształcać odwiedzających w kwalifikowane leady, oferując usprawnione, bezproblemowe narzędzia do kontaktu z dealerami — od formularzy zapytań po prośby o jazdę próbną.
Kluczowe informacje o projekcie
Branże
Motoryzacja, Pojazdy Elektryczne (EV), Handel detaliczny i sieci dealerskie – projekt wspiera globalną markę motoryzacyjną wchodzącą na nowy rynek regionalny z w pełni lokalizowaną obecnością cyfrową.
Usługi
Tworzenie stron internetowych, integracja Headless CMS, niestandardowy rozwój backendu (warstwa proxy), inżynieria frontendowa, lokalizacja, doradztwo techniczne dotyczące architektury dla skalowalności wielomarkowej.
Rozwiązania
Headless CMS – rozdzielenie treści od prezentacji, monorepo umożliwiające wiele markowych stron na jednej bazie kodu, podgląd na żywo dla redaktorów, dynamiczne formularze z logiką warunkową, wbudowany panel boczny wyświetlający treści CMS.
Technologie
Umbraco CMS (zarządzanie treścią), NestJS (warstwa proxy/backend API), Next.js (renderowanie frontend i routing), Tailwind CSS (system stylizacji), TanStack Forms (zarządzanie i walidacja stanów formularzy).
Wyzwania
Dynamiczne renderowanie treści
Dynamiczne renderowanie elastycznych bloków treści Umbraco i stron wewnątrz frontend Next.js bez utraty wydajności i elastyczności dla redaktorów.
Logika formularzy warunkowych
Budowa formularzy wieloetapowych z warunkowym wyświetlaniem pól i ścisłymi regułami walidacji, wspierających generowanie leadów i procesy dealerskie.
Integracja podglądu na żywo
Połączenie natywnego trybu podglądu Umbraco z odłączoną aplikacją Next.js, łącznie z bezpiecznym uwierzytelnionym dostępem dla użytkowników admin/redaktorów i płynną edycją treści.
Architektura monorepo
Strukturyzacja wspólnej bazy kodu umożliwiającej wielu markowym stronom ponowne użycie komponentów, logiki renderowania i API, jednocześnie zachowując odrębne wzory i branding.
Wsparcie wielojęzyczne
Dostarczanie pełnej lokalizacji przez system słownika Umbraco połączony z trasowaniem Next.js uwzględniającym lokalizacje oraz płynną zmianą języka.
Proces
Oto, jak zespół podszedł do budowy platformy od podstaw, krok po kroku.
Ustawienia architektury
Ustanowiono architekturę headless, łącząc Umbraco CMS jako backend treści z Next.js jako frontendem, z użyciem NestJS jako dedykowanej warstwy proxy/API pomiędzy nimi.
Podstawa monorepo
Zaplanowano strukturę monorepo, aby wiele stron markowych mogło współdzielić komponenty, logikę renderowania i API z jednej, łatwej w utrzymaniu bazy kodu.
System bloków treści
Zbudowano dynamiczny silnik renderowania pozwalający redaktorom na komponowanie stron z wielokrotnego użytku bloków treści Umbraco bez udziału programistów.
Proces podglądu
Wdrożono funkcję podglądu na żywo, łącząc natywny tryb podglądu Umbraco z warstwą renderowania Next.js z uwierzytelnionym dostępem admina.
Rozwój silnika formularzy
Opracowano zaawansowane formularze do pozyskiwania leadów z warunkową logiką pól i walidacją przy użyciu TanStack Forms dla złożonych wymagań biznesowych.
Integracja panelu bocznego
Stworzono moduł panelu bocznego do wyświetlania pełnych stron i formularzy Umbraco na stronie, zachowując dostępność narzędzi dealerskich bez zakłócania głównego UX.
Rozwiązania
Kluczowe cechy rozwiązania
Architektura Headless CMS: Oddzielenie Umbraco od Next.js, dając redaktorom elastyczność przy zachowaniu nowoczesnego frontendu.
Skalowalna konfiguracja Monorepo: Wspólna baza kodu umożliwiająca Omoda i przyszłym markom szybsze wejście na nowe rynki.
Podgląd na żywo: Działający podgląd dla redaktorów treści, łączący headless CMS z odłączonymi frontendami.
Inteligentny silnik formularzy: Zweryfikowane wieloetapowe formularze poprawiające jakość leadów i zmniejszające rezygnację z zapytań.
Zarządzanie pracami domowymi: Łatwe przydzielanie, śledzenie i ocenianie prac domowych.
Osadzony moduł paska bocznego: Wyświetlanie stron i formularzy CMS w kontekście, zapewniając dostęp do narzędzi dealerskich.
Wyniki w liczbach
35%
Ulepszone ukończenie formularzy dzięki logice warunkowej i zmniejszeniu tarcia.
40%
Szybsze renderowanie dzięki architekturze headless Next.js + Umbraco.
50%
Nowe strony marek/rynku można uruchomić szybciej dzięki współdzielonemu monorepo.
30%
Skrócony czas publikacji dzięki podglądowi na żywo i blokom treści do ponownego użycia.
25%
Mniejsza rezygnacja dzięki inteligentnym, warunkowo renderowanym krokom formularza z ulepszonym przewodnikiem użytkownika.
20%
Zwiększone zaangażowanie nordyckich odwiedzających nie mówiących po duńsku dzięki wsparciu wielojęzycznemu.
