Experiential Design: Final Task

| 01.07.2025 - 22.07.2025 (WEEK 11-WEEK 14)

| Tang Chin Ting [ 0366473 ]
| Experiential Design/ Bachelor of Design in Creative Media
| Final Project & E-portfolio

---

INSTRUCTIONS

---

SUBMISSION

Task 04: Final Project & E-portfolio

Instructions

A) Final Project – Completed Experience – 30 %

• Students will synthesise the knowledge gained in tasks 1, 2, and 3 for application in task 4. Students will create and integrate visual assets and refine the prototype into a complete working and functional product experience.

B) E-Portfolio - 10 %

• Students describe and reflect on their social competencies within the design studio context, supported by evidence. Reflect on how to empathise with others within group settings, interact positively within a team, and foster stable and harmonious relationships for productive teamwork. The reflective writing is part of the TGCP.

Requirements

1. Project file and Folders
2. Application installation files (APK for Android, iOS Build Folder for IOS/iPhones)
3. Online posts in your E-portfolio as your reflective studies
4. Video walkthrough (Presentation)

To-do:

• Change the image target to the building picture
• Apply the route to transparent
• Refine the turn point mentioned panel
• Create a setting panel (sound button, duckling collect button, and arrived button)
• Collectible 3D duckling model
• Profile page

Image Target Rearrangement

In the previous task, we used a QR code image as the image target. To create a more realistic experience, we decided to replace it with a real building image. We took a photo of the E7.14 classroom and set it as the new image target. Now, when users scan the building and this image is detected, an information panel will appear.

Figure 1.1 Changing Image Target

Route Refinement

We applied a transparent gradient material to the route to enhance its visual appearance, making it more closely resemble the design from the previous task in Figma. Additionally, we adjusted the thickness of the route arrow to be slimmer, ensuring it appears more subtle and appropriate during the AR experience when users start the app.

Figure 1.2 Route Path Refinement

Figure 1.3 Route Arrow Refinement

Turn Point Mention Panel Refinement

In the previous task, we created the direction panel using a 3D object. However, after receiving feedback from Mr. Razif, he suggested that we improve the visual design of the panel. We showed him our Figma prototype, and he encouraged us to refine the panel to more closely match the prototype’s style.

Ming En was in charge of this part. She implemented a script that triggers the panel to appear as the user approaches a turning point. The panel displays dynamic distance updates such as '5m turn left,' '4m turn left,' '3m turn left,' and so on.

Figure 1.4 Turning Point Mention Panel Refinement

Setting Panel Design

Since we added background music to enhance the AR route experience, we decided to include a panel that allows users to turn the music on or off.

I was responsible for this section. I first designed the panel and button layout using Adobe Illustrator, then imported the assets into Unity. I created two visual states for the button: when the background music is turned on, the button is filled with a dark green colour; when it's turned off, the button displays only a dark green outline with a white fill. This provides users with a clear visual indicator of the current audio status.

Figure 1.5 On-Off Sound Button

Figure 1.6 Button & Panel Design

We also added an 'Arrived' button that users can click once they reach their destination. After clicking the button, a completion panel will appear, giving users the option to either save the current destination or simply close the scene.

Figure 1.7 Arrived Panel Design

Duckling 3D Model

We added a new playful feature to enhance the user’s AR experience. Specifically, we introduced a collectible duckling function. We sourced a 3D duckling model online and placed it along the AR route. As users approach the model, they can collect it, and the system will track how many ducklings they’ve collected.

After placing the duckling model, we applied a box collider to enable interaction, allowing users to tap and collect it. We also wrote a script and integrated game data to record the total number of ducklings collected by each user.

HERE is the 3d model online.

Figure 1.8 Applying the 3D Duckling Model

Figure 1.9 Applying the Collecting Duckling Game Data

Returning to the settings panel, we added a dedicated toggle button that allows users to enable or disable the duckling collection mode. This gives users greater control over their AR experience, whether they want to focus purely on navigation or engage with the more playful, gamified element of collecting ducklings along the route. When the mode is turned off, the collectible ducklings and related UI elements will be hidden to minimise distractions.

Figure 1.10 On-Off Collectible Duckling Mode Button

Profile Page

We designed the Profile Page to allow users to track the number of ducklings they’ve collected throughout their AR experience. In addition to the collection count, the page also displays achievement badges that are unlocked based on the number of ducklings collected. This feature not only helps users monitor their progress but also adds a sense of accomplishment and motivation through a simple reward system.

Figure 1.11 Profile Page Design

Final Video Walk Through

Figure 1.12 Final Video Walk Through

Final Video Presentation

Figure 1.13 Final Video Presentation

---

FEEDBACK

Week 14:

Mr. Razif mentioned that our overall functionality and app workflow were well-executed. However, he advised us to place greater emphasis on enhancing the visual design and user experience, particularly during the app’s runtime in Unity. He encouraged us to refine the interface elements, improve visual consistency, and ensure that the aesthetics align with the intended user experience, making the app feel more polished and immersive.

---

REFLECTION

Throughout this final project, I learned that integrating immersive AR features into an usable and consistent experience was a matter of balancing both visual narrative and technical integration. Replacing the image target with a real building photo helped add a lot of realism and contextual engagement. Refining the transparent route line and turn point panels also enhanced user understanding and direction flow. These adjustments helped me learn the degree to which minor visual elements can significantly enhance the readability and immersion of an AR experience. 

My personal experience of implementing the setting panel, sound toggle, and collectible features was enriching but demanding. I had to consider both logic flow and the user interface so that there could be seamless interaction. For example, adding toggle buttons for duckling and music mode required not only neat graphics but also careful scripting to manage their behavior. Adding collectible ducklings provided a playful touch to the experience, and creating the profile page with achievement tracking allowed me to explore gamification as a way to further engage users.

From this project, I witnessed firsthand the value of obtaining and acting on iterative feedback, especially Mr. Razif's advice to polish the UI and enhance visual consistency. His feedback pushed us harder for the interface quality and helped me realise that visual consistency is not merely aesthetic, it influences how intuitive and enjoyable the app is. Overall, this task directed my ability to empathise with users, work in a team, and deliver a culturally suitable and technically effective AR experience.