Experiential Design | Task 3 : Project MVP Prototype
19.11.2024 - 15.12.2024 Week 09 - Week 12
Tracy Angeline Tio / 0362222 / Bachelor of Design ( Honors ) in Creative Media
Experiential Design / Taylor's University
TASK 3 : PROJECT MVP PROTOTYPE
Prototype Link : View HERE.
For the button code, I applied on what have been learned from the class exercises by using the 'gotoscene' and we just need to insert the scene name in the inspector.
Home Page
Working on the 3D room, I mostly applied on what have been learned during exercises in class. To make the store room attractive, I added decoration like cube, shelf, and table to put on some item that could be interacted later.
For the floor, and other 3D materials, I took the source from Unity Assets Store (Free ver.) and Turbosquid. Here are the preview on the components.
Item Downloaded :
Once user scan the image target into the AR Camera, the frame and text indicators would be fade out and the video plane and the button to play and stop would appears. Once user done scanning by click the same button, A pop up messages would shown as the prototype sample. Here are the script I used for this part.
For the future tools, mostly I'm gonna more focusing to the features inside 3D room like music, carousel and avatar.
Experiential Design / Taylor's University
TASK 3 : PROJECT MVP PROTOTYPE
TABLE OF CONTENTS
LECTURES
All lectures and weekly activities could be viewed on Task 1 : Trending Experience blog.
INSTRUCTIONS
MIB BOOKLET :
TASK 3
Project MVP Prototype
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 :
- Share the final link of video presentation about walkthrough of your AR project prototype.
- Explain your AR app and elaborate on what has been done and what yet to be done.
- Include your assets building or collection progress.
Prototype Progression
During on project 2, I already made the prototype of the ideas and demonstration on what my AR app looks like on this images.
 |
| Fig 3.1 Prototype View from Project 2 Week 07 11/11/2024 |
Since I received some feedback from Mr. Razif about the prototype, I plan to changed out a little especially on the 3d room part. I would like to add more interactions like building avatar that we have learned on the exercises class.
 |
| Fig 3.2 Prototype Final Revision Week 12 13/12/2024 |
Splash Screen Animation and Welcome Page
Moving on to the unity, I firstly designed from the loading page, but I changed it to the splash screen animation using Dark Moon logo. The tutorial could be seen on this video.
Fig 3.3 Splash Screen Animation Tutorial Week 12 10/12/2024
Here is the preview for what I did on File - Build Settings and Player Settings. For the logo on the app, I tried to use the same 'Dark Moon' logo from the artist since I took the theme for my AR from it. |
| Fig 3.4 Player Settings Adjustment Week 12 10/12/2024 |
Fig 3.5 Preview from Splash Screen Animation Week 12 10/12/2024
After the splash screen, user would be directed to the login page first before the home page. On this page, user would just need to click the login and then submit to began the AR journey. A back button is given whenever user want to go back from previous page. |
| Fig 3.6 Welcome Page Week 12 10/12/2024 |
 |
| Fig 3.7 All Button Code Week 12 10/12/2024 |
Home Page
On the home page, I did the design same with my prototype as there were no feedback regarding on it's design. In the home page, there were 3 button displayed and back button to go back to the login page. For interactions, I added hover to make it more interesting.
 |
| Fig 3.8 Home Page Design in Unity Week 12 10/12/2024 |
Scan AR Stores
Before I create the 3d room, I made out some notices or instructions for a new user when they don't know how to use it (examples). After that user could click start and there were instructed to scan the ground plane / floor.
 |
| Fig 3.9 Scan Floor Camera Pages Week 12 10/12/2024 |
 |
| Fig 3.10 3D Room Process Week 12 10/12/2024 |
 |
| Fig 3.11 Floor Textures Week 12 12/12/2024 |
- Glass Table
- Book Vintage
- Glass Door (From Free 3D Website on this LINK)
 |
| Fig 3.12 3D Components from Turbosquid Week 12 12/12/2024 |
 |
| Fig 3.13 Room Progress Week 12 13/12/2024 |
On the top of the table, I filled up with the stores item, especially album, cd, poster photo and photocards. For the album, I added some interactions for user if they want to buy the items meanwhile for others item, I added drag and drop interactions.
 |
| Fig 3.14 Adding Elements Week 12 13/12/2024 |
About ENHYPEN
Regarding on this features, I think this one is the easiest since I don't need a code to built it. Once my AR room progress is reached 50%, I quickly designed on this features and applying scroll effect since there are 7 members and it won't fit in all the same canvas. I used this tutorials to help me designed the scroll effect.
Fig 3.15 Scroll View Unity Tutorial Week 12 13/12/2024
 |
| Fig 3.16 Content for Scroll View Week 12 13/12/2024 |
 |
| Fig 3.17 Progress of the Pages Week 12 13/12/2024 |
 |
| Fig 3.18 Final Page About ENHYPEN Week 12 13/12/2024 |
Draw a Card
For this features, user should prepare an images target to be scanned and a virtual random photocard would be played once user tapping the button "Play and Stop". Below are the used images target for my card.
 |
| Fig 3.19 Image Target Week 12 13/12/2024 |
 |
| Fig 3.20 Inserting Image Target to Vuforia Week 12 13/12/2024 |
 |
| Fig 3.21 Draw a Card Progress Week 12 13/12/2024 |
 |
| Fig 3.22 Script to Run a Full Flow for Draw a Card Week 12 13/12/2024 |
 |
| Fig 3.23 Component Inside for Script Week 12 13/12/2024 |
FINAL OUTCOMES PROJECT MVP PROTOTYPES
Walkthrough Video :
Fig 3.24 Final Video Presentation Project MVP Prototype Week 12 15/12/2024
Assets Link :
What has been done :
- Welcome and Login Page
- Home Page
- 3D Stores Room
- About ENHYPEN Pages
- Draw a Card
What yet needs to be done :
- Adding page about concept photos description.
- Generate Audio from Text and Insert to the Audio Button
- Interaction from Items in the Table (Tap to go to link)
- Spawn Member Features on Image Target/ Ground Plane
- Adding Music and carousel for the album scanning.
FEEDBACK
Week 9
- You have too many screens (UI) despite than the AR experience. Since the topic is about Kpop artist, you can develop it by adding the 3d characters when user scan it. Make it interesting as you can.
Week 12
- Since the character from the avatar looks different from the real artist, there was some websites that could build avatar too in a good way.
REFLECTIONS
Working on the prototype for my AR App was a fun and challenging journey. During on the process of making it, I enjoyed each of the steps since the topic was about my favourites too. But when I looking for my other classmate, I realize that I'm still far enough from good. They had their own unique features on the app and interactive as well, so I'm losing confidence suddenly and tried to find a way to developed more features from my app.
One of the saddest thing on this project is that my devices still can't working when I want to build and run, as this things make me afraid because we need to tested out in the phone and sometimes, what we see on preview could be different when we build it. Luckily, I manage to met people who lend me to build and run using their devices! At last, I'm really thankful for all feedback from the lecturers, which led me to improving more features later, so the app would not contains only for the UI.
Comments
Post a Comment