Experiential Design Final Task
Experiential Design Final Task
Zhang Wan Ru / 0368214
07/07/2025—03/08/2025 (Week 12—Week 15)
Experiential Design/Bachelor of Design in Creative Media/Taylor's University
Instructions
Task
Continue to complete the following parts based on the completion of task 3
- Add a 3D model of the tree
- Add an interface for writing messages, allowing users to customize the content
- Exporting the project
I first found a tree model from the Internet. Of course this tree is free to use.
![]() |
| Fig. 1.1 3D Tree model |
![]() |
| Fig. 1.1 3D Tree model |
At first, in this stage, I imported and configured the 3D model MainTree within Unity. The model’s Transform settings were adjusted to ensure accurate placement and size in the AR scene, with a uniform scale of 0.05 across all axes to prevent it from appearing too large in the real-world view. A Mesh Filter and Mesh Renderer were automatically included, allowing the model to be rendered properly with lighting and shadow support enabled. I also applied Light and Reflection Probes using the Blend Probes setting to ensure realistic environmental lighting. The Animator component is attached and paired with a humanoid Avatar (MainTreeAvatar), preparing the model for future animation integration. These settings ensure the model is ready for testing in AR, both visually and interactively.
![]() |
| Fig. 1.3 3D Tree model show |
The Image component uses a custom icon (a pencil symbol), likely indicating an "edit" or "write" action. This icon helps enhance visual communication within the UI. The image type is set to Simple, and Raycast Target is enabled to allow click interaction.
The Button component is set to Interactable, and it uses the Color Tint transition mode to provide subtle visual feedback when the button is hovered, pressed, or disabled. Although the color states are currently all white, these can later be adjusted to improve UX responsiveness.
This button is a key part of the user interface and will likely trigger a specific action in the AR experience, such as editing, entering a text input mode, or activating another UI panel.
Fig. 1.4 UI Button element within Unity’s Inspector
UI Button element within Unity’s Inspector
In this project, I used a custom Unity C# script called SwitchPage to manage UI navigation across different screens. The script is attached to a GameObject named UIManager, and a list of UI panels (e.g., Home, Info, AR View) is assigned to its _page field.
In the Unity Inspector, I configured individual UI buttons—such as the one shown in Figure X—to trigger the Switch() method. The OnClick() event of the Button is linked to the UIManager object, with the target function set as SwitchPage. Switch(int), passing in the page index corresponding to the desired screen.
![]() |
| Fig. 1.5 C# script |
Fig. 1.6 Outcome
Whenever the UI component is re-enabled, the TextMeshPro input field is cleared. This ensures that the user always sees an empty input form when revisiting the screen.
![]() | |
|
Automatically clear old content when the user switches pages, opens a new window, or returns to the input interface to prevent accidental input. This improves the interactive experience, ensuring a "fresh page" experience every time the user enters the interface.
And this is just a photo of when I export the app.
![]() | |
|
User testing:
App Presentation Slide & Video Showcase
Tree.apk < Click & Download
Reflection
Finally, I've reached the final task of the experiential design project, and I'm thrilled to be involved. Initially, I was a little worried about my ability, but it proved even easier than app design and game development. I'm incredibly satisfied with my work. The knowledge and feedback Razif provided me in class were incredibly helpful. Even with some unexpected issues along the way, I'm still proud of my accomplishments. I'm especially grateful to my friend for lending me his phone, enabling me to successfully complete this project. I'm also incredibly grateful to Razif for his patient guidance and support throughout the project.
In the final stages of this project, I successfully completed the development of a mobile augmented reality app based on Unity. The project incorporates an interactive UI, custom 3D models, and scene transitions. Most importantly, I successfully exported the app, marking the completion of the prototype. Despite the challenges, I persevered and ultimately successfully built and exported the app, ensuring proper operation on the target devices.
This process taught me the importance of clear UI logic design. A modular script design helps separate interface logic from visuals. Much of the configuration is handled outside of the scripts, requiring careful reference assignment and repeated testing. While some script functions were simple, like clearing an input field, they significantly improved the user experience. Furthermore, I gained a deeper understanding of the overall structure of a Unity AR project, which requires meticulous planning from scene setup to final export.
Overall, this project not only helped me master the technical workflow of Unity and Vuforia but also exposed me to user-centered design. While the final prototype was relatively simple, it laid a solid foundation for future, more complex, interactive AR projects. I'm proud of my ability to create a functional minimum viable product. Most importantly, this experience taught me how to break down problems, plan a structure, and iterate on improvements with clear goals in mind.













Comments
Post a Comment