Information Architecture & UX Design

Like most of our projects, this one started with a workshop: together with hostettler moto, we took a close look at target audiences, goals, expectations, and how we would work together. Combined with our earlier research, a clear picture emerged, and one insight stood out: the website’s existing structure had run its course.

On the old website, all content and pages were organized under individual locations. A vehicle or brand could therefore exist up to 8 times, once per location. Instead of complementing each other, these duplicates competed with one another: for visitors’ attention, and for visibility in search results.

That’s why the new information architecture had to win over three audiences at once:

  • the editorial team, who want to maintain content efficiently and without much effort,
  • the visitors, who should find content and contact people without detours,
  • and search engines and AI assistants (LLMs), which analyze the content and surface it where it fits.
Various screenshots of the new website showing location pages, content pages for services, filter options for vehicle models, and a detailed view of a vehicle model
Different screens of the new website.

Locations: important, but no longer the primary organizing principle

One thing became clear quickly: locations were done as the top-level organizing principle, but for individual visitors they remain a key factor. That’s why the website asks for a favorite location early in the user journey. The choice is saved beyond the current session and reused in various places across the website.

The location selector displays the eight branches in a list, with the various brands in a second column.
When visitors hover over a location, the brands offered there are highlighted. The same works in reverse: hover over Ducati, and the matching locations are shown.

Navigation: five items, clear priorities

The main navigation gets by with five items. “Vehicles & Brands” comes first because it matters to every audience, followed directly by the locations. The remaining offerings are grouped into “Services” and “Experiences”: the experiences include motorcycle rentals, test rides, events, and gift cards. Contact rounds out the navigation.

Wherever visitors get in touch with a location or the head office, the website pre-selects the branch the inquiry should go to, based on the favorite location. This noticeably relieves the head office: inquiries land in the right place straight away instead of having to be assigned manually.

Several views of the main navigation with its mega dropdowns

On the test ride request, for example, the location is already pre-filled, so visitors don’t need to give it a second thought either. With one exception: if the desired brand isn’t available at the favorite location, the pre-selection stays empty and the other suitable locations are offered instead.

Navigation paths: two entry points, one destination

Our research told us that people respond strongly to brands when buying a motorcycle. The brand is therefore one of two entry points to the vehicles and models. The second is the categories: scooters, sport bikes, naked bikes, and more. Visitors don’t have to commit to one route; they choose whichever path gets them to their destination fastest.

Content evaluation: enough for a decision, and no more

From the concept phase through design, we kept asking ourselves the same question: what content do visitors need to make a good decision, without being overwhelmed by information?

One result is the newly structured vehicle data: specifications appear in meaningful groups instead of a long list of raw values. And every vehicle page contains elements that support buyers in their decision, such as the positive Google reviews of the respective location.

A screenshot showing a list of data and specifications for a motorcycle model, alongside an emotive photo of a motorcycle.
The design combines emotion with a clean presentation of key data and specifications.

Website

hostettler moto ag

Concept, information architecture, design, frontend, WordPress, APIs

2026 – today

A website that keeps itself up to date

Up-to-date, accurate content for visitors, without effort for the editorial team: a dream for many, a reality here.

Vehicle API

An overview of API requests in the WordPress backend, including a visual representation of the queries.

The website now features over 400 motorcycle models, each with detailed information on license category and price, plus specifications for engine, dimensions, and performance. Maintaining all this technical data by hand for that many models would be a huge effort for the editorial team.

The heart of the website is therefore an API integration for exactly this data. The editorial team no longer has to enter or update anything manually: custom-built functionality queries the API and runs regular imports so the information is always current. Where it’s worthwhile, the team still steps in, highlights individual models, or adds extra information. Always with the reassurance that even without any editorial work, the models stay up to date.

Google API for opening hours & Maps

The opening hours don’t require any manual work either. They come straight from each branch’s Google Business Profile, including public holidays and special opening hours. No one has to check and enter the current hours before Swiss National Day or Christmas: what’s on Google is on the website. The current opening status is also visible right in the intro of every branch page. And of course, each branch page shows a map linked directly to Google Maps, so visitors can plan their trip to the branch right away.

A screenshot of a section on hostettler-moto.ch showing the contact details, opening hours, and location map of the Zurich North branch.
The opening hours come directly from Google Maps.

A quick tip for developers looking to integrate the Google API: regularOpeningHours vs. currentOpeningHours. You’re welcome.

Location contact details

The core contact details for each branch, such as email address and phone number, are maintained in one central place and update across the entire website whenever they change. The question “Did I update this everywhere?” no longer comes up, and no one has to go looking: change it once, correct everywhere, for all visitors. Custom-built elements and blocks bring the contact details to every place where they’re relevant. They also respect the favorite location and automatically show the details of the visitor’s personal branch, with no searching required.

Translations

The website exists in two languages, German and French. For the vehicles, the API delivers the French content right along with the German, wherever it’s available. All other content needs to be translated, and we know from other projects that this is often exactly where things stall. That’s why entire pages and content can be translated with one click in the backend, via the DeepL API. This lets the editorial team implement multilingualism with minimal effort.

AI support

No one has to write meta descriptions and short summaries by hand anymore. One click is all it takes, and a fitting meta description is in place, without the editorial team racking their brains over how to write something snappy and inviting. Behind the scenes, this is powered by an integration with our own service “Skim“, which in turn has various LLMs integrated.

Details and more

Events

The editorial team uses the website to publish events that require registration. Because spots are sometimes limited, a counter automatically ticks down after every registration, and once an event is fully booked, the registration option disappears on its own. The team can adjust the number at any time, for example when someone cancels by phone or signs up directly at the branch.

There’s even a safeguard for the case where two people try to register for the last spot in the same minute: the second registration doesn’t simply go through. Instead, those visitors are politely informed that someone beat them to it in the meantime. One more thing the editorial team never has to worry about, with no manual recounting.

Filters via the Interactivity API

A view of several filter options in the WordPress backend

The filters for the vehicle models are built on WordPress’s relatively new Interactivity API. At the same time, certain data is also fetched live, directly from the external API.

To offer visitors fitting landing pages, we developed various ways to set predefined filters and settings, for example a data grid with 24 Ducati models, or 6 random models from a specific category. These options are available right in the sidebar of the WordPress block editor, so all this flexibility also comes with a good editing experience for the team.

A good footer is a must, too

The footer accompanies visitors on every page of their journey. At the same time, it’s the last chance to offer fitting, further links once they’ve reached the end of a page. That’s why it presents, among other things:

  • the newsletter,
  • the brands on offer, one more time, to build trust,
  • the two navigation paths via vehicle categories and brands,
  • and, naturally, the locations once again.
The footer of hostettler-moto.ch with various quick navigation options for vehicle categories and brands, plus a newsletter form

We wouldn’t have expected the visual balance to work out this well at the start. But of course, we’re delighted it did.

As so often, there’s no shortage of new and further ideas, and the collaboration continues. We look forward to supporting the hostettler moto ag team for the long term, and we’re excited to see what the future brings!