Jungle Gym configurator

Stel je voor: je hebt een kleine stadstuin en bent op zoek naar een speeltoestel wat precies past! Of je hebt juist een grote achtertuin en wilt je fantasie de vrije loop geven om een pretpark-speeltoestel te ontwerpen! Je kunt dan gebruik maken van de configurator van Jungle Gym. De webapplicatie is volledig ingericht op grenzeloze fantasie en een speeltoestel precies op maat! Een complex datamodel en een zelf geschreven taal maakt het voor de gebruiker mogelijk om modulair een 3D-toestel te configureren zonder zélf op regels en voorwaarden te hoeven letten. Hiermee neemt de applicatie dit rekenwerk uit handen en kan er zorgeloos een veilig speeltoestel besteld worden. Have fun!

Jungle Gym en Eaglescience
Jungle Gym is Europa’s krachtigste ontwerper, fabrikant en distributeur van eersteklas speeltoestellen. Met een geschiedenis die meer dan 70 jaar teruggaat, wordt Jungle Gym beschouwd als een van de oudste en meest vertrouwde merken van veilige en duurzame houten speeltoestellen. Ze hebben deze positie bereikt door voortdurend te investeren in innovatieve producten, geoptimaliseerde logistieke oplossingen en hoogwaardige marketingconcepten.
Eén van deze innovatieve marketingconcepten is de online configurator voor de houten speeltoestellen. Hiermee kan de eindklant naar eigen wens en fantasie speeltoestellen vormgeven. Jungle Gym werkte met een bestaand softwarepakket dat hen niet de vrijheid en onafhankelijkheid gaf waarnaar ze op zoek waren. Daarom lieten ze door EagleScience eigen maatwerksoftware ontwikkelen. Met zo’n maatwerk traject is er volledige vrijheid om zelf functionaliteiten en regelgeving toe te voegen, om zo ook háár klanten volledige vrijheid te bieden. Worden er bijvoorbeeld twee torens geplaatst, of vier? Hebben deze allemaal een glijbaan of een schommel met een klimmuur? Of wil je net zoals bij RollerCoaster Tycoon een heel pretpark bouwen? Met net zoveel fun als bij deze game kan je een een speeltoestel bij Jungle Gym ontwerpen en bestellen. Dit maakt JungleGym onderscheidend in de markt wat ook dé aanleiding was om dit project met ons te starten.

Een onderscheidende tool voor ouders en een gave ervaring die retailers kunnen aanbieden in hun webshop
Het resultaat van de intensieve samenwerking tussen Jungle Gym en Eaglescience is een webapplicatie waarbij je als ouder, opa of oma, volgens eigen wensen een speeltoestel in elkaar kunt klikken. De webapplicatie bevat een configurator met een 3D-model waarin modulair het gehele assortiment aan speelaccessoires aan elkaar gekoppeld kan worden. Denk aan torens, schommels met verschillende soorten zitjes, glijbanen in verschillende kleuren, diverse trapjes, klimmuurtjes en nog veel meer.

Zowel op mobiel als op desktop kan de gebruiker zich als het ware naast en om het toestel ‘bevinden’ door in te zoomen en te roteren. Ook kan je door het toestel heen kijken om alvast de beleving van het spelende kind voor te stellen. In de toekomst kun je ook gaan bekijken hoe het toestel er in de eigen tuin uit komt te zien.
Hét grote verschil tussen de bestaande configurator en de nieuwe software is dat de oude software uitgaat van talloze mogelijke opties en deze alvast klaar zet als configuraties. Deze moeten vooraf bedacht worden. Deze voorbereiding is zeer omvangrijk en beperkend, je kunt alleen configureren door plaatjes aan en uit te zetten die van tevoren zijn ‘klaargezet’.
De nieuwe Jungle Gym applicatie biedt het bedrijf een grote automatiseringsslag. Een zeer belangrijke feature is de automatische koppeling van veiligheidsregels en wetgeving die onder water continu meedraait. Hiermee kan de eindgebruiker gegarandeerd veilig bouwen. De gebruiker hoeft enkel een onderdeel naar wens toe te voegen en het systeem berekent of dit veilig kan. Zo ja, dan wordt de volgende optie direct getoond en zo nee, dan krijgt de gebruiker een waarschuwingsmelding en een alternatief aangeboden. Denk bijvoorbeeld aan het plaatsen van een glijbaan ‘op het zuiden’: de glijbaan wordt dan te warm dus het alternatief is om deze op een ander punt van de toren te plaatsen. Het grote voordeel van automatische koppelingen voor Jungle Gym zelf, is dat er voorraden bijgehouden worden en leveranciers worden aangestuurd. Ook montageservice kan door de klant worden ingeboekt wanneer zij er zelf niet helemaal uit komt.

Wanneer je de configurator opent, staan er verschillende basisconfiguraties klaar. Zo kun je beginnen met een kleine, medium of grote toren en zou je zelfs verder kunnen bouwen op de toren van je buurman. Je kan hier vervolgens alle kanten mee op. Tijdens het configureren kun je natuurlijk de kosten en de afmetingen bekijken. En in de toekomst kun je zelfs van elk onderdeel zien hoeveel speelplezier het zal opleveren!
Ten slotte kan de configurator ook als zogeheten ‘white label’ product worden ingezet. Dit houdt in dat behalve op de website van Jungle Gym, de tool ook aan retailers kan worden aangeboden. Behalve een onderscheidende tool voor ouders, is de configurator dus ook een gave ervaring die retailers kunnen aanbieden op hun webshop.

In brainstorms complexe informatie samenbrengen tot eenvoudige flows en visualisaties
We hebben in de eerste plaats samen een vrij kort, maar intensief voortraject uitgevoerd om de drie belangrijke vraagstukken technisch te onderzoeken: de 3D-configurator, de laadtijd en de integratie van regelgeving. Samen met de klant hebben we onderzocht welke slimme oplossingen bij een toekomstbestendige applicatie passen. We hebben als het ware de kapstok bedacht waaraan we de code konden ophangen. Hierover later meer.
De betrokkenheid van de klant was en is zeer groot. De product owner van de klant speelt hierin een grote rol, waardoor kennis vanuit de klant nauwkeurig en frequent wordt overgedragen. Met name op het gebied van wet- en regelgeving rondom de speeltoestellen is dit cruciaal.

Deze onderzoeksfase gaf ons ruimte om parallel hieraan de tijd te nemen voor brainstorms over UX: hoe maken we de ervaring van het samenstellen van jouw eigen speeltoestel zo leuk en gemakkelijk mogelijk? Welke stappen doorlopen de gebruikers en welke flow werkt het beste om de gebruiker te ondersteunen in het ontwerpen en het plaatsen van een bestelling? Er lag een leuke uitdaging in de weergave op mobiele schermen: hoe presenteer je alle verschillende opties en keuzes op een zo ‘fun’ mogelijke manier? Wat laat je meteen zien en welke informatie kan de gebruiker onder ‘een klik’ terugvinden? In de brainstorms brachten we alle complexe informatie samen naar eenvoudige flows en visualisaties. Hiermee voelt het voor de gebruiker heel intuïtief ‘ik kies een gele glijbaan’, terwijl er aan de achterkant van alles gebeurt: regelgeving, schaduwen, kleuren, prijzen, renders, etc. Een brainstorm is heel nuttig om mensen met een frisse blik naar het project te laten kijken. Jungle Gym had vanuit de vorige software al goed in kaart wat ze niet wilden. De sessies hebben geholpen om dit om te buigen naar een visie op hoger niveau en nieuwe ideeën voor het platform.
Tenslotte brachten we alle ontwerpen samen tot input voor het inschatten van de ontwikkeltijd en development zelf. Het team voor dit project hebben we flink opgeschaald om de beoogde deadline te kunnen halen. We hebben front- en backend gescheiden om twee scrum teams naast elkaar te laten draaien op ideale grootte en specialiteit.

“De Jungle Gym configurator was een supergaaf en complex project. Voor de gebruiker wilden we een gebruiksvriendelijke applicatie maken, waar ze alle vrijheid hebben om zélf hun speeltoestel samen te stellen. Iedereen heeft hierin andere wensen en houdt daarin ook een andere volgorde aan. De applicatie moest dit allemaal mogelijk maken, dit maakte het een uitdagend project.
We konden in de samenwerking met de klant onze krachten echt bundelen: wij vanuit techniek en UX, en de klant bracht waardevolle kennis aan met betrekking tot hun specifieke markt, e-commerce, en regelgeving.”
-Anneke van Abbema (UX-designer)

‘Fun’ voor Eaglescience! Uitdenken van grote hoeveelheid scenario’s
Toen we startten aan dit project zagen we dat er veel uitdagingen aan de front-end kant zaten met specialisaties in Three.js. Dit maakt het onder andere mogelijk om 3D-objecten te koppelen, te configureren, te modelleren, belichtingen en dus automatisch schaduwen aan te roepen en het geheel weergeven. De backend is in Scala gebouwd op basis van ArchES, net zoals Groeigids en SAM.
Een grote uitdaging (lees ‘fun’ voor EagleScience :)), was het uitdenken van de grote hoeveelheid scenario’s (mogelijkheden) die er ontstaat tijdens het ontwerpen met de configurator. Al deze scenario’s moesten uitgedacht worden waarna ze modulair geprogrammeerd zijn. Daarbij vindt er ook nog communicatie plaats volgens bepaalde regels. ‘Stel je voor dat…’ heeft tijdens dit uitdenken als begin van de zin vaak de revue gepasseerd. Om alle mogelijkheden te vangen in een slimme technische oplossing, hebben we ervoor gekozen om een nieuwe taal te ontwikkelen: een Domain Specific Language (DSL). Een taal die gericht is op een bepaald soort probleem en precies genoeg functies en regels heeft om de configurator optimaal te laten functioneren. De configurator roept bijvoorbeeld de standaardregel aan dat er twee soorten zitjes gekoppeld worden bij het plaatsen van een schommeltoestel. We hebben een wrapper geschreven waarin we onze specifieke regels vertalen naar programmeer code. De eindgebruiker roept strings aan uit het ‘woordenboek’ en de software ‘ontleed de zinnen’: ik verwijder nu de schommel met zitjes, kijk eens of je iets uit moet voeren zoals het verwijderen van de touwen en ringen? Doordat we als het ware de inhoudsopgave van het woordenboek in één keer goed ontwikkeld hebben, worden nieuwe woorden in de toekomst eenvoudig toegevoegd onder het juiste hoofdstuk. Het mooie is dat we hier weinig meer aan hoeven te ontwikkelen.
Een andere leuke component heeft te maken met de beheerbaarheid van de software, namelijk het aanpassen en toevoegen van regelgeving door Jungle Gym zelf. Jungle Gym kan het datamodel met regels aan de hand van variabelen via een portaal zelf aanpassen. Denk aan lengte, koppelpunten, materiaal, etc. Het lijkt een invuloefening: [lengte] van [toestel X] mag niet [korter/langer] zijn dan [XX], anders… Deze set aan variabelen moest zeer zorgvuldig worden uitgedacht om het datamodel toekomstbestendig te kunnen maken.
Een aantal hersenkrakers tijdens het project hebben geleid tot relatief snelle en soepel werkende applicatie geschikt voor desktop én telefoon. Dit was niet altijd even makkelijk met grote 3D-bestanden en laadtijden, maar door goed van te voren na te denken en veel te testen hebben we de perfecte balans kunnen vinden.

“Ik vond het een hele leuke uitdaging waarbij we door het gebruik van specifieke technieken echt een verschil hebben gemaakt. Het feit dat er bij dit project een grote focus op de voorkant en gebruikersgemak lag sprak mij aan. Het leukste onderdeel vond ik het integreren van 3D-modellen en aan elkaar haken van die elementen om voor de gebruiker een totaal experience te ontwikkelen. Het moment dat we met het team voor het eerst virtueel om het speeltoestel heen konden draaien was heel gaaf.”
-Bas Broere