Wie man die Kontrolle über mehr als 1.000 Lautsprecher behält.
- Technologie
- React
- Branche
- Audio- und AV-Technik
- Kunde
- STAGETEC
- Projekt
UI/UX und Frontend-Entwicklung
Wie können wir eines der weltweit größten Audio-Projekte mit über 1.000 Lautsprechern, Mikrofonen und Steuergeräten sauber konfigurieren, überwachen und perfektes Signalmanagement gewährleisten? Wie behalten auch Nichttechniker den Überblick und können Audio per Software einfach steuern und vorplanen?
STAGETEC als einer der führenden Anbieter für hochwertige, digitale Audio-Lösungen stand genau vor dieser Herausforderung, die selbst für erfahrene Systemplaner besonders war.
Ein Audio-System für ein Großprojekt soll aufgebaut werden – verteilt auf verschiedene Gebäude, Räume, Zonen und Einsatzbereiche mit unterschiedlichen Nutzergruppen, Anforderungen und Sicherheitsstufen.
STAGETEC ist dabei verantwortlich für die technische Infrastruktur, das Audio-Signalmanagement – plus Inbetriebnahme und Steuerung durch User.
Alle Audiogeräte müssen vor Ort installiert, konfiguriert und im Betrieb lückenlos überwacht werden. Unterschiedliche Audioszenen sollen geplant und bei Bedarf geladen werden – auch Nichttechniker brauchen einen verständlichen Überblick über das System.
Präzises Audiomanagement braucht ein optimales Steuerungssystem. Für das konkrete Projekt entsteht daher eine individuell zugeschnittene Audio-Control-Anwendung auf Basis von Stagenet Solution, der STAGETEC Enterprise-Lösung für Signalmanagement.
Für UI/UX und Frontend dieser Anwendung kommen wir ins Spiel.
Zwei Partner, ein Anspruch: ein intuitives System
STAGETEC machte sich auf die Suche nach einem Partner für UI/UX und Frontend-Entwicklung der projektspezifischen Audio-Control-Lösung. Jemand, der sich in die UI/UX der Audio-Welt einarbeitet und die komplexen Anforderungen des Projekts in ein intuitiv bedienbares Interface zu übersetzen. Diese Rolle übernahmen wir.
Klare Rollen, gemeinsames Ziel: Agil, international, auf Augenhöhe.
STAGETEC verantwortete Product Management, User Stories und UI-Anforderungen sowie das technische Fundament mit Backend, Datenhandling und Hardware. Dazu kamen Planung, Testing, Rollout und Netzwerktechnik vor Ort.
Wir arbeiteten gemeinsam mit STAGETEC am UX-Konzept und verantworteten das User Interface Design sowie die technische Umsetzung des Frontends und der Frontend-Workflows.
In einem internationalen Team arbeiteten wir gemeinsam mit STAGETEC in intensiven Phasen aus Recherche, Konzeption und Testing vor Ort. Agil, mit wöchentlichen Feedbackschleifen und immer neuen Herausforderungen.
Das Ergebnis: eine projektspezifische Audio-Control-Lösung auf Basis von Stagenet Solution – entwickelt für die hohen Anforderungen an Betriebssicherheit, Übersicht und Bedienbarkeit in einem komplexen Großprojekt.
„medienreaktor war immer da, wenn man sie gebraucht hat und hat Aufgaben nicht nur sofort umgesetzt, sondern mitgedacht. Durch die intensive Einarbeitung in das Thema entstand eine Zusammenarbeit auf Augenhöhe.”
Die Zusammenarbeit
Tiefes Audio-Wissen trifft auf Designerfahrung. Gemeinsam haben wir uns intensiv mit den komplexen Anforderungen und gelernten Bedienkonzepten der Audio-Welt beschäftigt. STAGETEC brachte die Anforderungen und fachliche Expertise ein, wir unsere Erfahrung aus UI- und UX-Projekten und den wertvollen Blick von außen.
Die STAGETEC Devs entwickelten das Backend für das komplexe Datenhandling. Gemeinsam mit unseren Frontend-Entwicklern entstand darauf ein User Interface, das die relevanten Funktionen für die unterschiedlichen Nutzergruppen zugänglich macht.
Knappe Deadlines sind wir gewohnt – doch selten ist das Endprodukt zu Projektstart noch nicht vollständig klar. Nur durch agiles Arbeiten konnten wir innerhalb kurzer Sprints Konzepte umsetzen, testen und optimieren. So konnten wir als Team schnell auf neue Anforderungen reagieren.
STAGETEC sitzt in Berlin und Bamberg – und hat Kollegen auf der ganzen Welt. In Bamberg konnten wir gemeinsam die Hardware anfassen und in die Audiowelt eintauchen – die Arbeit an UI/UX und Frontend-Workflows lief überwiegend remote und auf Englisch.
Komplexe Audiosteuerung auf Basis von Stagenet Solution
Für beide Seiten war von Anfang an klar: Ausfallsicherheit, einfache Übersicht und Fehlertoleranz stehen an erster Stelle. Je komplexer ein System, je unterschiedlicher die Anwendungsfälle, desto wichtiger ist die Usability.
Die Besonderheit: Die projektspezifische Lösung kommt sofort bei einem Großprojekt zum Einsatz und wird somit einem ersten Stresstest unterzogen. Umso wichtiger, dass sich die komplexe Audiotechnik und das Signalmanagement für den Nutzer in der intensiven Benutzung einfach anfühlen.
Usability als Sicherheitsfaktor
Ein durchdachtes Interface ist hier keine reine Designfrage – es ist funktionaler Bestandteil. Nutzer:innen müssen auf einen Blick verstehen, in welchem Zustand sich das System befindet. Fehler sollen vermieden werden. Passieren sie doch, muss der Weg zurück einfach sein.
Durch den engen Austausch mit den Verantwortlichen und regelmäßiges Feedback entwickelten wir gemeinsam ein User Interface, das sowohl Neulingen als auch Experten Orientierung bietet.
User Interface: Komplexität sichtbar machen – ohne zu überfordern
Eine der größten Herausforderungen bestand darin, die Vielzahl der Geräte sichtbar zu machen, ohne den Überblick zu verlieren. Ein einzelner Raum konnte Dutzende Lautsprecher enthalten. Übereinander, untereinander oder in verschiedene Richtungen gedreht. In Summe waren es über 1.000 im Netzwerk. Dazu Floorboxes, Mikrofone und Schaltschränke, die jeweils einzeln überwacht werden und von Mitarbeitern vor Ort schnell gefunden werden müssen.
Durch Gebäude navigieren, Geräte finden
Die Grundlage für die Übersicht ist eine zentrale Navigation, die es ermöglicht, sich digital durch das Gebäude zu bewegen und intuitiv die richtigen Orte zu finden. In der Audio-Control-Lösung werden Räume und Zonen als interaktive Karten dargestellt, in denen sich Geräte gezielt lokalisieren, einzeln anwählen und eindeutig identifizieren lassen.
Geräte überwachen: Status immer im Blick, schnell reagieren
Dabei helfen Blickrichtung, technische Eigenschaften und Statusanzeige. Über ein dreistufiges Farbschema (grün = stabil, orange = kritisch, rot = Fehler) wird der Zustand sofort erkennbar. Nutzer können schon auf Gebäudeebene sehen, wo sich ein Problem anbahnt – und etwa auf Verbindungs- oder Hardwareprobleme reagieren, bevor es zu Ausfällen kommt.
Devices können jederzeit unabhängig von ihrem Ort gelistet und nach Typ, Status oder Stichwort gefiltert werden. Alle Details können aus jeder Ansicht geöffnet werden. Die Geräte-Info zeigt alle relevanten Informationen zu Status, Audio-Routing und Hardware.
Geräte in Betrieb nehmen und testen. Auch ohne Spezialistenwissen.
Geräte konfigurieren, anpingen, Testgeräusche senden – all das ist direkt aus dem Interface möglich. Alles geschieht in klaren Schritten mit nachvollziehbarem Feedback. Bewusst so gestaltet, dass nicht nur Audio Engineers damit arbeiten können, sondern auch Kundenteams vor Ort.
Unterschiedliche Nutzergruppen sehen dabei nur, was für sie relevant ist – Komplexität wird gezielt reduziert, ohne Funktionalität zu verlieren.
Leistungen und Technik
Wir entwickelten das Interface als React-Applikation – performant, skalierbar und in der Lage, komplexe Echtzeit-Daten aus dem Backend dynamisch darzustellen.
Für die durchgängige Oberfläche bauten wir eine eigene Komponenten-Bibliothek auf. Wiederverwendbare UI-Elemente halten das System einheitlich und jederzeit erweiterbar.
Aufbauend auf User Stories, Anforderungen und ersten Konzepten von STAGETEC haben wir gemeinsam die UX weiterentwickelt. Über User-Flows und Wireframes konzipierten wir unterschiedliche Screens und Szenarien und diskutierten diese mit den Experten. So konnten wir die Bedürfnisse und Aufgaben der verschiedenen Nutzergruppen verstehen und sinnvolle Flows empfehlen.
Orientiert an der STAGETEC-Designsprache entwickelten wir ein ständig wachsendes Designsystem aus Style-Definitionen, UI-Komponenten, Blöcken und Screens in Figma. Bei Bedarf entstanden außerdem Designprototypen für wichtige Flows, um Stakeholder frühzeitig abzuholen.
Events planen und starten. Durchsagen managen. In Echtzeit.
Audio in Großprojekten ist nicht statisch – es folgt Ereignissen, Nutzeraktionen und im Ernstfall auch Notfallszenarien. Damit Signalmanagement live reibungslos funktioniert, braucht es gute Planung und klare Regeln.
In der Audio-Control-Lösung können Events geplant, gestartet oder spontan geändert werden. Das System steuert die passenden Delays und das Audio-Routing intelligent und respektiert dabei, was sonst gerade läuft. Per Software lassen sich Mikrofone und Lautsprecher jederzeit aktivieren, Live-Durchsagen starten und mit automatischer Priorisierung versehen.
Event-Planung: Audio-Einstellungen vorkonfigurieren
Damit ein Live-Event pünktlich startet und der Ton überall sauber ankommt, muss das Audio-Setup schnell ladbar sein – mit allen relevanten Mikrofonen, Latenzen und Szenen. Dafür braucht es eine saubere Planung.
Messe-Vortrag: Audio-Setup pünktlich laden
Nehmen wir als Beispiel einen Vortrag auf einer Messe. Dabei steht das Mikrofon des Speakers in der Haupthalle im Mittelpunkt. Egal wo im Raum ich mich befinde, ich möchte den Speaker klar hören. Ohne Verzögerungen oder Doppelungen. Dafür gibt es eine Konfiguration: Wo steht das Mikrofon? Wo soll der Vortrag zu hören sein? Für wann ist das Setup geplant? So können die Latenzen aller Lautsprecher im Hintergrund passend gesetzt werden – das Signal wird sauber im Netzwerk geroutet.
Flexibel bleiben: Audio-Setup anpassen und erweitern
So exakt das Audio-Setup für das Event eingestellt ist, so flexibel muss es bleiben. Nach dem Vortrag steigen wir in eine Podiumsdiskussion ein mit zusätzlichen Mikrofonen. Eine erweiterte Konfiguration kann dafür mit einem Klick geladen werden.
Wächst das Interesse im Foyer vor der Halle und der Vortrag soll dort zu hören sein? Kein Problem: Zusätzliche Lautsprecher können angesteuert werden – mit der richtigen Latenz in gewohnter Qualität.
Durchsagen und Nutzerrechte: Was passiert im Notfall?
Muss ein Gebäudeteil geräumt werden, können Besucher innerhalb von Sekunden informiert werden. Eine Durchsage überschreibt alle anderen Signale im gewünschten Bereich. Ein Notfall hat immer höchste Priorität.
Ist jede Durchsage ein Notfall? Ein wichtiger Vortrag darf nur im Ausnahmefall unterbrochen werden, nicht durch eine reine Besucher-Information. Daher gibt es ein klares Prioritäten- und Rechte-Management.
Gemeinsam zur User Experience
Ob Navigation, Geräteüberwachung, Inbetriebnahme oder Notfalldurchsagen – all das funktioniert nur, wenn das Interface in jeder Situation klar bleibt.
Die Audio-Control-Lösung baut auf der bestehenden Stagenet-Solution-Plattform von STAGETEC auf. Im konkreten Projekt traf die technische und fachliche Grundlage von STAGETEC auf unsere UI/UX- und Frontend-Expertise.
Möglich wurde das durch die enge Zusammenarbeit mit STAGETEC – und unser tiefes Einarbeiten in die Audio-Welt. Gemeinsam haben wir uns an bewährten Bedienkonzepten bestehender Audio-Software orientiert und über Wireframing, Prototypen und intensives Testing passende Konzepte für neue Anwendungsfälle entwickelt.
Das Ergebnis: Wir haben ein komplexes technisches Thema für unterschiedliche Nutzergruppen zugänglich, verständlich und bedienbar gemacht. Was dabei entstanden ist, ist mehr als ein Interface. Es zeigt, dass Softwarelösungen nicht nur mit der dahintersteckenden Technik beeindrucken – sondern vor allem mit Klarheit.
Customised. Smart. Skalierbar.
Die neue Audio-Control-Lösung ist erfolgreich im Einsatz. Die dabei gewonnenen Learnings können in die Weiterentwicklung für ähnlich komplexe Szenarien einfließen.
Auf Basis von Stagenet Solution lassen sich solche Anwendungen individuell auf die Anforderungen der jeweiligen STAGETEC-Kunden zuschneiden – mit dem Ziel, komplexes Signalmanagement und die Umsetzung großer Audioprojekte einfacher, übersichtlicher und sicherer zu machen.