CityBot
Wartungssystem
Mit meinen Azubi-Kolleg:innen durfte ich bei der EDAG eine App designen: den Prototyp eines imaginären Wartungssystems für die CityBots. Zum Schluss habe ich den Prototyp mit Claude Code in eine Webapp umgesetzt, die wir auf einem Event vorgestellt haben.
Figma-Entwurf · iPad-Format
Ein Wartungssystem für die CityBot-Flotte.
In Figma entstand zuerst ein Designkonzept, danach wurden Icons gezeichnet und Bilder ausgewählt.
Das System richtet sich an zwei Rollen:
Mein Anteil
- 01Mitarbeit am Designkonzept in Figma, unter anderem mit eigenen Ideen und Inspirationen für den Styleguide.
- 02Seitenflow: wie Nutzer:innen von Screen zu Screen kommen.
- 03Umsetzung des Prototyps als klickbare Webapp mit Claude Code.
Styleguide.
Der Styleguide setzt auf kühle Grautöne und einen einzigen Akzent: das EDAG-Rot. Es steht nur dort, wo Nutzer:innen hinschauen sollen. Als Schrift kommt Frutiger zum Einsatz.
- EDAG-Rot
#D71946Nur für Akzente: aktive Seite, Primäraktion, kritische Meldung - EDAG-Grau
#455563Balken, Diagramme, gefüllte Zustände - Graublau
#BBC0C5Seitenmenü - Hellgrau
#F2F2F2Karten, Felder, Buttons - Warnorange
#E67B39Sicherheitshinweise, Schäden - Statusgrün
#1CA638Status: in Ordnung
EDAG-Rot nur für Akzente
Rot markiert die aktive Seite, die Primäraktion und kritische Meldungen. Alles andere bleibt in Hellgrau und EDAG-Grau.
Wichtigkeit über Schnitt und Balken
Fett mit rotem Balken heißt wichtig, Roman mit dunklem Balken moderat, Light mit hellem Balken weniger wichtig.
Glas-Effekt für Overlays
Hinweise und Karten liegen mit rund 60 % Farbtransparenz und Verlauf über dem Inhalt, so bleibt der Kontext sichtbar.
Weiche Ecken, ein Radius
Alle Karten, Felder und Buttons nutzen denselben Eckradius von 6 und wirken dadurch einheitlich.
Vertikales Menü: Die aktive Seite ist rot und sitzt auf einem weißen Backdrop mit Einbuchtung.
Button-Zustände: aktiv in EDAG-Rot, inaktiv in Hellgrau.
Wichtigkeit in Farbe und Schnitt: Rot und Fett für kritisch, Orange für Schäden, Grün für unkritisch.
Sicherheitshinweise in Orange, mit Warnsymbol und ausgeschnittener Ecke.
Vom Entwurf zur Webapp.
Der Figma-Entwurf war der Plan, die Webapp ist das Ergebnis. Beim Umsetzen habe ich das Design weiterentwickelt: mehr Kontrast, echte Zustände und Inhalte, die sich aus Daten aufbauen.
Der Entwurf
Im Team entstand der Entwurf. Die Screens zeigen, wie die App aussehen und funktionieren soll – als Bilder.
- Designkonzept
- Styleguide
- Icons
- Seitenflow
Die Webapp
Mit Claude Code habe ich daraus eine klickbare Webapp gebaut, die sich wie eine echte App bedienen lässt.
- HTML · CSS · JavaScript
- iPad-Format
- Läuft im Browser
Figma
Webapp
Startseite
Was erst beim Bauen dazukam.
Einige Screens gab es im Figma-Entwurf noch nicht. Sie sind beim Umsetzen entstanden, damit sich der Prototyp auf dem Event wie ein fertiges Produkt anfühlt.
- Gemacht fürs EventNach drei Minuten ohne Eingabe setzt sich der Prototyp zurück – der nächste Gast startet wieder bei der Rollenwahl.
- Merkt sich EingabenWarenkorb und Favoriten bleiben gespeichert, solange jemand die Webapp benutzt.
Klick dich selbst durch.
Hier läuft der Prototyp so, wie wir ihn auf dem Event gezeigt haben. Am besten funktioniert er im Querformat auf Tablet oder Desktop.
Als Rolle „Mechatroniker/in“ wählen, die Zugangsdaten sind bereits ausgefüllt. Die Rolle „Fuhrparkleitung“ ist im Prototyp noch nicht umgesetzt.
Im Vollbild öffnen (öffnet in neuem Tab)Hinweis: Alle Daten im Prototyp sind Beispieldaten. Die Marke EDAG und die Abbildungen des CityBots gehören der EDAG und werden hier mit deren Genehmigung gezeigt.