PROGAS Teaser Mockup Kundeportal Landingpage in Desktop- und Mobile-Ansicht

PROGAS: Relaunch Kundenportal

Altes System modernisiert

Technische, optische und anwenderfreundliche Runderneuerung des bestehenden Kundenportals von PROGAS.

Konzeption

UX/UI-Design

Web/App Development

Systemarchitektur

Betriebsunterstützung

Administration/DevOps

API/Schnittstellen

Kommunikation/Koordination

Go-Live

Jahr
2020-heute

Kunde
PROGAS

Sektor
Energie

Herausforderung
Sicherheit und Massendatenverarbeitung über APIs

Technologien
Symfony, Angular

Unsere Rolle
Anforderungsanalyse, Konzeption, UI-/UX-Design, Architektur, Umsetzung, Testing, Dev-Ops

Die ursprüngliche Anforderung?

Kundenportal auf modernere Technologien portieren.

Was daraus wurde?

Ein Kundenportal was seinen Namen verdient. Als zentrale Kommunikationsschnittstelle zwischen Kunden und PROGAS dient das Portal heute zeitaktuell zum regelmäßigen Austausch zwischen allen Kundenstrukturen und PROGAS.

"Indivualentwicklung war das größte Risiko und hat sich voll ausgezahlt."

Herausforderungen

Prozesskomplexität und Funktionsvielfalt sicherstellen

Die Situation:

Bestehende Funktionen und Prozesse portieren & verbessern
Neues UX/UI kundenzentriert, nicht funktionsbasiert
Bi-direktionale Schnittstellen zum bestehenden ERP der PROGAS
Wartungs- und Pflegeprozesse verringern
Datengrundlage sowohl auf Unternehmens-, als auch auf Kundenseite verbessern
Modulare, zukunftsweisende Systemarchitektur sowie moderner zukunftssicherer Technologie-Stack

Die Herausforderung:

Erfassung, Strukturierung, Aufbereitung, Verbesserung aller im Portal befindlichen Prozesse, Informationen und Inhalte. Informationen müssen für den Nutzer verständlicher wahrnehmbar und Funktionen fehlertolerant genutzt werden können.

Veraltete Technologie

Die Situation:

Das neue Kundenportal soll auf einen zukunftssicheren Technologie-Stack gesetzt werden
Die Architektur und Systemstruktur muss modularen Anforderungen entsprechen
Es muss die Möglichkeit geschaffen werden, mit anderen Systemen zu interagieren
Sicherheitslücken müssen geschlossen werden

Die Herausforderung:

Aktuelle Implementierung kann so nicht aufrecht erhalten werden. Das kundenseitige Investitionsrisiko muss verringert werden.

UX/UI und Kommunikationsdesign

Die Situation:

Veraltete und funktionsgetriebene UI
UX folgte technischen Auflagen
Mangel an Nutzungstoleranz und Eingabeprüfung
Kein belastbares Kommunikationsdesign zur Nutzerführung

Die Herausforderung:

Das funktions- und technischen Beschränkungen folgende Kommunikationskonzept muss komplett neu erdacht werden.

Agil in der Sache,
strukturiert im Vorgehen

Neben der Evaluierung des bestehenden Systems und Erarbeitung eines neuen Kommunikationskonzepts gemeinsam mit dem Kunden haben wir eine komplett neue Systemarchitektur sowie ein modernes User-Interface konzipiert und mit modernen Technologien vollumfänglich umgesetzt.

Konzeption

Evaluierung aller bestehenden Informationen, Funktionen und Prozesse sowie Überführung dieser in ein neues Kommunikationskonzept.

Informationen müssen weiterhin ersichtlich sein
Bestehende Funktionen müssen weiterhin angeboten werden
Prozesse müssen weiterhin unterstützt werden
Validierungsregeln müssen umgesetzt werden
Schnittstellen müssen gleichermaßen bedient werden
UX/UI muss verbessert werden

Umsetzung

Aufteilung des Workflow- und Funktionsumfangs in eigene Modulbereiche basierend auf einer strukturierten Basiskomponentenbibliothek.

Modularisierung durch Basiskomponentenbibliothek sowie durch Aufteilung in kontextgetriebene, logische Bereiche
Standard-Kommunikationsmodelle zwischen den Modulen und Tier
Nahezu 100% Testabdeckung aller relevanten und zentralen Businesslogikanteile
Zugriffsregulierende Steuerung basierend auf OAuth.

Architektur und Technik

Es soll eine Three-Tier-Architektur auf einer RestFull-Api entstehen, welche modernsten modularen Paradigmen folgt und durch die verwendeten Frameworks und Technologien zukunftstauglich ist.

Frontend als eigene, logikfreie Schicht
Backend als zentrale Steuereinheit
Datenbanksystem als Persistenzschicht
Symfony und Angular als moderne, zukunkftsorientierte Standard-Frameworks

Check mal unsere Disziplinen Projektmanagement
und Technische Entwicklung aus!

Belastbare und flexible Strukturen am Anfang der Umsetzung schaffen

Dies gewährleistet über den gesamten Umsetzungsprozess hinweg die notwendigen Freiheiten und zum Ende hin die erwartete Effektivität.

Unsere Lösung

Wir schaffen digitale Prozesse

Fehlertolerante Workflow-gestützte Hilfestellung für die Nutzer:innen, wo sie tatsächlich gebraucht wird. Übersichtlich. Informativ. Nutzerzentriert.

Check mal unsere Disziplinen
Konzeption und
Strategische Beratung aus!

Die Applikation wurde nach einem klassischen Entwicklungsansatz unter Verwendung eines Pflichtenhefts entwickelt und in einer Docker-gestützten Entwicklungsumgebung umgesetzt. Gerade für die Umsetzung eines Kundenportals mit mehreren Schnittstellen war hier die Umsetzung eines Build-Prozesses als Continuous Integration und Continuous Deployment Verfahren mit automatisiertem Unit-Testing unumgänglich. Zum Einsatz kamen u.a. git, Bitbucket, PHP Deployer, PHPUnit und DockerHub.

Realisiert haben wir die skizzierten Backend-Funktionalitäten mit PHP 8, Symfony, Doctrine und MySQL. Front- und Backend kommunizieren über eine definierte, Unittest-gesicherte, REST API. Gleichzeitig verfügt die Applikation über APIs zur Kommunikation und Integration von weiteren Kundensystemen (z.B. ERP), um die Ausbaufähigkeit bei künftigen Anforderungen sicherzustellen. Um Inkonsistenzen von Datensätzen zu vermeiden, findet sowohl im Frontend wie im Backend eine Datenvalidierung statt.

Das System bietet weiterhin Mechanismen an, mit denen weitere externe Dienstleister integriert werden konnten, z.B. ein Anbieter von Kundenbindungs-Maßnahmen, um den Kunden weitere Anreize zur Nutzung des Kundenportals anzubieten.

PROGAS Kundenportal-Relaunch: Übersicht der UI-Elemente

PROGAS Kundenportal-Relaunch: modernes Typografie-System mit optimierten Schriftgrößen und -schnitten

Phase 1

Webbasierte Lösung

Maßgeschneiderte Angebote effektiv kalkuliert

Was wir gebaut haben

SinglePage Webanwendung
Zentrale Datenhaltung
Ausfallsicherheit
Skalierbarkeit
Reaktionsschnell

Technologie

Skalierbare Systemumgebung
Europäische Serverumgebung
Ausfallsichere Datenbank mit möglicher Datensicherungsstrategie
Zugriffsbeschränkungen
Maximale Datensicherheit durch laufende, unabhängige Security Audits

Business-Impact

Skalierbare Systemumgebung für dynamisches Kundenwachstum
Dynamisch aktuelle Datenhaltung und Anzeige über alle Ebenen der Anwendung
Bi-Direktionale Schnittstellen

Phase 2

Einfach UX/UI für komplexe Sachverhalte

Ein nutzerfreundlicher Servicekanal als Hilfe für alle Kundengruppen der PROGAS.

Umfassende Kundenportal-Funktionalitäten

Das neue PROGAS-Kundenportal bietet drei Hauptbereiche: Vertragsverwaltung mit vollständigem Zugriff auf alle Stammdaten, umfangreiche Serviceinformationen wie Abschläge, Rechnungsanzeige mit Download-Funktion, Verbrauchsübersichten und eine digitale Infothek. Zusätzlich stehen praktische Self-Service-Funktionen zur Verfügung: Abschlagsanpassungen, digitale Zählerstandsübermittlung, ein intelligenter Prognoserechner für Verbrauchsschätzungen, Online-Flüssiggasbestellung sowie automatische Wartungserinnerungen. Speziell für Autogastankstellen gibt es erweiterte Features wie Preisänderungsanträge und Verkaufsdatenübermittlung.

Notwendigkeit der Neuentwicklung

Die Ablösung des Bestandsportals war unumgänglich aufgrund mehrerer kritischer Schwachstellen: Die alte Lösung hatte keine klare Benutzerführung und litt unter einer inkonsistenten Kommunikationsstrategie. Der Funktionsaufbau war nicht einheitlich strukturiert und wenig fehlertolerant, was zu häufigen Nutzerproblemen führte. Besonders gravierend war die veraltete Systemarchitektur ohne Skalierbarkeit für zukünftige Anforderungen. Das Fehlen einer modernen Komponentenbibliothek verhinderte effiziente Weiterentwicklungen und Wartungen. Diese technischen Schulden machten eine komplette Neuentwicklung mit zeitgemäßer Architektur erforderlich.

Moderne Portalarchitektur und Benutzerfreundlichkeit

Das neue Kundenportal setzt auf maximale Benutzerfreundlichkeit durch intuitive Navigation und fehlertolerante Eingabemasken. Die skalierbare Systemarchitektur basiert auf einer wiederverwendbaren Komponentenbibliothek, die schnelle Anpassungen und Erweiterungen ermöglicht. Sicherheit ist von Anfang an integriert (Security by Design) und wird durch regelmäßige unabhängige Prüfungen gewährleistet. Das responsive Design garantiert volle Funktionalität auf allen Endgeräten, vom Smartphone bis zum Desktop. Ein strukturiertes Lifecycle-Management sichert kontinuierliche Updates und langfristige Wartbarkeit des Systems.

Vom Konzept bis zum Go-Live –
Alles aus einer Hand

Konzept, UX/UI, Komponentenbibliothek, iteratives Vorgehen und kontinuierliche Präsentation der erreichten Meilensteine mit dem Kunden zusammen. Wie wir ein System schrittweise skaliert, auf die Arbeit vorbereitet und den Bedürfnissen der Nutzer:innen entsprechend erweitert haben – ohne Big-Bang, dafür mit messbaren Erfolgen und zur Zufriedenheit von Kunden und PROGAS.

Kommunikationskonzept

Einheitliche Kommunikation

Maßgeschneiderte UX/UI zur Verbesserung der Kundenzufriedenheit

Ziel:

Das Portal als zentrale Anlaufstelle für alle Kundengruppen der PROGAS

Meilensteine:

Einheitliches Kommunikationskonzept

Ergebnis:

Abgestimmtes Kommunikationskonzept als Basis für die Komponentenbibliothek

Komponentenbibliothek

Die Grundlage für nachhaltige Entwicklung

Basierend auf dem Kommunikationskonzept ist eine Basiskomponentenbibliothek entstanden, die als Grundlage für alle weiteren geschaffenen Funktionen und digitalisierten Prozesse dient.

Ziel:

Effektivität und Effizienz sowohl im Einsatz als auch in der Entwicklung

Meilensteine:

Logischer und funktionaler Schnitt der Basiskomponenten
Ausgestaltung der Basiskomponenten
Positives Feedback von PROGAS
Go für die Umsetzung

Ergebnis:

Definierte und ausgestaltete Basis-Komponenten als Grundlage für die Gesamtapplikation

Modulare Systemarchitektur

Architektur & Umsetzung

Aufbau einer modularen Systemarchitektur basierend auf der Komponentenbibliothek.

Ziel:

Übernahme aller bestehenden Funktionen

Meilensteine:

Aufbau einer docker-basierten lokalen Entwicklungsumgebung
Aufbau einer Continuous Integration & Deployment Pipeline mit automatisiertem Unit-Testing
Aufbau der dynamischen Schnittstelle zum bestehenden ERP der PROGAS
Aufbau der digitalen Prozesse
Go für Rollout

Ergebnis:

Moderne, skalierbare Webanwendung

Maximale Testabdeckung

Strukturierte Testabdeckung für Qualität und Sicherheit

Erstellung einer maximalen, wirtschaftlichen Gesichtspunkten standhaltenden Testabdeckung der Kernfunktionalitäten und Schnittstellen.

Ziel:

Sicherheit, Transparenz und Beständigkeit durch Testabdeckung.

Meilensteine:

Konzeption und Formulierung der Testabdeckung
Strukturierung und Einbindung in den Commit-Prozess
Einbindung eines leistungsfähigen, bewährten Test-Frameworks
Umsetzung der Test

Ergebnis:

Systemhärtung und Gewährleistung gleichbleibend hoher Funktions- und Codequalität
Transparenz in der Sicherheit der Funktionen gegenüber PROGAS
Grundlage für spätere Security Audits

Ergebnis

Altes Portal

Abgelöst

Durch ein modernes UX-getriebenes Kommunikationsinstrument

Robustheit

erreicht

Durch Umsetzung einer modernen Architektur

Nutzerfeedback

positiv

Weil es einfach Spaß macht, mit dem Kundenportal zu interagieren

Kundensupport

entlastet

Durch fehlertolerante Eingabeprozesse

Regelmäßige Security Audits

bestanden

Durch moderne Kommunikationsarchitektur

In Time

Realisiert

Durch meilensteinbasierte Projektkoordination

Unsere Tools

Beratung

Google Analytics

Google Tag Manager

Cai

Adobe XD

Confluence

RapidUsertests

XOVI

Konzeption

Google Analytics

Atlassian

Adobe XD

Adobe Illustrator

Adobe InDesign

Confluence

Miro

Design

Adobe XD

Adobe Aero

Adobe After Effects

Adobe Animate

Adobe Audition

Adobe Illustrator

Adobe InDesign

Adobe Lightroom

Adobe Photoshop

Adobe Premiere Pro

Adobe Substance

Apple Logic Pro

Blender

Figma

Flux

Midjourney

Pika

Procreate

Runway

Sora

Stable Diffusion

Steinberg Cubase

Suno

Veo

Weavy

Entwicklung

Sass

Deployer

Doctrine

PHP

Angular

JavaScript

Bitbucket

Google Analytics

Composer

npm

TypeScript

D3.js

Twig

MySQL

Symfony

Moment.js

Cursor

PHP Unit

Docker

JWT

Webpack

Angular Material

Azure

Bootstrap

CI/CD-Pipelines

Contao

CookieHub

Flow

Fusion

GSAP

Gulp

Handlebars

Helm

jQuery

krpano

Kubernetes

Llama

Mercure

n8n

Neos

Pattern Lab

Podman

Protractor

React

Redshift

Selenium

Shopware

Sulu

Three.js

TYPO3

Usercentrics

WordPress

Projektmanagement

Scrum

Bitbucket

Cai

Jira

Atlassian

Dein Vorteil

Unser Fundament

Du möchtest mehr erfahren, wie bei uns Projektmanagement verstanden wird, um solche Projekte erfolgreiche zum Go-Live zu begleiten?

Match?

Starte jetzt
dein Projekt

Von der Idee zur Realität: Als Boutique-Agentur analysieren wir, denken mit und entwickeln passgenaue Konzepte.
Unsere Digitale Originale^® sind kreativ, relevant und technisch perfekt umgesetzt.

Möchtest Du auch alte Systeme modernisieren und Prozesse digialisieren?

Marcus hilft dir gerne.