Experiential Design - Task 3 : Project MVP Prototype

 21/04/2025 -  ( Week 7 - Week 11 )

Ho Winnie / 0364866 

Experiential Design / Bachelor's of Design Honors In Creative Media 

Task 3 : Project MVP Prototype 

1. Task 3 : Project MVP Prototype

2. Feedback 

3. Reflection

---

1. Task 3 : Project MVP Prototype 

Requirements : 

Once their proposal is approved, the students will then work on the prototype of their project. The prototype will enable the students to discover certain limitations that they might have not learnt about before and they’ll have to creatively think on how to overcome the limitation to materialize their proposed ideas. The objective of this task is for the students to test out the key functionality of their project. The output may not necessarily be a finished visually designed project. The students will be gauge on their prototype functionality and their ability to creatively think on alternatives to achieve the desired outcome.

1. Screen Design visual prototype (Figma)

2. Functioning MVP of the App Experience

A. Figma Prototype 

 

B. Figma File 

C. Creating MVP Features Of MystiAR

Below is the breakdown of the MystiAR MVP we will be working on in this unity prototype that i am working together with my team mate Lew Guo Ying to finish :

1️⃣ Feeding the Pet ( Done by Guo Ying )
One of the core interactions is feeding. Users can tap to spawn the cat bowl and watch as their companion happily eats. This small gesture helps users feel a daily sense of care and connection. As the pet eats, its health or mood bar visibly increases, reinforcing the impact of the user’s actions.

2️⃣ Sleep Mode – Play Soft Music ( Done by Me )
Sometimes, companionship simply means peaceful presence. In Sleep Mode, users can switch their pet to ambient mode, where it lies down and gently sleeps beside them in AR. While the pet rests, soft background music plays to create a soothing atmosphere—perfect for unwinding, studying, or calming anxiety. User can toggle a button to on and off music.

3️⃣ Crafting Potion by Finding 3 Ingredients ( Done by Me )
To add a touch of fantasy, MystiAR includes a magical potion crafting feature. Users collect and drag three mystical ingredients into an AR cauldron placed in their environment. As the potion brews, animated effects and sparkles make the process feel alive and magical. The finished potion can then be given to the pet to boost its health, mood, or special traits, deepening the sense of interactive care.

4️⃣ Playing Fetch with the Pet  ( Done by Guo Ying )
No pet is complete without playful moments. Users can tap a ball icon to spawn a 3D ball, then swipe or drag to throw it in the AR scene. The pet reacts by chasing and fetching the ball, wagging its tail or jumping with joy. This playful interaction strengthens the bond between user and pet while gently lifting the pet’s mood bar, making the relationship feel responsive and real.

What has not been done ? 

1️⃣ Voice Command Feature

When the user calls their pet’s name using the voice command button, the pet will automatically walk into the scene’s visible canvas area. This removes the need for the user to scan the surroundings to find where the pet is — making the interaction feel more natural, responsive, and convenient.

2️⃣ Adding more sound effects , particle effects animation to all features

To make each interaction more lively and intuitive, we plan to add sound cues and particle animations to all core features. For example, when the pet finishes eating, cute heart particles will appear to show satisfaction, and when the pet enters sleep mode, a calming “Zzz” effect will play along with soft ambient visuals.

3️⃣ Workable UI health and mood bar
Currently, the health and mood bars displayed above the pet are static because we haven’t fully implemented the logic to update them yet. The next step is to write scripts that dynamically increase the health bar when the pet eats a potion and boost the mood bar when the pet plays fetch. 

Progression For My Parts :

D. Scene Manager From Login To Main Page

To manage user flow smoothly in MystiAR, I created a simple Scene Manager script in Unity that lets users switch scenes easily—for example, moving from the login page to the main home page once they tap the start button. The script uses SceneManager.LoadScene() so I can set the scene name in the Inspector and trigger it through UI buttons.

Fig 1.1 Scene Manager Script

To make the transition feel polished and magical, I also used Unity’s Animator panel. I set up animations to make the cat character fade in gently on the homepage, together with the main button that invites users to step into the pet’s world. By combining these scripted transitions with fade-in animations, the app feels more immersive and welcoming right from the first interaction.

Fig 1.2 Login Canvas Screen

Fig 1.3 Animator Panel

E. Potion Crafting System - Cauldron

To start off, I designed a custom 3D cauldron in Nomad Sculpt and exported it for use in Unity.  Once the cauldron model was ready, I imported it into my Unity project and placed it in the AR scene canvas where the potion crafting interaction happens.

In Unity, the cauldron uses a Mesh Renderer component. This is important because the Mesh Renderer is what actually draws the 3D model in the scene—it takes the raw mesh data (the 3D shape) and renders it with the assigned material, lighting, and shading. By adjusting the Mesh Renderer settings, I can control how the cauldron looks in AR, including shadows, reflections, and transparency

Fig 1.4 Creating Cauldron & Inserting Into Unity Canvas

To handle the potion crafting system in MystiAR, I created a CauldronManager class that acts as the main controller for the entire cauldron interaction. This script keeps references to key objects like the cauldron model, the final potion GameObject, and an array to store the ingredients the user drags in. When an ingredient is dragged into the cauldron, the OnDraggedIngredient() method checks if the total is enough to start brewing: if (draggedIngredient != null) { ingredientsCount++; if (ingredientsCount >= 3) { StartCoroutine(MakePotion()); } }. This ensures that only when the player places three valid ingredients will the potion brewing sequence begin.

Fig 1.5 Cauldron Manager Script 1/3

The brewing itself is managed by the MakePotion() coroutine, which simulates the process by adding a short delay and then making the final potion visible in the AR scene. For example, IEnumerator MakePotion() { yield return new WaitForSeconds(2f); if (potionFinal != null) { potionFinal.SetActive(true); } } waits for two seconds, which can be synced with a bubbling or glowing animation on the cauldron. Once the wait is over, the potion appears, giving users immediate visual feedback that they successfully combined the ingredients to craft something new.

Fig 1.6 Cauldron Manager Script 2/3

After the pet uses the potion (for example, to boost health or mood), the same script includes a HidePotion() method to clear it from the scene: public void HidePotion() { if (potionFinal != null) { potionFinal.SetActive(false); } }. This keeps the AR space clean and reusable for the next round of crafting. Together, these small logic blocks tie the user’s drag-and-drop action to an interactive, repeatable system that makes the potion crafting feature feel magical but manageable inside Unity.

Fig 1.7 Cauldron Manager Script 3/3

Potion Crafting System - Draggable Magical Ingredients

First off, I placed the ingredients around the cauldron in the Unity canvas. Each ingredient—like herbs, flowers, or mushrooms—is a separate 3D object that I positioned strategically so that players can easily see and drag them into the cauldron during the potion crafting sequence. This setup makes the AR interaction intuitive, as the ingredients are spaced out clearly and visually balanced around the main cauldron prop, ready for the user to pick up and combine. 

Fig 1.8 Placing Ingredients In Canvas

To make the potion crafting feel hands-on and immersive, I wrote a DraggableIngredient script that turns each ingredient into an interactive object players can grab in AR. The class starts by caching the main camera so it can translate screen touches into world space. It also tracks whether the ingredient is being dragged and whether it has already disappeared to avoid duplicate interactions. For example, the script declares private Camera mainCam; private bool isDragging = false; private bool hasDisappeared = false; and then sets mainCam = Camera.main; in Start() so the raycasting logic works properly during drag actions.

Fig 1.9 Draggable Ingredients Script 1/3

The dragging logic lives inside Update(). When the user taps or clicks the ingredient, a ray is cast from the camera to detect if the object is hit: Ray ray = mainCam.ScreenPointToRay(Input.mousePosition); if (Physics.Raycast(ray, out RaycastHit hit)) { if (hit.collider.gameObject == this.gameObject) { offset = transform.position - hit.point; isDragging = true; } }. While isDragging is true, the script continuously updates the ingredient’s world position by projecting the touch or mouse point back into the scene and adding the offset. This works for both editor and mobile by handling Input.GetMouseButtonDown and Input.GetTouch with a switch on TouchPhase.

Fig 2.0 Draggable Ingredients Script 2/3

Finally, when the drag ends, the ingredient needs to disappear and notify the cauldron that it’s been used. The DisappearAndNotify() method checks if it hasn’t already been hidden, then disables the object and calls the manager: void DisappearAndNotify() { if (!hasDisappeared) { hasDisappeared = true; gameObject.SetActive(false); CauldronManager.Instance?.OnIngredientUsed(); } }. This keeps everything modular—once dragged in, the ingredient visually vanishes, and the cauldron’s ingredient counter goes up, smoothly linking the drag interaction to the brewing sequence.

Fig 2.1 Draggable Ingredients Script 3/3

To make the brewing process more rewarding and magical, I added a particle system that activates when the potion is fully brewed. After all three ingredients are dragged into the cauldron, the script triggers a custom Particle System to emit sparkles and glowing effects above the cauldron. This visual feedback makes the brewing feel alive and helps the player know instantly that the potion is ready.

I set up the particle system directly in Unity by adjusting parameters like emission rate, lifetime, color gradients, and shape to match the mystical theme. The system stays inactive by default and is enabled by a line of code in the CauldronManager: for example, brewingEffect.Play(); runs once the ingredient counter reaches three. Combining this with sound effects creates a satisfying payoff and makes the AR experience more immersive and fun to watch.

Fig 2.2 Particle Effect Animation Once Brewing Is Done

Potion Crafting System - Draggable Potion

After setting up the cauldron and the particle effect, I placed the final potion prefab into the canvas as the last element of the brewing flow. The potion object is positioned just above the cauldron so that once brewing is complete, it appears ready for the user to drag and feed to the pet.

In Unity, I made sure to assign a Box Collider and attach the DraggablePotion script. This makes the potion interactive — the script handles user input for dragging and dropping. By placing it directly in the scene hierarchy, it’s easy to manage its transform, rotation, and scale to align nicely with the AR plane.

Fig 2.3 Collider Placed For Potion Prefab

To make giving the potion to the pet feel satisfying and interactive, I wrote a DraggablePotion script that makes the final potion draggable in AR. The script starts by setting up references to the camera and tracking whether the potion is being dragged or has already been used, so it can’t be fed multiple times. For example, the script declares private Camera mainCam;, private bool isDragging = false; and private bool used = false; at the top, then assigns mainCam = Camera.main; inside Start() to prep the raycasting for both mouse and touch input.

The main dragging logic happens in Update(). If the potion hasn’t been used yet, it listens for a click or touch, fires a ray into the scene, and checks if the player grabbed the potion: Ray ray = mainCam.ScreenPointToRay(Input.mousePosition); then if (Physics.Raycast(ray, out RaycastHit hit)) { if (hit.collider.gameObject == this.gameObject) { offset = transform.position - hit.point; isDragging = true; } }. While dragging, the script constantly updates the potion’s position using Vector3 worldPos = GetWorldPoint(Input.mousePosition); transform.position = worldPos + offset;. This makes the drag smooth and lines up the model with the user’s finger or mouse in real time.

Fig 2.4 Draggable Potion Script 1/2

When the drag ends—either on mouse up or after the player lifts their finger—the script calls DisappearAndNotify() to handle the hand-off. Inside DisappearAndNotify(), the potion hides itself and triggers feeding by calling the cat controller.This guarantees the potion can only be fed once. After GivePotionToCat() runs, the OnPotionDrank() callback can handle any bonus animations or effects. This whole flow makes dragging, dropping, and feeding the pet feel rewarding and ties the final crafted potion back into the pet’s wellbeing loop, completing the brewing cycle.

Fig 2.5 Draggable Potion Script 2/2

F. Ambient Mode Feature - Pet Sleeps and Can Toggle Music Button

Next, I moved on to building the Sleeping Ambient Mode MVP. The goal here was to let users press a simple Ambient Mode button that makes the AR pet lie down and sleep peacefully while calming background music plays. First, I set up the UI buttons in the canvas. In my Unity canvas, I arranged a dedicated button with a moon icon to represent Sleep Mode, plus a small music status text that says “Playing Soft Music” to indicate when the ambient audio is active.

To connect this visually and functionally, I created a simple toggle script so that when the Sleep button is pressed, it switches the pet’s animator to its sleep state and plays a looping ambient audio clip. The UI text changes dynamically to “Playing Soft Music” when active and can be switched off with another tap. This way, users have full control to let the pet rest beside them while enjoying a soothing vibe — an important feature for MystiAR’s goal of creating a calming, emotionally supportive presence anytime the user wants to unwind.

Fig 2.6 Placing the buttons

To handle the actual animations, I connected an Animator component with my custom InstructionsPanel Animator Controller. This allows the panel to smoothly play transitions like “Step 1”, “Step 2”, or exit animations as the user moves through the onboarding. I also wrote an Instruction UI Manager script, which you can see attached here. This script references the InstructionsPanel Animator as well as Step1Animator and Step2Group for multi-step sequences. I linked the Cat AR object so I can show or hide it based on the instructions, and I added my next button (NextBtn2) so users can tap through each stage.

Finally, I included Plane Finder Logic references for the AR placement — for example, Ground Plane Stage — so the instructions can also toggle the AR plane and manage where the pet appears in the scene. Altogether, this Inspector setup keeps my onboarding clear, animated, and connected to the AR interactions, so the moment a user hits “ambient mode” or starts the experience, everything feels guided and intuitive.

Fig 2.7 Instruction UI Manager

To complete the Sleep Mode MVP, I needed to make sure that when users switch their pet to ambient mode, they also hear soft music that enhances the calming vibe. For this, I added an Audio Source component in Unity and linked it to a relaxing piano cover of Dandelions. In the Inspector, I made sure the clip is set to Loop, so it plays continuously while the pet is sleeping, but I disabled Play On Awake — this way, the audio only starts when the user toggles it.

To give the player direct control, I also wrote a small MusicToggleButton script. This script references the Audio Source and the Play Music Btn (a simple Unity Button). When the player taps the button, the script checks if the audio is playing and either starts or stops it accordingly. For example, the MusicToggleButton holds a public AudioSource musicSource; and a public Button playMusicBtn;, and the toggle function simply does if (musicSource.isPlaying) { musicSource.Stop(); } else { musicSource.Play(); }.

Fig 2.8 Music Toggle Script & Audio Source

Google Drive Submission : https://drive.google.com/drive/folders/1xlEuyDF4LUV_oF5FDu7LrbL311e7fsg3?usp=sharing

Project MVP Video Walkthrough :

To make our contributions clear in the MVP video, here’s a breakdown of which scenes were done by me (Winnie) and my partner (Guo Ying):

• 0:00 – 0:08: Login scene animation and transition to homepage – Winnie

• 0:08 – 0:15: AR pet plane detection and ground placement – Guo Ying

• 0:18 – 0:33: AR pet feeding interaction – Guo Ying

• 0:37 – 0:48: AR pet playing fetch with the ball – Guo Ying

• 0:50 – 1:09: Ambient sleep mode with music toggle – Winnie

• 1:20 – 1:44: Potion brewing system with draggable ingredients – Winnie

Presentation Slides : 

Experiential Design Task 3 by Winnie Ho

Presentation Video : 

---

2. Feedback

Week 10:

Mr. Razif commented that the prototype already looks very complete and suggested adding sound effects and particle animations to enhance the overall experience when polishing the prototype for our final project.

---

3.Reflection

Experience :

Working on MystiAR using Unity was both exciting and challenging. Developing an AR pet app with features like sleep mode, feeding, and potion crafting meant I had to deal with multiple moving parts, including toggling between different animation states. My biggest hurdle was getting the ingredients to be properly draggable — syncing the drag logic with the cauldron interaction took more time than expected and required a lot of testing. Despite the struggles, this process really pushed me to learn more about Unity’s event systems and AR interaction design.

Observation :

Throughout this project, I realized how important teamwork and feedback are when building something technically complex. My teammate was always ready to help and gave me constant encouragement, especially during late-night coding sessions when things didn’t go as planned. Mr. Razif’s lectures and feedback were also valuable in helping us see where the prototype still needed polish, such as adding more sound effects and particle animations to make our app feel more alive.

Findings :

One key takeaway is that developing an AR app in Unity isn’t just about placing objects in 3D space — it’s about connecting visuals, logic, and user interaction in a smooth, believable way. Small touches like clear animations, responsive UI bars, and simple visual cues make a huge difference in how the app feels. Although it wasn’t simple, seeing MystiAR come to life with all the MVP features working together made the long hours worth it, and I feel more confident about tackling similar challenges in future projects.