Im Rahmen meines Schülerjobs bei Centigrade durfte ich in den vergangenen Monaten an einem spannenden Projekt mitarbeiten: dem Continuous Product Toolkit (CPT). Dieses Toolkit vereint hilfreiche UX-Tools – etwa ein Modul, das prüft, ob ein hochgeladener Screen auch für Menschen mit Farbenblindheit barrierefrei nutzbar ist.
Besonders spannend für mich war die Aufgabe, die Frontend-Visualisierung des Generierungsprozesses zu entwickeln. Während ein Tool – oft mit Unterstützung von KI – seine Ergebnisse berechnet, soll der Nutzer den Prozess spielerisch und visuell nachvollziehen können, statt nur auf ein Ergebnis zu warten.
Vom Plattenspieler zur Pipeline
Vor der Umsetzung stand die Frage: Wie lässt sich ein abstrakter Prozess anschaulich darstellen? Gemeinsam im Team diskutierten wir verschiedene Metaphern: von einem Plattenspieler, bei dem jedes Tool eine eigene Schallplatte ist, bis hin zu einer Murmelbahn, in der eine Kugel den Prozess durchläuft.
Entschieden haben wir uns schließlich für die Pipeline-Metapher – ein Fließband mit einzelnen Stationen. Sie passte am besten zur industriellen Nähe von Centigrade, geprägt durch Partner wie Bosch, und ließ zugleich Raum für spielerische Elemente, die unser Joyful-Mindset betonen.
Eine Box auf Reisen
Die Umsetzung sieht so aus:
Eine kleine Box bewegt sich auf einem 3D-Fließband von Station zu Station. Jede Station symbolisiert einen Schritt im Workflow – vom Hochladen der Daten über die Anwendung von Farbfiltern bis hin zur Arbeit mit KI-Modellen. In der Box stecken die individuellen Parameter und Dateien, die den Prozess antreiben.
Eintauchen in neue Technologien
Für die Entwicklung nutzte ich React Three Fiber, eine React-Integration für Three.js. Die 3D-Modelle habe ich in Blender erstellt und mit gebackenen Texturen optimiert, um die Web-App performant zu halten. Spannend war für mich, dass ich vor diesem Projekt noch nie mit Blender gearbeitet hatte. Umso mehr hat mir geholfen, den React Three Fiber Kurs von Bruno Simon zu absolvieren, der mir den Einstieg erleichtert hat.
Auch beim Coding habe ich Neues gelernt. Viele Teile des Frontends entstanden mit Cursor, wodurch ich erste Erfahrungen im „Vibe-Coding“ sammeln konnte. So entstanden schnelle Prototypen, und ich gewann ein besseres Verständnis für Best Practices in der Nutzung von KI-Programmierung-Tools.
Vom Figma-Design zur lebendigen Anwendung
Die Basis bildete unser Figma-Design, das wir intensiv diskutierten. Besonders spannend war die Frage, wie verspielt das Interface sein darf, ohne von der Funktionalität abzulenken. Am Ende entschieden wir uns für eine verspielte Variante des Centigrade-Themes, die das Gamification-Element hervorhebt und gleichzeitig die Klarheit der Anwendung bewahrt.
Persönliche Learnings und Fazit
Das Projekt war für mich eine Reise durch verschiedene Disziplinen:
- 3D-Modelling mit Blender – vom Einstieg bis zur produktiven Nutzung in kurzer Zeit.
- React Three Fiber – lernen, 3D-Welten performant ins Web zu bringen.
- Frontend-Architektur – den Spagat zwischen schnellem Prototyping und sauberem Code meistern.
- Designentscheidungen verstehen – erleben, wie eng Gestaltung und Technik verbunden sind.
Am meisten hat mich begeistert, wie kreativ-technische Arbeit und UX-Design in diesem Projekt ineinandergreifen. So wurde mein Schülerjob bei Centigrade zu einer wertvollen Möglichkeit, früh echte Projekterfahrung zu sammeln und gleichzeitig die Design-Philosophie von Centigrade mitzuerleben: Komplexes sichtbar machen – und dabei Freude schaffen.
