![\"Flie\u00dfband](\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Continuous-Product-Toolbox-1.jpg\")
<\/p>\n<\/p>\n
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)<\/strong>. This toolkit combines helpful UX tools – such as a module that checks whether an uploaded screen is accessible for people with color blindness.<\/p>\n The task of developing the front-end visualization of the generation process <\/strong>was particularly exciting for me. While a tool calculates its results – often with the support of AI – the user should be able to understand <\/strong>the process playfully and visually <\/strong>instead of just waiting for a result.<\/p>\n Before implementation, the question was: how can an abstract process be visualized? <\/em>Together as a team, we discussed various metaphors: from a record player<\/strong>, where each tool is a separate record, to a marble run<\/strong>, where a marble runs through the process.<\/p>\n In the end, we opted for the pipeline metaphor <\/strong>– 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 <\/strong>that emphasize our joyful mindset.<\/p>\n The implementation looks like this:<\/p>\n A small box moves from station to station on a 3D conveyor belt<\/strong>. Each station symbolizes a step in the workflow – from uploading data <\/strong>to applying colour filters <\/strong>to working with AI models<\/strong>. The box contains the individual parameters and files that drive the process.<\/p>\n For the development, I used React Three Fiber<\/strong>, a React integration for Three.js. I created the 3D models in Blender <\/strong>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.<\/p>\n I also learned new things about coding<\/strong>. Many parts of the front end were created with Cursor<\/strong>, 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 <\/strong>in the use of AI programming tools.<\/p>\n The basis was our Figma design<\/strong>, 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 <\/strong>that emphasizes the gamification element while maintaining the clarity of the application.<\/p>\n The project was a journey through various disciplines for me:<\/p>\n What excited me most was how creative-technical work <\/strong>and UX design <\/strong>intertwined in this project. This made my student job at Centigrade a valuable opportunity to gain real project experience at an early stage <\/strong>and at the same time experience Centigrade’s design philosophy: Making the complex visible – and creating joy in the process.<\/strong><\/p>\n","protected":false},"author":83,"featured_media":0,"template":"","tags":[840,1035,983,654],"class_list":["post-17777","blog","type-blog","status-publish","hentry","tag-ai","tag-frontend-2","tag-ki-2","tag-web-engineering-en"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/17777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/83"}],"version-history":[{"count":1,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/17777\/revisions"}],"predecessor-version":[{"id":17778,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/17777\/revisions\/17778"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=17777"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=17777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}From record player to pipeline<\/strong><\/h2>\n
A box on a journey<\/h2>\n
Immersing myself in new technologies<\/h2>\n
From Figma design to living application<\/h2>\n
Personal learnings and conclusion<\/h2>\n
\n