Profiel klant

De klant, een innovatief Learning & Development trainingsbureau, wilde een boeiende en interactieve ervaring creëren die verder zou gaan dan traditionele persoonlijkheidstests. Hun visie? Een leuke, meeslepende persoonlijkheidstest waarbij gebruikers hun drakentype ontdekken - Rood, Blauw, Geel of Groen - en visueel transformeren in hun drakenvorm met behulp van geavanceerde 3D- en Augmented Reality (AR)-technologie. De uitdaging was om een ​​intuïtieve, browsergebaseerde web-app te maken die psychologische profilering naadloos kon combineren met 3D-animatie en AR, waardoor gebruikers een onvergetelijke gepersonaliseerde ervaring kregen.

Project Scope

Onze taak was het ontwerpen, ontwikkelen en implementeren van een webapplicatie met de volgende functionaliteit:

• Interactieve persoonlijkheidstest: een reeks vragen die gebruikers categoriseert in een van de vier drakentypen op basis van psychologische eigenschappen.

• 3D-drakenmodellen: hoogwaardige, geanimeerde draken die elk type vertegenwoordigen: rood (woest), blauw (kalm), geel (energiek) en groen (wijs).

• Augmented Reality Transformation: Deelnemers zien zichzelf met een 3D/AR-Drakenmasker op in de Draak van de kleur die overeenkomt met het resultaat van hun persoonlijkheidstest. Dit met behulp van hun webcam, waarbij hun testresultaat wordt geïntegreerd met real-time AR-beelden.

Uitdagingen

Het bouwen van een project als dit bracht verschillende technische en creatieve uitdagingen met zich mee:

- Naadloze integratie van 3D en AR

Zorgen voor soepele overgangen tussen de testresultaten en de AR-ervaring zonder verlies van visuele getrouwheid.

- Compatibiliteit tussen platforms

Zorgen dat de 3D- en AR-functies naadloos werken op verschillende browsers en apparaten, met name mobiel.

- Gebruikerservaring

Balans vinden tussen complexiteit en gebruiksgemak, zodat de rijke visuele effecten en interactiviteit van de app de toegankelijkheid of snelheid niet in gevaar brengen.

Ontwikkelingsproces

Ons ontwikkelingsproces begon met grondig onderzoek naar persoonlijkheidstypen en draken als archetypische symbolen. Vervolgens gingen we over op de ontwerp- en technische fases, waarbij we ervoor zorgden dat zowel de esthetiek als de functionaliteit een boeiende gebruikerservaring opleverden.

Persoonlijkheidstestontwerp

We werkten nauw samen met de klant om een  persoonlijkheidstest te ontwikkelen die gebruikers in vier typen categoriseert. Elke vraag is subtiel gerelateerd aan de drakenarchetypen:

• Rode draak: stoutmoedig, moedig en actiegericht.

• Blauwe draak: bedachtzaam, kalm en logisch.

• Gele draak: energiek, speels en creatief.

• Groene draak: wijs, introspectief en verzorgend.

Elk type was verbonden met verschillende kenmerken, kleuren en gedragingen die in de testresultaten worden onthuld en weerspiegeld in de drakenontwerpen.

Beantwoord 24 vragen door een Drakenkaart te selecteren die een stelling toont die het beste bij jouw persoonlijkheid past. Dat onthult de Draak in jou...

3D-drakenmodellering

We creëerden vier verschillende, geanimeerde 3D-drakenmodellen om de verschillende persoonlijkheidstypen te vertegenwoordigen:

Rode Draak

• woest en krachtig, met vuurspuwende animaties.

Blauwe Draak

• Elegant en vloeiend, met kalmerende, waterige bewegingen.

Groen Draak

• Wijs en majestueus, met langzame, bedachtzame gebaren.

 Gele Draak

• Speels en helder, met snelle en energieke animaties..

Elke draak werd gemodelleerd met fijne details en geoptimaliseerd voor webprestaties om ervoor te zorgen dat de ervaring premium aanvoelde zonder vertraging te veroorzaken.

Augmented Reality Integratie

Na het voltooien van de test konden gebruikers hun webcam gebruiken, die hun gezicht overlapt met een realtime AR-drakenfilter:

• Met behulp van WebGL en AR.js zorgden we ervoor dat gebruikers zichzelf konden zien als het drakentype dat ze op de test scoorden.

• Gezichtsvolgtechnologie werd gebruikt om de drakenkenmerken (bijv. hoorns, ogen, schubben) op de gezichten van gebruikers te projecteren, waarbij de uitlijning zelfs bij hoofdbewegingen behouden bleef.

• De AR-filters werden aangepast om overeen te komen met de kleur en animatie van elke draak, wat voor elk resultaat een unieke transformatie opleverde.

Cross-Platform Functionaliteit

Om ervoor te zorgen dat de web-app naadloos werkte op alle apparaten en platforms, hebben we strenge tests uitgevoerd op:

• Desktop- en mobiele browsers (Chrome, Firefox, Safari).

Verschillende mobiele apparaten, om ervoor te zorgen dat de AR-functie soepel werkte, ongeacht de camerakwaliteit of prestatiecapaciteit van het apparaat.

We hebben er ook voor gezorgd dat gebruikers die geen toegang hadden tot AR (vanwege beperkingen van het apparaat of de browser) nog steeds een volledig gerenderd 3D-model van hun draak en de persoonlijkheidsresultaten zouden ontvangen.

Belangrijkste kenmerken

- Boeiende gebruikerservaring

De gebruiker gaat van de quiz naar het leren van zijn of haar drakentype, tot het worden van zijn of haar draak via de AR-ervaring.

- Rijke visuals

Prachtig ontworpen draken met verschillende kenmerken en gedragingen in 3D-modellen.

- Impactvolle Augmented Reality (AR)

Realtime gezichtsherkenning en AR-overlays waarmee gebruikers zichzelf kunnen transformeren in hun drakenzelf.

- Naadloze prestaties

Snelle laadtijden, vloeiende animaties en geen vertraging, zelfs niet tijdens de AR-ervaring.

Resultaat

Het eindresultaat was een boeiende, volledig interactieve web-app die entertainment combineerde met psychologische inzichten. De app werkt als volgt:

1. De test: Gebruikers krijgen een reeks vragen voorgelegd. De antwoorden bepalen of ze een rode, blauwe, gele of groene draak zijn.
2. Results Reveal: After completing the test, users are shown their dragon type, along with personality traits explaining why they’re best suited to that dragon.
3. Dragon AR-beleving: Met behulp van de webcam kunnen gebruikers zichzelf zien als de draak, compleet met gekleurde schubben, hoorns en geanimeerde uitdrukkingen die passen bij het type. De AR-draken reageren op hun bewegingen, wat een meeslepende ervaring creëert.