---
slug: hubner
client: 'HÜBNER Group'
category: ['Design', 'Development']
date: '2023 — Present'
website: https://www.hubner-group.com
services: ['UI', 'Web Design', 'Development', 'Newsletter Design']
technologies:
    - Vue.js
    - Vue Router
    - Tailwind CSS
    - video.js
    - three.js
    - Font Awesome Pro
    - Figma
title: 'Touch Apps for the Trade Fair Presence at InnoTrans and Busworld'
story_preview: 'Since Busworld Europe 2023 we have been building the digital user interface at the HÜBNER Group booth: two touch apps for Rail and Road on one shared component system, offline-capable on kiosk steles and 4K displays, and as an iPad version for the sales team.'
fineprint: 'Ongoing collaboration since Busworld Europe 2023. We designed and built both apps for Rail and Road, plus the shared component system, a component guide, the iPad versions for the sales team and further design work around the fairs.'
---

> **Case study source:** https://unlimited.studio/en/case-study/hubner

# The Portfolio at Your Fingertips

HÜBNER Group from Kassel develops systems, components and services for rail and road vehicles, from gangway and articulation systems to window and entry solutions. HÜBNER presents this portfolio at the most important fairs in the industry: InnoTrans in Berlin, the world's largest trade fair for rail technology, and Busworld Europe in Brussels. At the booth it is shown not only as exhibits but also on large touchscreens. We have been building the software for it since Busworld Europe 2023.

The interface goes to every fair, the smaller ones included, where it mostly runs on an iPad. That is where it matters most, because there is hardly any room for exhibits.

## Two Apps, One Component System

Behind both fair presences is not a website but an app that runs straight on the booth hardware, without a server or internet connection. Rail and Road share one component system: masthead, product boxes, image galleries, videos, fact cards, timeline and navigation are built once and are available to both apps. Each fair keeps its own content. A component guide shows every building block with its variants in every screen format, so feedback lands on exactly the right element.

## From Vehicle to Solution

At the booth, visitors tap their way from the full vehicle into the individual solutions: Front End, Intercar, Bogie, Window, Insulation, Entry, Service and Digital Services. Each product page combines technical facts, renderings, image galleries, videos and QR codes linking to further information.

- **Navigation:** A fixed bar with Home, Products, What's New, Affiliates and HÜBNER Group whose flyouts show the full product tree, plus breadcrumbs for orientation on every level.
- **Affiliates:** Dedicated pages for the group's companies.
- **Highlights:** A dedicated page for each fair's new products.
- **Interactive Content:** Service phases open as a detail view with a tap, and at Busworld visitors rotate and zoom the articulation as a 3D model.

## One Layout for Every Device

The booth runs portrait steles in 4K and Full HD, 4K landscape displays and desktop and laptop screens. iPad versions followed later, so the sales team can work with the apps too. The layout is tuned to exactly this hardware instead of common smartphone sizes. On 4K landscape the app renders the approved Full HD layout at exactly twice the size, so every device shows the same design.

## Built for Trade Fair Operation

- **No Installation:** The delivery is a finished build that starts straight from the device in the browser.
- **Access Protection:** A password protects the interface until the fair opens.
- **Touch-Safe:** Context menu, pinch and double-tap zoom are locked, so visitors can't misalign the view.