Skip to content
nach morgen — Home
Deutsch English
Several open BIL web pages with maps, tables, and forms float in front of a white monitor in a light gray room

BIL eG |

Online portal for utility location request

User experience and user interface for an online portal

  • Illustration & Animation
  • User experience and interface design

The online portal of BIL eG connects pipeline operators, planners, and builders by enabling them to search for pipelines via a web application. In this project, we conducted a comprehensive review of the portal, developed optimization approaches, and planned further development together with our partners—with the aim of simplifying the user experience and making the system scalable for future requirements.

Background and objectives

The BIL portal is a central service platform of BIL eG that bundles pipeline information throughout Germany. Construction companies, planners, or private individuals with construction projects can submit inquiries here to find out which utility lines (e.g., gas, electricity, water, or telecommunications) run through the affected area. The portal not only facilitates research, but also ensures greater safety, transparency, and efficiency in the construction process.

Read more Read less

However, as usage increased, it became apparent that the existing structure and design no longer met the requirements of the growing target group. Users found the request process to be complex and confusing in some cases, particularly when registering, drawing areas, or verifying requests. The design was also inconsistent and did not provide a scalable basis for new functions. To ensure a user-friendly, modern, and expandable system in the long term, a comprehensive review and further development was necessary.

UX Review

In order to analyze the user-friendliness of the BIL portal in a targeted manner, we conducted a usability inspection. This is an established procedure in which experts examine an interactive system based on defined criteria in order to identify potential problems and deviations from recognized design principles.

The basis for this was provided by both common standards – such as Nielsen’s usability heuristics and the interaction principles according to DIN 9241-110 – and specific requirements of BIL eG. These criteria enabled a comprehensive analysis and evaluation of user-friendliness.

Read more Read less

The inspection itself involved repeated use of the application in different contexts. This enabled us to systematically identify deviations from the criteria and pinpoint specific usability problems.

The results were documented in a detailed report and discussed with the client. This led to specific recommendations for optimizing navigation and user guidance, eliminating identified usability issues, improving the user experience, and fundamentally revising the user interface with the aim of achieving simple, consistent, and understandable operation.

These findings formed the basis for the subsequent conception of the new interface design and design system.

Cover page of a document with the \
Document page titled „Usability-Inspektion“ (Usability Inspection) for the BIL portal, created by nach morgen, with a list of inspection criteria for task appropriateness, self-descriptiveness, expectation conformity, learnability, and controllability
Document page of the „Usability-Inspektion“ (usability inspection) for the BIL portal with criteria for robustness against errors, user loyalty, and interface design
Document page with the section „Fokus der Inspektion“ (Focus of the inspection) which describes the structure of the usability inspection report for the BIL portal
Document page with the table of contents of the document on usability inspection of the BIL portal
Document page with chapter „A Allgemein“ (A General) of the usability inspection of the BIL portal, which states that the core functions are fulfilled

Interface Design

Based on the UX review, we developed a consistent interface design: clearly structured layouts, defined interaction states, a set of recurring UI patterns, and a text/language concept for understandable help texts. Special attention was paid to restructuring the area for enquirers and designing a dashboard as a central entry point. The design is responsive, takes accessibility into account, and lays the foundation for modular components that can be easily expanded.

Aerial view of a densely built-up city with red roofs, crisscrossed by a wide multi-lane road
  • Green
  • Navy
  • Teal
  • Silver
  • Silver
Color palette
Collection of many different white icons, including folders, pens, check marks, speech bubbles, calendars, locations, arrows pointing in different directions, magnifying glasses, people icons, documents, trash cans, plus signs, minus signs, crosses, bells, layer stacks, and other standard UI icons

We have built up an extensive design library with numerous interface patterns for the BIL portal. It forms the basis for a consistent user experience, facilitates further development, and ensures that new functions can be integrated quickly and seamlessly.

Display of various button designs in the BIL portal in Primary, Secondary, and Icon variants. The Default, Hover, Active, and Disabled states are shown with labels such as „Anfrage stellen“ (Submit request), „Anfrage löschen“ (Delete request) and „Anmelden“ (Log in)
Display of various radio buttons and checkboxes in the BIL portal design in large, medium, and small sizes. The default, hover, active, and disabled states are shown
Display of a search and filter function in the BIL portal with search field and drop-down menus
Display of the login and registration screen of the BIL portal: on the left, login with username and password; on the right, form for creating an account
Darstellung verschiedener Navigationsleisten des BIL-Portals in Zuständen Default, Logged In, Dropdown Profile Menu und During request

Animated videos

Explanatory animations visualize complex processes and reduce training requirements and support requests. For the BIL portal, we produced short animations that demonstrate, among other things, how to draw areas, create a request, and use the dashboard step by step. The clips are short, concise, and can be used directly in the application as well as in training and onboarding materials.

Result

The BIL portal has been running successfully for several years with its new design and user guidance and was developed by project partner GEOMAGIC. Through close cooperation with BIL eG and GEOMAGIC, we were able to review existing structures, implement specific improvements, and transfer new functions into a consistent interface design.

We continue to provide ongoing support for the portal—because digital products are never “finished.” They must be regularly reviewed, adapted, and further developed in order to meet both new technical requirements and user expectations.