19th May 2025 - 1st June 2025 (Week 7 - Week 11)
Sin Jun Ming 0364638
Experiential Design / Bachelor of Design in Creative Media / Taylor's University
Task 3 - MVP Prototype
LECTURES
Week 7 - Screen Prototyping
In Week 5, we made further progress on our AR project by implementing video playback. Now, when the camera detects the image target, a video is displayed over it. We also began exploring interactivity by coding in Visual Studio Code. For the tutorial task, we programmed a button that triggers an explosion animation after being clicked three times, causing the cube in the video to "explode." We used an explosion animation from the Unity Asset Store, which added a fun and dramatic touch to our AR experience.
Fig 1.1 Week 5 tutorial
Week 8 - Scenes Prototyping
In Week 6, we had an online class where we learned how to create multiple scenes in Unity to make our AR project feel more like a complete app. We designed a simple home screen with two buttons: “Launch AR” and “Credits,” and built a separate scene for the credits page. On the AR camera scene, we added an info panel that can be toggled on and off with a button. This activity helped us understand how to structure navigation and design user interfaces within an AR application.
Week 9 - Scenes Prototyping
Week 10 - Scenes Prototyping
Instructions
Task 3 - MVP Prototype
Instruction:
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.
Requirements:
Screen Design visual prototype (Figma)
Functioning MVP of the App Experience
Submission:
Video walkthrough and presentation of the prototype
Online posts in your E-portfolio as your reflective studies
1. Figma Update
I added onboarding page with instructions to guide user in using this app (AR Tunes) and provide better user experience.
Fig 2.1 Figma file
Proposal Document:
Fig 2.2 Proposal Document
Proposal Slide:
Fig 2.3 Proposal Slide
2. Task Delegation
Sin Jun Ming (Me):
- In charge of completing onboarding scene and main feature - AR lyrics.
Hanson Pea Wei Hao:
- In charge of completing main feature - AR filter.
3. Process
- Onboarding Scene
In Unity, I began the development of AR Tunes by designing the onboarding scene, which serves as the user's first interaction with the app. The purpose was to introduce users to the concept of AR music interaction in a simple and engaging way. I used Unity’s UI system to create a clean onboarding flow.
Fig 3.1 Onboarding Scene
Instruction panel is shown when "Start" button is clicked.
Fig 3.2 Instruction Panel
Once the "Let's Go" button is clicked, scene transition from Onboarding Scene to AR scene occurred. To keep the project clean and modular, all media assets including audio clips, UI images etc. are stored in a folder inside "Assets" directory.
Fig 3.3 Assets Folder
- AR Scene
Using Vuforia, I set up an Image Target which is a specific album cover ("DAMN." by Kendrick Lamar). Once scanned, a "Show" button appears in AR space.
This button acts as the entry point for deeper interaction. Tapping it reveals an Album Panel that includes a play button.
Fig 3.5 Album Panel
When the user taps "Play Album," the audio begins and a "Show Lyrics" button fades in.
Fig 3.6 Song Panel
Fig 3.7 Lyrics Panel
4. Video Presentation
YouTube link:
Reflection
Working on this task was a really eye-opening experience for me. It was the first time I got to mix music, visuals, and AR together into something interactive, and I found it both exciting and challenging. From the start, I knew I wanted to create something that felt smooth and intuitive, where users could just scan an album cover and feel like they’re stepping into a music experience.
I also spent time designing a simple onboarding scene to guide users into the AR experience. It made me think more about how first impressions matter, and how important it is to make interactions feel smooth and intentional. Along the way, I learned to better organize my project in Unity by storing all assets neatly inside folders which is something small but it made a big difference.
Overall, this task pushed me to grow both technically and creatively. It gave me more confidence in using Unity and scripting, and it made me appreciate how AR can be used in a more meaningful way.
Comments
Post a Comment