Zum Seiteninhalt springen
nach morgen — Startseite
Mehrere geöffnete BIL Webseiten mit Karten, Tabellen und Formularen schweben vor einem weißen Monitor in einem hellgrauen Raum

BIL eG |

Online-Portal für Leitungsauskunft

User Experiece und User Interface für ein Online-Portal

  • UX & Interface Design
  • Interaktions- & Gestaltungskonzept
  • Workshop
  • Illustration & Animation

Das Online-Portal der BIL eG vernetzt Leitungsbetreiber*innen, Planer*innen und Bautätige, indem es die Recherche nach Leitungen über eine Web-Anwendung ermöglicht. Im Projekt haben wir das Portal einer umfassenden Überprüfung unterzogen, Optimierungsansätze erarbeitet und gemeinsam mit den Partner*innen die Weiterentwicklung geplant — mit dem Ziel, die Nutzungserfahrung zu vereinfachen und das System für zukünftige Anforderungen skalierbar zu machen.

Hintergrund und Zielsetzung

Das BIL-Portal ist eine zentrale Serviceplattform der BIL eG, die deutschlandweit Leitungsinformationen bündelt. Bauunternehmen, Planer*innen oder Privatpersonen mit Bauvorhaben können hier Anfragen stellen, um herauszufinden, welche Leitungen (z. B. Gas, Strom, Wasser oder Telekommunikation) im betroffenen Gebiet verlaufen. Damit erleichtert das Portal nicht nur die Recherche, sondern sorgt auch für mehr Sicherheit, Transparenz und Effizienz im Bauprozess.

Mehr lesen Weniger lesen

Mit zunehmender Nutzung zeigte sich jedoch, dass die bestehende Struktur und Gestaltung den Anforderungen der wachsenden Zielgruppe nicht mehr gerecht wurde. Nutzer*innen empfanden den Anfrageprozess teilweise als komplex und unübersichtlich, insbesondere bei der Registrierung, beim Zeichnen von Flächen oder beim Verifizieren von Anfragen. Auch die Gestaltung war nicht einheitlich und bot keine skalierbare Grundlage für neue Funktionen. Um langfristig ein benutzerfreundliches, modernes und erweiterbares System zu gewährleisten, war eine umfassende Überprüfung und Weiterentwicklung notwendig.

UX Review

Um die Benutzerfreundlichkeit des BIL-Portals gezielt zu analysieren, führten wir eine Usability-Inspektion durch. Dabei handelt es sich um ein etabliertes Verfahren, bei dem Expert*innen ein interaktives System anhand definierter Kriterien prüfen, um potenzielle Probleme und Abweichungen von anerkannten Gestaltungsprinzipien aufzudecken.

Als Grundlage dienten sowohl gängige Standards – wie die Usability Heuristics nach Nielsen oder die Interaktionsprinzipien nach DIN 9241-110 – als auch spezifische Anforderungen der BIL eG. Diese Kriterien ermöglichten eine umfassende Analyse und Bewertung der Nutzerfreundlichkeit.

Mehr lesen Weniger lesen

Die Inspektion selbst umfasste die wiederholte Nutzung der Anwendung in unterschiedlichen Kontexten. Dabei konnten wir systematisch Abweichungen von den Kriterien identifizieren und konkrete Usability-Probleme herausarbeiten.

Die Ergebnisse wurden in einem ausführlichen Bericht dokumentiert und mit der Auftraggeberin diskutiert. Daraus abgeleitet wurden konkrete Handlungsempfehlungen zur Optimierung der Navigation und Nutzerführung, Beseitigung identifizierter Usability-Probleme, Verbesserung der User Experience und grundsätzliche Überarbeitung der Benutzeroberfläche mit dem Ziel einer einfachen, konsistenten und verständlichen Bedienung.

Diese Erkenntnisse bildeten die Grundlage für die anschließende Konzeption des neuen Interface-Designs und des Design-Systems.

Titelseite eines Dokuments mit Logo „nach morgen“ oben links und dem Titel „Usability-Inspektion BIL-Portal“
Dokumentseite mit dem Titel „Usability-Inspektion“ für das BIL-Portal, erstellt von nach morgen, mit einer Liste von Inspektionskriterien zu Aufgabenangemessenheit, Selbstbeschreibungsfähigkeit, Erwartungskonformität, Erlernbarkeit und Steuerbarkeit
Dokumentseite der „Usability-Inspektion“ für das BIL-Portal mit Kriterien zu Robustheit gegenüber Fehlern, Benutzerbindung und Oberflächengestaltung
Dokumentseite mit dem Abschnitt „Fokus der Inspektion“, der den Aufbau des Usability-Inspektionsberichts zum BIL-Portal beschreibt
Dokumentseite mit dem Inhaltsverzeichnis des Dokuments zur Usability-Inspektion des BIL-Portals
Dokumentseite mit Kapitel „A Allgemein“ der Usability-Inspektion des BIL-Portals, das festhält, dass die Kernfunktionen erfüllt werden

Interface Design

Auf Basis des UX-Reviews entwickelten wir ein konsistentes Interface-Design: klar strukturierte Layouts, definierte Interaktions-States, ein Set wiederkehrender UI-Patterns und ein Text-/Sprachkonzept für verständliche Hilfetexte. Besonderes Augenmerk lag auf der Restrukturierung des Bereichs für Anfragende und der Gestaltung eines Dashboards als zentralem Einstiegspunkt. Das Design ist responsiv ausgelegt, berücksichtigt Zugänglichkeit und legt die Basis für modulare Komponenten, die sich einfach erweitern lassen.

Luftaufnahme einer dicht bebauten Stadt mit roten Dächern, durchzogen von einer breiten mehrspurigen Straße
  • Grün
  • Marineblau
  • Blaugrün
  • Silber
  • Silber
Farbpalette
Sammlung vielen verschiedenen weißen Symbolen, darunter Ordner, Stift, Haken, Sprechblase, Kalender, Standort, Pfeile in verschiedene Richtungen, Lupe, Personen-Icons, Dokumente, Papierkorb, Plus, Minus, Kreuz, Glocke, Ebenenstapel und weitere Standard-UI-Symbole

Wir haben für das BIL-Portal eine umfangreiche Design Library mit zahlreichen Interface-Patterns aufgebaut. Sie bildet die Grundlage für ein konsistentes Nutzungserlebnis, erleichtert die Weiterentwicklung und sorgt dafür, dass neue Funktionen schnell und nahtlos integriert werden können.

Darstellung verschiedener Button-Designs im BIL-Portal in Varianten Primary, Secondary und Icon. Gezeigt werden Zustände Default, Hover, Active und Disabled mit Beschriftungen wie „Anfrage stellen“, „Anfrage löschen“ und „Anmelden“
Darstellung verschiedener Radio Buttons und Checkboxes im BIL-Portal-Design in Größen Large, Medium und Small. Gezeigt werden die Zustände Default, Hover, Active und Disabled
Darstellung einer Such- und Filterfunktion im BIL-Portal mit Suchfeld und Dropdown-Menüs
Darstellung der Anmelde- und Registrierungsmaske des BIL-Portals: links Login mit Benutzername und Passwort, rechts Formular zur Kontoerstellung
Darstellung verschiedener Navigationsleisten des BIL-Portals in Zuständen Default, Logged In, Dropdown Profile Menu und During request

Animationsvideos

Erkläranimationen visualisieren komplexe Abläufe und reduzieren Einarbeitungsaufwand sowie Supportanfragen. Für das BIL-Portal produzierten wir kurze Animationen, die u. a. das Zeichnen von Flächen, das Anlegen einer Anfrage und die Nutzung des Dashboards Schritt für Schritt demonstrieren. Die Clips sind kurz, prägnant und direkt in der Anwendung sowie in Schulungs- und Onboarding-Materialien einsetzbar.

Ergebnis

Das BIL-Portal läuft bereits seit einigen Jahren erfolgreich mit dem neuen Design und Nutzerführung und wurde von dem Projektpartner GEOMAGIC entwickelt. Durch die enge Zusammenarbeit mit der BIL eG und GEOMAGIC konnten wir bestehende Strukturen überprüfen, konkrete Verbesserungen umsetzen und neue Funktionen in ein konsistentes Interface-Design überführen.

Wir begleiten das Portal auch weiterhin kontinuierlich – denn digitale Produkte sind nie „fertig“. Sie müssen regelmäßig überprüft, angepasst und weiterentwickelt werden, um sowohl neuen technischen Anforderungen als auch den Erwartungen der Nutzer*innen gerecht zu werden.