AR Templates
Designed and developed two reusable mobile AR experiences for SAP workshops: AR Diamond Hunt, where participants follow clues and scan markers to unlock content, and AR Pop Quiz, where they answer timed questions and receive immediate feedback. Both were built in PlayCanvas with editable content for future workshops.
The Challenge
SAP needed interactive activities that encouraged workshop attendees to explore information and recall what they had learned. The design challenge was to create clear mobile interactions while allowing workshop content to change without rebuilding the underlying gameplay systems.
Stakeholder Goals
⚒Requirements
Increase engagement
Improve information retention
Align with SAP branding guidelines
Reusable for future workshops
Work on mobile devices
Core Responsibilities
Experience Design
Designed the learning flow and gameplay structure Defined interaction patterns for workshop attendees Created two reusable gamification templates
Visual Design
Designed UI flows and presentation visuals Aligned all assets with SAP branding guidelines
Development
Implemented the AR experiences in PlayCanvas and developed reusable systems for content replacement and expansion. I also created an additional XR stage game for SAP, which cannot be shown publicly.
Design Goals
Intuitive
Accessible to anyone familiar with using a smartphone.
Themed
Visually aligned with the existing SAP workshop environment.
Interactive
Encouraged active participation instead of passive observation.
Informational
Reinforced workshop content through interaction and feedback.
The Problem
Biggest Design Challenge
The templates needed to accommodate different workshop topics while preserving a consistent interaction flow. I therefore had to distinguish the content facilitators would replace from the gameplay rules that should remain stable.
The Solution
Reusable Content Architecture
Separated workshop content from the gameplay systems and exposed editable settings through the PlayCanvas Editor. Facilitators could replace content and assets while retaining the same progression, scoring and feedback logic.
Concept & Screen Planning
Created screen mockups in Figma to define the interaction flow and review it with stakeholders before implementation. Once approved, I built the experiences in PlayCanvas.
From Concept to Final Product
Design & Interaction Mockup
Created the interaction flow and screen structure in Figma so stakeholders could review the proposed experience before implementation in PlayCanvas.
Final Branded Experience
Translated the approved flow into the final AR experience while aligning the interface and visual presentation with SAP’s brand guidelines.
Why These Two Experiences?
Solution 1
Why Scavenger Hunt?
A scavenger hunt gave participants a reason to move between workshop stations. Following clues and scanning markers turned information discovery into an active task connected to the venue.
Solution 2
Why an AR Quiz?
A timed quiz prompted participants to recall information after a presentation. Immediate feedback showed whether an answer was correct and highlighted topics they could revisit with the facilitator.
AR Diamond Hunt — Experience Flow
From event entry to location-based discovery, learning feedback, and session completion
01 Entry
Display QR code
SAP representative
Scan QR code
Participant action
02 Onboarding
Main menu
Start experience
Instructions
How to play
Game scene
Camera opens
03 Explore
Choose an action
Optional: open the map Otherwise: view the clue
Open map
Optional route
View clue
Select active objective
04 Verify
Locate marker
Follow the clue
Scan image
Use AR camera
Marker matches active clue?
Yes → Reveal diamond No → Continue searching
Continue searching
No progress is recorded
↺ Back to View clue
05 Learn
Reveal diamond
Play AR animation
Interact
Open learning moment
View lesson
Close when finished
06 Complete
Clues remaining?
Yes → next clue: back to View clue No → Congratulations
Congratulations
Show completion state
Reset session
Clear saved clue data
↺ Back to Main menu
- Participant action
- System response
- Decision
- Loop or optional route
Game Systems
Gamification strategy
To increase engagement and retention, both templates incorporated:
- Timers
- Points
- Visual feedback
- Animated rewards
- Progress tracking
AR Quiz — System Architecture
PlayCanvas scripts, interface states, AR tracking, question logic, and local session data
01 Launch
StartButtonScript.js
Start experience
Handles initial input
Instructions
Participant reads flow
StartQuizScript.js
Begin quiz
Initialises active session
02 Scan & Reveal
ZapparImageTracker.js
Scan image marker
Detects the target image
Reveal diamond
AR reward appears
InteractButtonScript.js
Open quiz
Loads data and starts timer
03 Quiz & Feedback
Timer.js
Run timer
Auto-submits on timeout
CheckAnswer.js
Validate answer
Shows feedback
Feedback & lesson
Correct / incorrect response
CloseLessonPopup.js
Reset quiz UI
Questions remaining?
Yes → return to the camera (Scan image marker) No → Show final score
If no
DiamondCounter.js
Show final score
ContinueButtonScript.js
Continue or restart
↺ Back to Start experience
Session data
Local session store
- orientationMessage
- Portrait / landscape flag
- timerActive
- Current countdown state
- activeQuestions
- Remaining question IDs
- answeredQuestions
- Completed question IDs
- score
- Collected diamonds
Read and updated by the timer, answer, progress, and completion scripts.
- Script or system
- Interface state
- Decision
- Session-data update
AR Diamond Hunt
Objective
A scavenger hunt designed to encourage physical movement and environmental exploration within a venue.
Core Loop
AR Pop Quiz
Objective
Reinforcing/testing retention after a presentation through a timed, interactive quiz module.
Core Loop
Design Focus
"Immediate feedback connected each answer to its outcome, while scoring and progress feedback supported the quiz structure. Incorrect answers highlighted information participants could revisit or discuss with the facilitator."
Template Reusability
- 01
Reusability
Both experiences were developed as reusable PlayCanvas templates rather than one-off applications. The underlying gameplay and AR systems could remain unchanged while project-specific content was adapted through script attributes exposed in the PlayCanvas Editor.
- 02
AR Diamond Hunt
New versions could replace the map, clues, lesson content, tracked images, visual assets, reveal animations, and branding.
- 03
AR Pop Quiz
Users could replace the questions, answer options, correct answers, timer settings, feedback text, and branding without rewriting the core quiz logic.
Configuration & Handoff
Used consistent naming for entities, scripts, attributes and assets to make both templates easier to navigate and modify. Created video tutorials showing how to configure exposed settings, replace assets and workshop content, and test the adapted experience.
Testing results
Refined the templates across four rounds of stakeholder playtesting with workshop facilitators before their introduction during workshops. Testing identified issues with icon clarity, access to instructions and reward feedback.
Icons unclear
Enlarged and redesigned icons to improve recognition.
Icons became easier to recognise.
Instructions skipped
Added onboarding and made instructions accessible during gameplay.
Participants completed the flow without becoming stuck.
Users unsure of rewards
Added animations to communicate rewards and successful progress.
Reward animations made successful progress clearer.
Flow validated
Finalized the experience following facilitator review.
The final experience was approved for workshop use.
Final result
Reusable AR Templates
AR Diamond Hunt and AR Pop Quiz were delivered as adaptable frameworks for future workshops.
What worked
- ●Facilitators could navigate the experience without getting stuck.
- ●The visuals integrated naturally with the existing workshop branding.
- ●Animated rewards made progress and successful interactions clearer.
Approved for Workshop Use
The final experience was reviewed and approved by the facilitator responsible for delivering the workshop.
Designing reusable experiences requires separating editable content from the underlying interaction systems. Even simple game mechanics can make learning activities more active and engaging.