HELLO
I AM.
JOHANNES

For boonrocked.com, I carried out a comprehensive visual and technical redesign aimed at improving both user experience and site functionality. The project focused on three main objectives: enhancing the design to create a more modern and cohesive brand identity, optimizing site performance and integrating new features to provide added value to users.

The redesign included a full restructuring of the shop categories, making it easier for customers to navigate between Exhibits and Custom Pieces, with further subcategories for tailored items like Pants, Shorts, and Skirts. We also added a Coming Soon page with a newsletter subscription option to engage future customers.

On the technical side, I optimized WordPress and WooCommerce, resolved backend issues, and added new payment methods, ensuring seamless transactions. I improved the overall site health by cleaning up outdated code, removing unused plugins, and upgrading the SSL certificate for enhanced security. A custom newsletter popup was also implemented to boost engagement.

By unifying the design elements the site now delivers a consistent and polished look, aligned with the brand’s vision.

Dive into Lonis Weltraumreise, a horizontally scrollable, immersive interactive story crafted to aid families in navigating the challenges of cancer. Created as part of a university team project in the 5th semester, this initiative is in partnership with the Tumor Center of Freiburg University Medical Center. It addresses the difficulties parents face when discussing cancer with their children.

Through a personalized journey with the main character Loni, families embark on an intergalactic adventure, exploring various planets to learn about the disease and its treatments in a child-friendly manner. Each planet represents a different therapy, with vibrant landscapes and elements animated with the parallax effect on scroll, tailored to engage young audiences.

The website seamlessly blends storytelling and education, featuring animations, illustrations, and interactive components to make complex medical concepts accessible to children. By allowing users to customize the experience based on their family's situation, Lonis Weltraumreise provides a supportive platform for families coping with cancer.

Developed as a web application for tablets using React and Pixi.js, this project showcases the power of technology to deliver impactful healthcare solutions.

@credits: see Sichtraum 2024 - Lonis Weltraumreise

Revamping a conventional turntable, this project focuses on integrating digital functionalities seamlessly. A dedicated space adjacent to the turntable serves as a holder for the currently playing vinyl cover. Within this housing, a touchscreen facilitates various functions, complemented by a built-in barcode scanner at the rear. This scanner ensures effortless integration with the user's listening experience, eliminating additional hassles.

Operationally, we send barcodes to the Discogs API to retrieve essential information—album title, artist, and the vinyl cover. These details are then stored in our database, along with the initial scanning date. Additionally, a counter keeps track of the number of times each record has been played, enhancing the user's interaction with their vinyl collection.

The project leverages technologies in web development, utilizing Vue.js for the frontend, Node.js/Express for the backend, and PostgreSQL for the database. Docker is employed to streamline the deployment process, ensuring a robust and scalable foundation for this innovative turntable experience.

@credits: Timo Holzmann
~ Physical Interface & Parts of Frontend

The core concept involves delivering theoretical knowledge about shells to users, followed by practical exercises in a simulated shell environment to reinforce learning. The project also explores the integration of a progression system, assigning users levels based on their completion of tasks. Balancing the social aspect, the project aims to incorporate a reward system, motivating users to successfully conclude topics.

Users can create accounts, log in, and manage profiles, storing and tracking their progress. Under the "terminal" tab, users access exercise profiles displaying progress. They can choose between different shells, starting with the overarching "Intro to Shells" chapter, providing foundational shell information. Subsequent chapters delve into specific shell commands and their applications, unlocking as users complete exercises.

Initiating an exercise involves a brief theoretical introduction, followed by the first task. Simulating a terminal, users are presented with tasks like identifying files in a given directory using a specific command ([dir]). Correct responses lead to subsequent theory sections or additional tasks until the chapter is completed.

@credits: Hieronymus Bussmann, Julian Conrad

In this project, I embarked on creating an interactive digital twin for the Nagra SNST, aiming to deliver a user-friendly interface that seamlessly translates the essence of its analog counterpart. The primary objective was to ensure ease of use while providing users with all essential information found in the original analog device. This comprehensive project not only involves the meticulous creation of an interactive prototype but also includes a thoughtfully crafted conceptualization, detailed screen designs, and a case film that collectively highlight the successful transformation of the Nagra SNST into a digital realm.

Utilizing Figma alongside several Creative Cloud programs, I navigated through the design process, ensuring a seamless blend of creativity and functionality in bringing the Nagra SNST to the digital landscape.

In the creation of Lost In Space, a captivating 3D game concept set in the vastness of space, my focus was on crafting an immersive experience. The player's mission is to repair a malfunctioning spaceship by collecting essential parts scattered across diverse planets, all while navigating challenging survival scenarios.

The development journey involves conceptualizing the game's mechanics and visual style for an immersive experience emphasizing survival challenges and spaceship repair. Asset development follows a structured approach, guided by extensive lists and a moodboard. Prototyping includes a skeletal blockout for subsequent iterations. The user interface is crafted with precision to enhance player interaction and navigation seamlessly.

Working primarily with Autodesk Maya and Substance Painter, I delved into the intricate details of the game's design and visual aesthetics. Lost In Space represents a harmonious fusion of imaginative game design and detailed 3D modeling, offering players an enthralling journey through the challenges and wonders of the cosmos.