Bachelor of Design (Honours) in Creative Media Experiential Design - MMD60204
Experiential Design - Task 3
Overview
> Module Information Booklet
> Task Instruction
Visual Prototype Design (Figma)
Functional MVP in App Experience (Unity)
Prototype Demonstration in Mobile
Walkthrough Video
> Feedback
> Reflection
Module Information Booklet
Task Instruction - Project MVP Prototype
Once proposal is approved, students will work on prototyping their project. In this stage, students will identify limitations they may not have known about before and think creatively about how to overcome those limitations to bring their proposed ideas to life.
The goal of this assignment is for students to test key functionality of their project. The final product may not be the final visual design project. Students will be evaluated on the functionality of their prototype and their ability to think creatively about alternatives to achieve the desired outcome.
Visual Prototype Design (Figma)
We designed the overall screen layout and user interface for the WanderBloom AR app, each interaction is carefully planned and designed to make sure that the user experience is smooth. Plus, we developed a detailed prototype flow using Figma, outlining the navigation structure, main features, and AR interactions within the app. This process helped us visualize the user experience and continuously refine the design before developing in Unity.
In this task, we focused on planning the core features of the WanderBloom AR app. This included:
Start Screen
Home Page
AR Scene (image target recognition, info and sound panels, quest tracking, gamified interactions)
Start Screen
Users begin their AR experience on the Start Screen first, where a welcoming interface invites them to tap the Start button to proceed into the app. This entry point sets the tone for the immersive journey that follows.
Home Page
After landing on the Home Page, users are presented with two main options: Card Scanner and View History. As our focus was on developing the core features first, we prioritized to string the Card Scanner, which directs users to the AR Scene to begin their interactive experience.
AR Scene
Moving on to the AR Scene, we divided our tasks to work efficiently. Yi Xun focused on sourcing suitable 3D models from the Unity Asset Store, while Huey Yee handled the integration of the Vuforia Engine to implement the image target recognition feature.
Below are the assets we used for our AR app, carefully selected to match the natural theme of WanderBloom and meet our visual expectations:
We began by placing a single tree model onto our image target as an initial test. After building and running the app, we tested the AR functionality to ensure that the image target was detected accurately and that the 3D object was anchored correctly in the scene. This helped us validate the core AR setup before adding more complex elements.
Once the image target was successfully detected and displayed the tree model, we continued building the AR Scene by enhancing the overall environment with additional 3D assets to create a more immersive experience.
At the same time, we began integrating key UI elements into the AR interface, such as the Info and End buttons, to support user interaction and provide guidance within the AR experience.
We also added side panels to enhance interactivity within the AR Scene. One of them is the Sound Panel, which allows users to toggle ambient nature sounds on/off based on their preference. Huey Yee sourced suitable ambient audio from YouTube and integrated it into the scene, contributing to a more immersive and calming user experience.
The Quest Panel displays interactive tasks that users can complete by engaging with specific objects in the AR environment, such as a mushroom or butterfly. We implemented a trigger function that checks off each task once the user interacts with the objects, helping to create a sense of progression and gamification within the experience.
Prototype Demonstration in Mobile
Walkthrough Video
Click HERE to view the walkthrough video on YouTube.
Feedback
Week 11 During Week 11, we consulted Mr. Razif regarding Task 3, as we encountered challenges when exporting our app and launching it on our Android phone. Specifically, when attempting to use the AR Camera to scan our image target, the Forest Nature Card which the screen turned yellow and the AR functionality failed.This issue arose because we had switched from using Vuforia Engine to Unity's built-in AR Foundation, due to our 3D model requiring the Universal Render Pipeline (URP). This change forced us to adjust our graphics settings, which made Vuforia unusable.
After consulting Mr. Razif, we discovered that we should not have used the Universal 3D project template. Instead, we should have used the 3D (Built-in Render Pipeline) template. Following his guidance, we recreated our project using the correct template and re-integrated Vuforia Engine. As a result, we were finally able to build and run the app successfully on our Android phone, with the AR Camera functioning as intended.
Reflection
Throughout this task, my partner, Huey Yee and I encountered numerous challenges, especially since this was our first semester working with the Unity platform. As complete beginners, everything from setting up the environment to building functional AR experiences was new and unfamiliar. However, these challenges became valuable learning opportunities. Task 3 pushed us to explore, experiment, and think creatively to overcome technical limitations, especially when we encountered issues related to project templates, rendering pipelines, and AR camera functionality. Despite the setbacks, we managed to build a working MVP prototype for our WanderBloom AR app, which successfully demonstrates the core idea and functionality of our concept.
This process has significantly strengthened our problem-solving skills and deepened our understanding of AR, VR, and XR development. We are truly grateful for the opportunity this module provided, and especially thankful for the continuous support and guidance of our lecturer, Mr. Razif, who helped us stay on track. This experience not only enhanced our technical skills but also boosted our confidence in developing creative, immersive digital solutions even in the face of unexpected obstacles.
.png)
Comments
Post a Comment