Case Study 01Energie
Inspektions-App für den technischen Außendienst
Komplexe Inspektions- und Arbeitsprozesse, übersetzt in eine App, die Techniker unterwegs verstehen – auf Smartphone und Tablet.
- Kunde
- Energieversorger
- Zeitraum
- 2024 – 2025
- Rolle
- UI/UX Designer
- Plattform
- Mobile Enterprise-App · Smartphone & Tablet
- Werkzeuge
- Figma
01 Ausgangslage
Techniker im Außendienst arbeiten Inspektionen nach festen, oft komplexen Abläufen ab. Die App sollte diese Prozesse verständlich abbilden – auf Smartphones und Tablets, für Menschen, die nicht am Schreibtisch sitzen.
02 Erkenntnisse
- Erkenntnis 01
Inspektionen passieren selten am Stück
Techniker werden unterbrochen, wechseln zwischen Anlagen und kommen später zurück. Die App muss jederzeit zeigen, wo sie stehengeblieben sind.
- Erkenntnis 02
Smartphone und Tablet sind beide Alltag
Unterwegs reicht das Smartphone, an der Anlage wird mit dem Tablet gearbeitet. Wer das Gerät wechselt, darf sich nicht neu orientieren müssen.
- Erkenntnis 03
Die Sprache der Techniker zählt
In den Gesprächen wurde klar: Fachbegriffe aus dem Arbeitsalltag sind selbstverständlich, abstrakte Systembegriffe nicht.
03 Entscheidungen
- 1← Aus Erkenntnis 01
Checkliste mit sichtbarem Fortschritt
Jede Inspektion ist eine geführte Checkliste mit Fortschritt („7 von 12“). Offene Punkte bleiben markiert, sodass man nach einer Unterbrechung direkt weitermachen kann.
- 2← Aus Erkenntnis 02
Ein Layout-System für beide Geräte
Auf dem Tablet liegen Liste und Detail nebeneinander, auf dem Smartphone untereinander. Gleiche Komponenten, gleiche Reihenfolge, gleiche Begriffe.
- 3← Aus Erkenntnis 03
Klare Status statt Systemsprache
Drei eindeutige Zustände – in Ordnung, Mangel, offen – mit Farbe und Text, benannt mit den Worten aus dem Außendienst.
04 User Flow
Eine Inspektion abschließen
- 01Auftrag öffnen
- 02Anlage wählen
- 03Checkliste abarbeiten◇ Mangel gefunden?Foto & Notiz erfassen ↩
- 04Zusammenfassung prüfen
- 05Abschließen & übermitteln
05 Wireframes
↔ Zum Scrollen ziehen
Vereinfachte, verallgemeinerte Darstellung – keine Original-Screens, Daten oder Kundeninhalte.
06 Design-System
Vereinfachte, verallgemeinerte Darstellung – keine Original-Screens, Daten oder Kundeninhalte.
Farben
- amber-500#FFB21EPrimäraktion, Fortschritt
- ink-900#1B1400Text, Icons
- surface-50#FFF8E8Flächen, Karten
- status-ok#1F9D55In Ordnung
- status-defect#D93A2BMangel
- status-open#8A8578Offen
Typografie
- Display · 28/34 · 700Aufträge heute
- Title · 20/28 · 600Anlage 14
- Body · 16/24 · 400Sichtprüfung auf Schäden
- Label · 13/16 · 6007 VON 12 GEPRÜFT
Abstände
- 4
- 8
- 12
- 16
- 24
- 32
Radius
Komponenten
Große Touch-Ziele (mind. 48 px) und Status immer mit Farbe und Text.
07 Vorgehen
- 1
Zielgruppe verstehen
User Research und enge Abstimmung mit Technikern aus dem Außendienst als Grundlage für die Gestaltung der Abläufe.
- 2
Prozesse strukturieren
Verständliche Oberflächen für Inspektions- und Arbeitsprozesse – komplex im Hintergrund, klar in der Bedienung.
- 3
Design-System aufbauen
Ein konsistentes System aus wiederverwendbaren Komponenten in Figma, responsiv für Smartphone und Tablet.
- 4
Prototypen & Übergabe
Interaktive Prototypen, um Bedienabläufe vor der Umsetzung zu prüfen, und enge Zusammenarbeit mit dem Entwicklungsteam.
08 Lieferumfang
- Vollständige UI/UX der App
- Design-System für Smartphone & Tablet
- Komponentenbibliothek in Figma
- Interaktive Prototypen
- Responsive Layouts für verschiedene Geräte
Mehr zeige ich gern persönlich.
Kundenname und Original-Screens dieses Projekts teile ich nicht öffentlich. Im Gespräch führe ich dich gern durch Entwürfe, Prototypen und Entscheidungen.