En väg in till tre varumärken, från första skiss till en sajt redo att lansera på mindre än en vecka

Eurotransport har flyttat fordon i Skandinavien sedan 1999. Med åren växte tre verksamheter fram: transport av många fordon på en gång, enstaka fordon levererade på bokad tid under varumärket eta., och tjänster före och efter transporten under varumärket asc.

Arbetet började inte som en ny webbplats. Det började med en fråga: hur ska tre varumärken få plats på sajten och i navigationen?

Eurotransports team kom väl förberett. De hade redan gjort ett fint arbete med innehållet och de första idéerna, och det är en stor del av förklaringen till att arbetet kunde gå så snabbt. Vi arbetade nära varandra hela vägen: de kände verksamheten och kunderna, och jag formade det till struktur, navigation och design.

Inget av det syntes på den gamla sajten. Jag kartlade varje länk och hittade tre menyer som inte stämde överens med varandra. Att få in varumärkena ordentligt krävde en ny design, inte en ny meny ovanpå den gamla.

Toppmenyn har tre val som speglar det kunderna kommer för att göra: transporttjänster, terminaltjänster och om oss. Boka transport är den enda orange knappen, alltid synlig.

Varje val öppnar en megameny. Där är tjänsterna grupperade efter varumärke, och varje grupprubrik har varumärkets logotyp och en kort rad om vad det är till för. Kunden väljer efter behov och lär sig varumärkena på vägen.

1. Tydliga tillståndDet öppna valet får en kontur, den aktuella sektionen en mörk fyllning och tangentbordsfokus en blå ring.
2. En flytande radMenyn ligger som en rundad rad 24 pixlar från toppen, så att fotot bakom fortfarande hör till sidan.
3. Fungerar med tangentbordPiltangenterna flyttar mellan valen, Escape stänger menyn och lämnar fokus där du var.

Tjänstesidorna är långa. En varumärkessida som asc tar upp fem tjänster, var och en med en egen sektion. För att kunden ska hitta rätt designade jag en sektionsrad som ligger under toppmenyn.

1. Den aktiva fliken följer scrollningenDu ser alltid var du är, utan att behöva leta.
2. Rubrikerna hamnar synligtEtt tryck scrollar sektionen till 24 pixlar under raden, så att rubriken aldrig döljs bakom den.
3. En knuff till de andra varumärkenaSlutet av varje varumärkessida pekar vidare till tjänsterna de två andra varumärkena erbjuder.

Samma struktur behövde hålla på varje skärm. Jag designade surfplatta och mobil som egna layouter, inte som en krympt desktop.

1. Bara namn i mobilmenynPå desktop har varje tjänst en kort beskrivning. I mobilen står namnen ensamma, så att hela listan får plats utan oändlig scrollning.
2. En kontaktknapp som kliver åt sidanDen runda kontaktknappen döljs när sidfoten syns, så att den aldrig täcker kontaktuppgifterna.
3. Brödsmulor på varje undersidaEn kort väg tillbaka till startsidan och den överordnade sektionen, även i mobilen.

Den nya designen krävde ett nytt design­system, men inget tungt. Jag höll det till det sajten behövde: några regler för vad de tre varumärkena delar och vad som får skilja sig, så att inte varje sida hittade på sitt eget svar. Jag började det i Figma, med de delar som de första sidorna behövde.

När jag gick över till Claude tog jag med mig systemet och gjorde färdigt det där, så att prototypen och koden utgår från samma tokens och komponenter.

1. Tokens namngivna efter rollFärgerna heter handling, länk, fokus eller yta, inte orange eller blå. Det gjorde mörkt läge till en fråga om nya värden, inte ny design.
2. En färg per varumärke, och bara därEurotransportblått, eta. turkos och asc petrol visar vilket varumärke en tjänst hör till. Orange är reserverat för den enda huvudhandlingen: boka transport.
3. En komponent per uppgiftEn navigationslänk, en grupprubrik och en sektionsrad finns var och en en gång, med sina tillstånd, och återanvänds på varje sida.

• Handling#FFA100Huvudknappar
• Varumärkesblå#004996Eurotransport
• Länk#054DA7Länkar
• Text#111827Brödtext och rubriker
• Fokus#096BDEFokusmarkering
• eta.#549093Varumärkesfärg
• asc#045E80Varumärkesfärg
• Ton#EDF2F8Mjuk yta
• eta. ton#EEF4F4Mjuk yta
• asc ton#E6EFF2Mjuk yta

Display48 · Bold

Kompletta fordonstjänster

Heading 232 · Bold

Transporttjänster

Heading 320 · Medium

Flera fordon, större flöden

Body16 · Regular

Vi transporterar och hanterar era fordon – tryggt, effektivt och med full kontroll.

Small14 · Regular

Hela landet med egna fordon och terminaler

Innan någon produktionskod fanns byggde jag hela sajten som en fungerande prototyp i Claude, utifrån design­systemet och de första sidorna i Figma. Den körs i webbläsaren, på alla skärmstorlekar och i ljust och mörkt läge.

Det gjorde att navigationen gick att klicka sig igenom och prova, inte bara bedöma utifrån skisser. Att bygga på riktigt visade luckor som skisser döljer, som den sista fliken i mobilen som hamnade utanför skärmen.

Från prototypen byggde jag den riktiga sajten i Astro. Jag valde det för att det passar en sajt som den här: mest innehåll, tre varumärken, två språk och ett företag som ska kunna publicera den utan en tung plattform.

1. Enkla, snabba sidorAstro gör om komponenterna till statiska HTML-sidor, som laddar snabbt och är enkla att lägga upp och publicera. De viktigaste sidorna får 100 i Lighthouse.
2. Samma komponenter som i FigmaSectionBar i Figma är SectionBar.astro i koden, så design­systemet följer med rakt in i sajten.
3. Två språk från en källaDen engelska sajten byggs från den svenska, och en kontroll flaggar text som inte är översatt.
4. Kontroller vid varje byggeTillgänglighet, länkar, sök och översättning kontrolleras varje gång sajten byggs.

Koden ligger i ett GitHub-repo för sajten. Varje ändring kör kontrollerna nedan, så att sajten hela tiden är redo att lansera.

Jag gick igenom varje länk på den gamla sajten mot den nya. Fem sidor saknade en plats: verksamhetspolicyn, karriär, integritet, Service Center och nyheter. De fick egna mallar och en ny plats i menyn, Om oss.

Sök var också en del av navigationsarbetet: varje sida har en titel och beskrivning skrivna efter hur kunderna söker, och brödsmulor som sökmotorer kan läsa.