As part of my student job at Centigrade, I was able to work on an exciting project over the past few months: the Continuous Product Toolkit (CPT). This toolkit combines helpful UX tools – such as a module that checks whether an uploaded screen is accessible for people with color blindness.
The task of developing the front-end visualization of the generation process was particularly exciting for me. While a tool calculates its results – often with the support of AI – the user should be able to understand the process playfully and visually instead of just waiting for a result.
From record player to pipeline
Before implementation, the question was: how can an abstract process be visualized? Together as a team, we discussed various metaphors: from a record player, where each tool is a separate record, to a marble run, where a marble runs through the process.
In the end, we opted for the pipeline metaphor – a conveyor belt with individual stations. It best suited the industrial proximity of Centigrade, characterized by partners such as Bosch, and at the same time left room for playful elements that emphasize our joyful mindset.
A box on a journey
The implementation looks like this:
A small box moves from station to station on a 3D conveyor belt. Each station symbolizes a step in the workflow – from uploading data to applying colour filters to working with AI models. The box contains the individual parameters and files that drive the process.
Immersing myself in new technologies
For the development, I used React Three Fiber, a React integration for Three.js. I created the 3D models in Blender and optimized them with baked textures to keep the web app performant. It was exciting for me that I had never worked with Blender before this project. It helped me all the more to complete Bruno Simon’s React Three Fiber course, which made it easier for me to get started.
I also learned new things about coding. Many parts of the front end were created with Cursor, which allowed me to gain my first experience in “vibe coding”. This resulted in quick prototypes and I gained a better understanding of best practices in the use of AI programming tools.
From Figma design to living application
The basis was our Figma design, which we discussed intensively. The question of how playful the interface could be without distracting from the functionality was particularly exciting. In the end, we opted for a playful version of the Centigrade theme that emphasizes the gamification element while maintaining the clarity of the application.
Personal learnings and conclusion
The project was a journey through various disciplines for me:
- 3D modeling with Blender – from getting started to productive use in a short time.
- React Three Fiber – learning to bring 3D worlds to the web with high performance.
- Frontend architecture – mastering the balancing act between fast prototyping and clean code.
- Understanding design decisions – experiencing how closely design and technology are linked.
What excited me most was how creative-technical work and UX design intertwined in this project. This made my student job at Centigrade a valuable opportunity to gain real project experience at an early stage and at the same time experience Centigrade’s design philosophy: Making the complex visible – and creating joy in the process.
