Decathlon Home Gym

Decathlon Home Gym is a mobile web application developed as a proof of concept for the course Digital Product Studio 2, together with Bavo De Bondt. The assignment, given in collaboration with Comeos, was to build an interactive digital experience for a retailer that better guides customers through their purchase journey. We chose Decathlon and focused on customers who want to set up a home gym but do not know what fits in their space and budget. The project had a timeline of three weeks.

The app guides the user through three consecutive steps. First, the user measures their room via AR by marking points on the floor using their smartphone camera. Then the user enters their training goals and budget, after which an AI model recommends a personal selection of Decathlon equipment based on that input and the measured space. Finally, the user can place the recommended equipment as 3D models via AR in their actual room and view them from all angles.

The app was presented and demonstrated to our lecturers, a representative from Comeos and a representative from AS Adventure. They were enthusiastic about the look of the app and its potential applications in a retail context.

I worked on the technical side of the app. I built the AR measurement, the AI connection and communication and the AR visualisation of the equipment. I also helped think through the general flow of the app and wrote the React code together with Bavo. The project documentation was also written by me. Bavo was responsible for the design of the app, a large part of the React code and the presentation.

The AR measurement was the biggest challenge of this project. 8th Wall is not designed for this purpose, which meant a lot of research was needed to get it working. The main problem we could not fully solve is that 8th Wall detects the floor on load but does not automatically update it when the user moves the camera up or down. When the floor detection is off, the measurements are off too. We partially solved this by adding a reset button that lets the user restart the floor detection.

Integrating 8th Wall and A-Frame into a React application was also an obstacle, as neither framework is designed for this. I solved it by loading them in a layout on top of the React app, which allowed both systems to run alongside each other.

The end result is a working proof of concept that goes through all three steps: measuring, advising and visualising. I am most satisfied with how the app looks, the design fits perfectly with Decathlon's visual identity. But I also think the concept itself is strong: an improved version of this app could genuinely help a lot of customers who struggle to choose fitness equipment and figure out whether it fits in their space.