Toyota befant seg i en presset posisjon: i 2024 var hele 87 % av alle nye personbiler som ble solgt i Norge elektriske – og Toyota ble likevel ikke ansett som et seriøst elbilmerke. Intern merkevareanalyse (Kantar MDS, 2024) bekreftet dette: Toyota ble ansett som relevant når merket ble nevnt, men var sjelden «top of mind» når norske bilkjøpere vurderte elbil.
Kampanjesidene ble identifisert som ett av flere viktige grep for å endre dette. Den eksisterende løsningen var utdatert, ikke skalerbar, og lå hos en tredjepart – noe som gjorde vedlikehold og måling vanskelig. TNE hadde i praksis ingen innsikt i egne konverteringsdata, og ønsket en løsning de selv eide og kontrollerte.
Kampanjesidene skulle forbedre tre vidt forskjellige brukerreiser – for privatpersoner som vurderer elbil, håndverkere og SMB-eiere som trenger varebil, og fleet-managere som forhandler firmabilavtaler. Hvert av de syv markedene skulle ha tre separate oversiktssider – én per segment (Personbil, Professional og Fleet) – med dedikerte modellsider under hvert segment. Totalt 21 oversiktssider, med ulikt modellutvalg, språk, valuta og finansieringsmodeller per marked.
Et sentralt krav var at markedsteamene selv skulle kunne oppdatere innhold, priser og modellutvalg direkte i Toyota sitt CMS (Adobe Experience Manager) – uten involvering fra byrå eller utviklere.
En intern analyse fra Toyota viste at så mye som 80–90 % av innholdet ville være likt på tvers av de syv markedene. Istedenfor å bygge syv separate kampanjeløsninger, var det langt mer lønnsomt å lage én felles rigg som alle markedene kunne bruke – med rom for lokale tilpasninger der det faktisk var nødvendig. Dette ble et direkte designkrav: én felles komponentarkitektur, men med fleksibilitet per marked.
Det store spørsmålet ble dermed: hvordan bygge én løsning som føles relevant for svært ulike brukere i syv markeder – uten at den blir generisk?
Jeg hadde rollen som UX/UI-designer og lead-ansvar på hele prosjektet. I samarbeid med en Art Director ledet jeg designprosessen – fra de første skissene til ferdig visuelt design og interaktiv prototype i Figma. I tillegg tok jeg aktivt del i frontend-utviklingen, der kampanjesidene ble kodet fra grunnen av med HTML, CSS og JavaScript og implementert i Toyota sitt CMS (Adobe Experience Manager). Gjennom hele prosessen koordinerte jeg mellom markedsteamene i syv land, dev-teamet (Empinity) og Toyota Northern Europe.
Research- og innsiktsfasen tok hovedsakelig utgangspunkt i sekundærresearch fra Toyota og eksterne analysebyrå. Toyota har allerede investert tungt i markedsdata, noe som ga oss et solid grunnlag å bygge videre på. Vi supplerte med kvalitative samtaler med selgere hos Toyota-forhandlere – de som møter kundene daglig – for å få direkte innsikt i kundenes spørsmål, pain points og kjøpsbarrierer.
De nordiske markedene er blant de mest EV-modne i Europa. I 2024 var hele 87 % av alle nye personbiler solgt i Norge elektriske – og EV-andelen fortsetter å vokse. Til tross for dette var Toyota sjelden «top of mind» når bilkjøpere faktisk vurderte elbil.
Med en EV-andel på over 80 % i flere markeder måtte kampanjesidene reflektere dette. I Norge vises kun EV-modellene på kampanjesidene – ikke som ett alternativ blant mange, men som selve utgangspunktet. En «Elektrisk»-tag på hvert kort gjør drivlinjen umiddelbart tydelig. I markeder der både EV og ikke-EV finnes, lar filter-funksjonen brukeren sortere etter behov.
Prisforvirring er en kjøpsbarriere – og prisliste-nedlastinger korrelerer sterkt med faktiske bilkjøp. Månedsprisen er det mest prominente elementet på hvert modellkort, «Se prisliste»-knappen vises tydelig på hvert kort i oversikten, og nederst på modellsiden ligger en dedikert «Alle prislister»-seksjon – slik at brukeren alltid har enkel tilgang til prisinformasjon uansett hvor de er på siden.
Forskning viser at EV-kjøpere er svært faktaorienterte – de vil sammenligne specs, drivlinjer og pris på tvers av modeller før de bestemmer seg. Dette formet flere designbeslutninger på modellsiden: modellvelgeren øverst lar brukeren bytte mellom modeller innen samme segment uten å gå tilbake til oversikten. Finansieringskalkulatoren lar dem justere drivlinje, utstyrsnivå, startleie og kjørelengde og se månedsprisen oppdatere seg i sanntid. Nøkkelegenskaper-seksjonen gir rask tilgang til de viktigste specs. Og «Alle prislister» nederst støtter sammenligningsbehovet ytterligere.
Toyota var relevant når det ble nevnt, men sjelden top of mind. Bedre kampanjesider som tiltrekker trafikk og gir brukeren det de trenger ble identifisert som ett av flere viktige grep – bedre sider gir bedre inntrykk, og bedre inntrykk bygger merkevare over tid.
Innsikten fra research og forhandlersamtaler pekte tydelig på tre distinkte brukergrupper – med helt ulike behov, motivasjoner og kjøpsprosesser. Dette formet både informasjonsarkitekturen og innholdsprioriteringene på sidene.
En privatperson i en overveielsesfase. Hun sammenligner modeller, er usikker på rekkevidde og vil forstå hva privatleie faktisk koster per måned med sine forutsetninger. Hun trenger klarhet og tillit – ikke mer støy.
En håndverker eller SMB-eier som vurderer varebil. Beslutningen er rasjonell og TCO-drevet. Han vil vite om bilen faktisk fungerer i arbeidshverdagen – lastenivå, rekkevidde og driftskostnad er det som teller.
En innkjøpsansvarlig som ikke er på jakt etter én bil, men en avtale. Hun er ikke interessert i månedspris – hun vil ha dialog, tilbud og en kontaktperson. CTA-ene er deretter.
Kampanjesidene skulle nå tre ulike brukergrupper: privatpersonen som vurderer elbil, håndverkeren som trenger varebil, og fleet-ansvarlige som forhandler rammeavtaler.
Løsningen ble å skille dem i tre selvstendige løp – én oversiktsside per segment, med egne modellsider under. Samme struktur i alle syv markeder, men med lokalt innhold, valuta og modellutvalg.
Selve designprosessen startet med å bygge wireframes i Figma som fokuserte på layout, innholdshierarki og brukerflyt uten visuelt støy. Det ble laget wireframes for både oversiktssiden og modellsiden – i desktop- og mobilversjon.
I wireframingen vurderte vi flere løsninger for konfigurasjonsvalgene – dropdowns, tabs, sliders og segmenterte knapper. Tabs og segmenterte knapper fungerer fint med to–tre alternativer, men bryter ned så snart man kommer opp i fem eller seks. Sliders passer for kontinuerlige verdier som kjørelengde, men ikke for diskrete valg som drivlinje eller utstyrsgrad.
Å blande fire ulike konfigurasjonstyper på samme side ville blitt visuelt rotete og skapt unødig kognitiv belastning. Vi landet derfor på å bruke dropdowns gjennomgående – det ga et ryddig, konsistent uttrykk, samtidig som løsningen skalerte trygt på tvers av syv markeder med varierende modell- og utstyrsutvalg.
Oversiktssiden samler alle kampanjemodeller på hvert sitt kort i en grid, slik at brukeren raskt kan orientere seg. Hvert kort viser en kategori-tag (Elektrisk, Hybrid, Diesel osv.), modellnavn, 3D-modellbilde, månedspris, rente og CTA-knapper til modellside og prisliste – og i markeder med ulike type modeller kan brukeren filtrere etter kategori. På mobil byttes griden med kort til en karusell med swipe-funksjonalitet og peek-effekt.
Modellsiden gir brukeren informasjonen vedkommende trenger for å vurdere én spesifikk modell. Øverst ligger en hero-seksjon med en 3D-modell av bilen – valgt fremfor foto for å gi et konsistent uttrykk på tvers av alle modeller i alle markeder.
Kjernen i løsningen er finansieringskalkulatoren, der brukeren kan velge mellom ulike drivlinjer, utstyrsgrader, startleier, kjørelengder og finansieringsform, og ser månedsprisen oppdatere seg i sanntid.
Siden har også en dedikert seksjon for informasjon om selve kampanjetilbudet (f.eks. at tilbudet er inkludert vinterhjul), en nøkkelegenskaper-seksjon med USP-er for rask orientering, linker til prislister for alle de ulike modellene i segmentet, og til slutt sekundærlenker til å lese mer om modellen, kontakte forhandler eller bestille prøvekjøring.
Wireframene ble deretter videreutviklet til fullstendige, interaktive prototyper i Figma. Prototypene ble bygget på Toyotas eksisterende designsystem, supplert med et dedikert komponentbibliotek for prosjektet – knapper, dropdowns, tabs, inputfelter, kort og seksjoner – skreddersydd for kampanjesidenes behov.
Designsystemet ble holdt sammen av et sett design tokens for farger, typografi, spacing og andre gjenbrukbare verdier, slik at alt av komponenter, seksjoner og skjermstørrelser fikk et konsistent visuelt uttrykk. Resultatet var prototyper som ga hele teamet et felles referansepunkt før utviklingen startet.
Oversiktssiden samler alle kampanjemodeller i et responsivt grid med et filtreringssystem som lar brukeren sortere på kategori (Elektrisk, Hybrid, Diesel osv.). Filteret er bygget opp av egne komponenter for checkboxer, knapper og modaler – med states og variants for åpen/lukket, aktiv/inaktiv og valgte/uvalgte tilstander – og drevet av variabler og conditionals som holder styr på hvilke filtre som er aktive og hvilke modeller som skal vises. Brukeren kan bla med piler, og på mobil transformeres layout til en karusell med swipe-navigasjon og peek-effekt – slik at det alltid er tydelig at det finnes mer innhold å bla gjennom.
Modellsiden var der det meste av interaksjonen fant sted. Dropdown-komponenten ble bygget med slots, slik at én og samme komponent kunne brukes til alt fra drivlinje og utstyrsgrad til startleie og kjørelengde. Variants og variabler håndterte komponenttilstander (default, hover, active, disabled), og variable modes gjorde det mulig å bytte mellom ulike modeller uten å duplisere sider. Prototypen inkluderte et bredt spekter av interaksjoner – klikk, hover, drag og tab-bytte mellom privatleie og kontantkjøp – med sanntidsoppdatering av månedsprisen etter hvert som brukeren justerte valgene sine.
Kampanjesidene ble kodet fra grunnen av med HTML, CSS og JavaScript, og deretter implementert i Toyota sitt CMS – Adobe Experience Manager.
Arkitekturen er datadrevet: alt innhold, alle priser, finansieringsmatriser og labels oppdateres og hentes fra en sentral JSON-fil per marked, så hvert marked kan oppdatere sine egne data uten å påvirke de andre.
AI-assistert utvikling med Claude Code akselererte arbeidet eksponensielt fra prototype i Figma til ferdig løsning. Koden ble gjennomgått og kvalitetssikret manuelt etterpå. Vi brukte også AI til SEO-optimalisering.
Universell utforming er en integrert del av hvordan Toyota jobber, ikke en sjekkliste som krysses av på slutten. Toyota har egne team som jobber dedikert med tilgjengelighet og universell utforming på tvers av alle digitale flater, og stiller konkrete krav til at nye løsninger oppfyller både WCAG-standarder og Toyotas egne interne retningslinjer før de kan publiseres.
SEO hadde høy prioritet gjennom hele utviklingen. Jeg jobbet tett med SEO-teamene i de ulike markedene for å sikre korrekt H1-struktur, lokaliserte metatitler og beskrivelser, Schema.org-markup og canonical tags per side.
Vi valgte å gjennomføre brukertesting etter sidene var ferdig utviklet ved å A/B-teste den nye løsningen direkte mot den eksisterende. Toyota har et betydelig trafikkvolum på sine markedssider, noe som gir stort nok datagrunnlag til å trekke solide konklusjoner på kort tid. Takket være AI-assisterte utviklingsverktøy kunne vi iterere raskt mellom ulike versjoner.
Prisliste-nedlastinger ble definert som primær KPI. Vi satte opp Google Analytics-sporing via Google Tag Manager med data-attributter på alle CTA-er og interaksjoner.
I tillegg brukte vi Microsoft Clarity til behavioral analytics – heatmaps og session recordings – for å observere faktisk brukeratferd: hvor folk klikket, hvor langt de scrollet, og hvor de falt av. Denne innsikten ble brukt til kontinuerlige forbedringer.
Sidene er under kontinuerlig utrulling og datainnsamling. Her er noen foreløpige resultater fra Norge der A/B-testen først ble gjennomført.
Brukere tilbringer i snitt nesten dobbelt så lang tid på de nye sidene sammenlignet med den gamle løsningen.
Primær KPI, målt mot den gamle løsningen. Økning i klikk på «Se prisliste» – den handlingen med sterkest korrelasjon til faktiske bilkjøp.
Færre brukere forlater siden uten å ha trykket seg videre – enten til en annen modell eller på en CTA – sammenlignet med den gamle løsningen.
