Core Project Components

Multi-site structure: All portals (careers, sustainability, leisure, etc.) are managed from one CMS. Each portal retains its own structure and navigation, while the unified corporate design ensures recognition. This consolidation significantly reduces maintenance effort and enables efficient content reuse.

Situational customer communication: The new communication framework enables targeted, context-dependent, real-time messaging. Depending on urgency and topic, messages vary from subtle notices to prominent alerts – always clear and directly relevant.

Service integration: Core services such as meter readings, incident reports, or event information are directly embedded into the website. All functions are mobile-optimized and usable without media breaks.

Inclusive design: Clear structures, high-contrast design, and simple navigation ensure accessibility. Eye-Able adds customizable options without compromising the Stadtwerke CI.

Approach

The project began with a detailed analysis of existing portals, services, and communication channels. The goal was to fully understand the starting point and design a central architecture that supports both multi-site structures and service/communication integration.

Based on this, we developed a UX and UI concept focused on clear, accessible navigation in the Stadtwerke CI. Flexible communication surfaces were a central element – adaptable from subtle notifications to prominent alerts, without disrupting the user experience.

The technical implementation created a scalable TYPO3 multi-site structure, complemented by the new communication framework and seamless integration of key services. Interfaces were designed to provide consistent information and functions across systems.

Finally, we trained the editorial team to manage content, services, and situational messages independently. The go-live was rolled out gradually to ensure a smooth transition from previous systems.

Project Highlights

Communication Framework as Editorial Hub

The new framework allows situational messages to be placed across all portals within seconds – from subtle notices (e.g., changed opening hours) to large-scale outage warnings. Editorial teams can control messages by urgency, audience, and context. The architecture ensures consistency and easy integration of future channels.

Unified User Experience Across Topics

Energy, leisure, careers, or sustainability – every portal follows the same clear user logic. Reusable modules and content ensure consistency, reduce effort, and create a familiar interface for users.

Seamless Service Integration

Key functions such as meter readings, incident reporting, or event information are embedded directly, mobile-optimized, and free of media breaks – requests are processed in the connected back-end systems.

Inclusive Design as Standard

The interface follows WCAG principles, with high contrast, clear structure, and simple navigation. Eye-Able adds customization options, ensuring accessibility for as many users as possible without breaking CI.

Direct access to relevant information – rethought

The platform combines content, services, and situational notifications so that users can reach the information relevant to them more quickly.
Event-driven notices – for example regarding grid maintenance, timetable changes, or event cancellations – appear directly in context and link to further details or forms.
Initial evaluations show that the targeted delivery of relevant content noticeably increases both interaction rates and service understanding.

User Experience & Interface Design

The design process began with an analysis of existing user paths: Which services are used, and how? Where do searches or requests drop off? How can situational notifications be integrated clearly and accessibly?
From this, a UX/UI concept was developed that focuses on clear structures, concise navigation, and visually unambiguous signals – regardless of the device used.
Responsive layouts, clear calls to action, and context-sensitive content ensure that information appears in the right place at the right time.

Design System as the foundation of the platform

All UI components, color schemes, typography, and spacing rules were consolidated into a single design system.
It ensures a consistent appearance, simplifies maintenance, and accelerates the implementation of new portals or features.
Accessible design principles and modular components guarantee that the platform remains expandable in the long term – and that all extensions retain the same visual and functional quality.

Communication Framework & Platform Architecture

At the heart of the new solution is a flexible communication framework that delivers situational messages and notifications in real time. During maintenance, outages, or events, relevant messages can be published within seconds – either subtly (top bar) or prominently (overlay).

The technical foundation is a modular platform architecture where communication areas, service modules, and external interfaces are separated yet seamlessly connected. With the API-first approach, new functions or integrations can be added anytime without disrupting the infrastructure.

UX Research & Interaction Logic

We began with an in-depth analysis of user paths and information needs: Which content is accessed when and how? Which services need to be prioritized? How can messages be visually designed to be clear without being disruptive?

From these insights, we developed an interaction logic that delivers context-specific content and services. Clear visual cues, logical grouping, and short paths ensure orientation and readiness to act – in both normal and exceptional situations.

Digital Forms & Interface Design

All service forms – from meter readings to event registrations – were transferred into a unified, web-based interface. The new input logic is responsive, structured, and reacts in real time.

Thematic clusters, optional fields, and supporting notes provide clarity and reduce complexity. Accessibility principles guided the design, which was integrated into the central design system to ensure long-term consistency.

Frontend & Integration

In parallel with the design process, the frontend was rebuilt technically. The multi-site structure enables content and functions to be managed centrally and flexibly published across portals.

Communication surfaces – from banners to overlays – are integrated consistently and updated in real time.
Interfaces to back-end systems connect central services directly – so meter readings, incident reports, or event information are captured and processed without media breaks.
The result: a central platform that unites information, communication, and service in one scalable solution.

Next Project