Omoda Tanska
Tapausanalyysi
Omoda Denmark on Omoda-autobrändin virallinen digitaalinen läsnäolo Tanskan markkinoilla. Se toimii modernina, interaktiivisena verkkonäyttelytilana, joka on suunniteltu esittelemään Omoda 5 EV:tä tanskalaisille kuluttajille. Alusta yhdistää monipuolisen sisällön esittelyn tekniseen syvyyteen ja toimii sekä markkinointivälineenä että toiminnallisena siltana potentiaalisten ostajien ja paikallisten jälleenmyyjien välillä.
Tavoite: Pääasiallinen tavoite on rakentaa Omodan bränditunnettuutta uutena toimijana Tanskan sähköautomarkkinoilla samalla, kun auton teknologia ja ominaisuudet esitellään selkeästi. Tunnettuuden lisäksi sivusto on rakennettu muuttamaan kävijät päteviksi liideiksi tarjoamalla virtaviivaisia, helppokäyttöisiä työkaluja yhteydenpitoon jälleenmyyjien kanssa — kyselylomakkeista koeajopyyntöihin.
Projektin keskeiset tiedot
Toimialat
Autoala, Sähköajoneuvot (EV), Vähittäiskauppa & jälleenmyjäverkostot — projekti tukee globaalia autobrändiä uuden alueellisen markkinan valloittamisessa täysin lokalisoidulla digitaalisella läsnäololla.
Palvelut
Verkkokehitys, Headless CMS -integraatio, Räätälöity backend-kehitys (proxy-kerros), Frontend-kehitys, Lokalisaatiokehitys, Tekninen konsultointi monibrändin skaalattavuudesta.
Ratkaisut
Headless CMS eriyttää sisällön esittelystä, monorepo mahdollistaa useiden brändisivustojen ylläpidon yhdellä koodipohjalla, live-esikatselu toimittajille, dynaamiset lomakkeet ehdollisella logiikalla, sovelluksen sivupalkki esittelee CMS-sisältöä.
Teknologiat
Umbraco CMS (sisällönhallinta), NestJS (backend proxy/API-kerros), Next.js (frontend-renderöinti ja reititys), Tailwind CSS (tyylijärjestelmä), TanStack Forms (lomakkeen tilan hallinta ja validointi).
Haasteet
Dynaaminen sisällön renderöinti
Joustavien Umbraco-sisältölohkojen ja sivujen dynaaminen renderöinti Next.js-frontendissä menettämättä suorituskykyä tai toimittajan joustavuutta.
Ehdollinen lomakelogiikka
Monivaiheisten lomakkeiden rakentaminen, joissa kenttien näyttäminen on ehdollista ja validointisäännöt tiukkoja, tukemaan liidien generointia ja jälleenmyyjätyönkulkuja.
Live-esikatselun integrointi
Umbracon natiivin esikatselutilan yhdistäminen eriytettyyn Next.js-sovellukseen, sisältäen suojatun autentikoinnin hallinnoijille ja toimittajille sekä saumattoman sisällönmuokkauksen.
Monorepo-arkkitehtuuri
Jaetun koodipohjan jäsentäminen siten, että useat brändisivustot voivat käyttää uudelleen komponentteja, renderöintilogiikkaa ja API-rajapintoja erillisiä ulkoasuja ja brändäystä säilyttäen.
Monikielituki
Täysi lokalisaatio Umbraco-sanakirjajärjestelmän avulla yhdistettynä paikallisreagoivaan Next.js-reititykseen ja saumattomaan kielenvaihtoon.
Prosessi
Näin tiimi lähestyi alustan rakentamista alusta alkaen vaiheittain.
Arkkitehtuurin perustaminen
Perustettiin headless-arkkitehtuuri, jossa Umbraco CMS toimii sisällön backendinä ja Next.js frontendinä, käyttäen NestJS:ää omana proxy/API-kerroksena niiden välillä.
Monorepon perusta
Suunniteltiin monorepo-rakenne, jotta useat brändisivustot voivat jakaa komponentteja, renderöintilogiikkaa ja API-rajapintoja yhdestä helposti ylläpidettävästä koodipohjasta.
Sisältölohkojärjestelmä
Rakennettiin dynaaminen renderöintimoottori, joka antaa toimittajien koostaa sivuja uudelleenkäytettävistä Umbraco-sisältölohkoista ilman kehittäjän osallistumista.
Esikatseluputki
Ota käyttöön live-esikatselutoiminto linkittämällä Umbracon natiivin esikatselutilan Next.js-renderöintikerrokseen varmennetulla ylläpitäjäkäytöllä.
Lomakemoottorin kehitys
Kehitettiin kehittyneitä liidien keruulomakkeita ehdollisella kenttälogiikalla ja validoinnilla käyttäen TanStack Formsia monimutkaisiin liiketoimintavaatimuksiin.
Sivupalkin integrointi
Rakennettiin sivupalkkikomponentti, joka esittää koko Umbraco-sivuston sivuja ja lomakkeita sivustolla, pitäen jälleenmyyjien työkalut käytettävissä ilman pääkäyttäjäkokemuksen häiriöitä.
Ratkaisut
Ratkaisun keskeiset ominaisuudet
Headless CMS -arkkitehtuuri: Eristetty Umbraco Next.js:stä, tarjoten toimittajille joustavuutta samalla kun frontend pysyy modernina.
Skaalautuva monorepo-rakenne: Jaettu koodipohja, joka mahdollistaa Omoda- ja tulevien brändisivustojen nopeamman markkinoille tulon.
Suoratoiston esikatseluputki: Toimiva esikatselu sisällönmuokkaajille, yhdistäen päänettömän CMS:n ja irrotettujen käyttöliittymien välisen aukon.
Älykäs lomakemoottori: Vahvistetut monivaiheiset lomakkeet parantavat liidien laatua ja vähentävät kyselyistä luopumista.
Kotitehtävien hallinta: Helppo kotitehtävien määrittely, seuranta ja arviointi.
Upotettu sivupalkkimoduuli: Näytä CMS-sivut ja lomakkeet kontekstissa, pitäen jälleenmyyjätyökalut helposti saatavilla.
Tulokset numeroina
35%
Parantunut lomakkeen täyttö ehdollisen logiikan ja kitkan vähentämisen ansiosta.
40%
Nopeampi renderöinti Next.js + Umbraco -arkkitehtuurin ansiosta.
50%
Uudet brändi-/markkinasivustot voidaan lanseerata nopeammin jaettua monorepoa hyödyntäen.
30%
Julkaisuaika lyhentynyt suoratoiston esikatselun ja uudelleenkäytettävien sisältölohkojen ansiosta.
25%
Vähemmän keskeytyksiä älykkäiden, ehdollisesti renderöityjen lomakeaskelten ja parannetun käyttäjäohjauksen ansiosta.
20%
Lisääntynyt sitoutuminen ei-tanskalaisilta pohjoismaisilta vierailijoilta monikielisen tuen kautta.
