Joran Vreye
Contact
VIEWPORT_01 // HERO
> Project Detail

Decathlon Home Gym

Een mobiele web-app die klanten begeleidt bij het samenstellen van hun ideale home gym via AR-ruimtemeting, AI-advies en AR-productvisualisatie.

Web & App Development
Realtime & Interactive Software
VIEWPORT_02 // METADATA
Periode
Mei 2026 - Juni 2026
Mijn Rollen
Technisch VerantwoordelijkeSoftware Ontwikkelaar
Gebruikte Technologieën
React
TypeScript
Three.js
8th Wall
A-Frame
Figma
VIEWPORT_03 // PROJECT CONTENT
App home pagina
1/9

Project documentation

Context

Decathlon Home Gym is een mobiele web-applicatie ontwikkeld als proof of concept voor het vak Digital Product Studio 2, samen met Bavo De Bondt. De opdracht, gegeven in samenwerking met Comeos, was om voor een retailer een interactieve digitale ervaring te bouwen die klanten beter begeleidt doorheen hun aankooptraject. We kozen voor Decathlon en richtten ons op klanten die een home gym willen inrichten maar niet weten wat past in hun ruimte en budget. Het project had een looptijd van drie weken.

De app begeleidt de gebruiker door drie opeenvolgende stappen. Eerst meet de gebruiker via AR zijn kamer op door punten aan te duiden op de vloer via de smartphone camera. Daarna geeft de gebruiker zijn trainingsdoelen en budget in, waarna een AI-model op basis van die gegevens en de gemeten ruimte een persoonlijke selectie van Decathlon-toestellen aanbeveelt. Ten slotte kan de gebruiker de aanbevolen toestellen als 3D-modellen via AR in zijn echte kamer plaatsen en van alle kanten bekijken.

De app werd gepresenteerd en gedemonstreerd voor onze docenten, een vertegenwoordiger van Comeos en een vertegenwoordiger van AS Adventure. Zij waren enthousiast over de stijl van de app en de mogelijke toepassingen ervan in een retailcontext.

Contribution

Ik werkte aan de technische kant van de app. De AR-meting, de AI-connectie en communicatie en de AR-visualisatie van de toestellen heb ik uitgewerkt. Ook hielp ik mee met het uitdenken van de algemene flow van de app en schreef ik samen met Bavo de React code. De documentatie van het project heb ik ook zelf gemaakt. Bavo stond in voor het design van de app, een groot deel van de React code en de presentatie.

Challenge

De AR-meting was de grootste uitdaging van dit project. 8th Wall is hier niet voor ontworpen, waardoor het veel uitzoekwerk vroeg om het werkend te krijgen. Het grootste probleem dat we niet volledig konden oplossen is dat 8th Wall bij het laden de vloer detecteert maar deze niet automatisch aanpast als de gebruiker omhoog of omlaag beweegt. Als de vloerdetectie dan niet meer klopt, kloppen de metingen ook niet. We losten dit deels op door een resetknop toe te voegen waarmee de gebruiker de vloerdetectie opnieuw kan starten.

Daarnaast was het integreren van 8th Wall en A-Frame in een React applicatie ook een obstakel, omdat beide frameworks hier niet voor ontworpen zijn. Ik loste dit op door ze in een layout bovenop de React app in te laden, waardoor beide systemen naast elkaar konden werken.

Result

Het eindresultaat is een werkende proof of concept die de drie stappen volledig doorloopt: meten, adviseren en visualiseren. Ik ben het meest tevreden over hoe de app eruitziet, het design past perfect bij de huisstijl van Decathlon. Maar ook het concept zelf vind ik sterk: een verbeterde versie van deze app zou volgens mij echt een meerwaarde kunnen zijn voor klanten die moeite hebben om fitnesstoestellen te kiezen en in te schatten of ze passen in hun ruimte.

OUTLINER_01 // NAVIGATION