One way in to three brands, from first sketch to a site ready to launch in less than a week

Eurotransport has moved vehicles in Scandinavia since 1999. Over the years the company grew three businesses: transport of many vehicles at once, single vehicles delivered at a booked time under the brand eta., and services before and after the transport under the brand asc.

The work didn’t start as a new website. It started with one question: how should three brands fit into the site and its navigation?

Eurotransport’s team came well prepared. They had already done great work on the content and on the first ideas, and that is a big part of why the work could move so fast. We worked closely together all the way: they knew the business and the customers, and I shaped it into structure, navigation and design.

None of that showed on the old site. I mapped every link on it and found three menus that didn't agree with each other. Fitting the brands in properly meant a redesign, not a new menu on top of the old one.

The top menu has three items that mirror what customers come to do: transport services, terminal services and about us. Booking a transport is the one orange button, always in view.

Each item opens a mega menu. Inside, the services are grouped by brand, and each group header carries the brand's logo and a short line that says what it is for. The customer chooses by need, and learns the brands on the way.

1. Clear statesThe open item gets an outline, the current section a dark fill, and keyboard focus a blue ring.
2. A floating barThe menu sits as a rounded bar 24 pixels from the top, so the photo behind it stays part of the page.
3. Works by keyboardArrow keys move between items, Escape closes the menu and returns focus to where you were.

The service pages are long. A brand page such as asc covers five services, each with its own section. To keep customers oriented, I designed a section bar that sits under the top menu.

1. The active tab follows the scrollYou always see where you are, without having to look for it.
2. Headings land in viewA tap scrolls the section to 24 pixels under the bar, so the heading is never hidden behind it.
3. A nudge to the other brandsThe end of each brand page points to the services the other two brands offer.

The same structure had to hold on every screen. I designed tablet and mobile as their own layouts, not as a shrunk desktop.

1. Names only in the drawerOn desktop each service has a short description. On mobile the names stand alone, so the whole list fits without endless scrolling.
2. A contact button that steps asideThe round contact button hides when the footer comes into view, so it never covers the contact details.
3. Breadcrumbs on every sub-pageA short path back to the start page and the parent section, also on mobile.

The redesign needed a new design system, but not a heavy one. I kept it to what the site needed: a few rules for what the three brands share and what may differ, so every page didn’t invent its own answer. I started it in Figma, with the parts the first pages needed.

When I moved to Claude, I took the system with me and completed it there, so the prototype and the code start from the same tokens and components.

1. Tokens named by roleColours are called action, link, focus or surface, not orange or blue. That made dark mode a matter of new values, not new designs.
2. One colour per brand, and only thereEurotransport blue, eta. teal and asc petrol mark which brand a service belongs to. Orange is kept for the one main action: book a transport.
3. One component per jobA navigation link, a group header and a section bar each exist once, with their states, and are reused on every page.

• Action#FFA100Main buttons
• Brand blue#004996Eurotransport
• Link#054DA7Links
• Text#111827Body and headings
• Focus#096BDEFocus ring
• eta.#549093Brand colour
• asc#045E80Brand colour
• Tint#EDF2F8Soft surface
• eta. tint#EEF4F4Soft surface
• asc tint#E6EFF2Soft surface

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

Before any production code, I built the whole site as a working prototype in Claude, from the design system and the first pages in Figma. It runs in the browser, on every screen size and in light and dark mode.

That meant the navigation could be clicked through and tried, not just judged from drawings. Building it for real showed gaps that drawings hide, such as the last tab on mobile that sat outside the screen.

From the prototype, I built the real site in Astro. I chose it because it fits a site like this one: mostly content, three brands, two languages, and a company that should be able to publish it without a heavy platform.

1. Plain, fast pagesAstro turns the components into static HTML pages, which load fast and are simple to host and publish. The key pages score 100 in Lighthouse.
2. The same components as in FigmaSectionBar in Figma is SectionBar.astro in the code, so the design system carries straight into the site.
3. Two languages from one sourceThe English site is built from the Swedish, and a check flags any text left untranslated.
4. Checks on every buildAccessibility, links, search and translation are checked each time the site is built.

The code is pushed to a GitHub repository for the site. Every change runs the checks below, so the site stays ready to launch.

I scanned every link on the old site against the new one. Five pages had no home: the business policy, careers, privacy, the Service Center and news. They got their own templates and a new place in the menu, About us.

Search was part of the navigation work too: each page has a title and description written for how customers search, and breadcrumbs that search engines can read.