Experiential Design - Task 3 / Project MVP Prototype

10.11.2023 - (Week 7 - Week )

Chong Hui Yi / 0363195

App Design II / BDCM

Task 3 / Project MVP Prototype

TABLE OF CONTENT

1. Lectures
2. Instructions
3. Task 3
4. Feedback
5. Reflection

LECTURES

Click HERE to view lectures & exercises

INSTRUCTIONS

Task 3: Project MVP Prototype

Requirement

"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.

1. Screen Design visual prototype (Figma)

2. Functioning MVP of the App Experience"

Figma Prototype

Fig. 1.0 Figma Prototype (Click HERE to view in Figma)

Fig. 1.1 Figma Prototype - Mobile Version (Click HERE to view in Figma)

Creating AR Target

Fig. 2.0 Scan objects into 3D using the Polycam app.

Fig. 2.1 Unable to generate a model target with Vuforia's Model Target Generator

Fig. 2.2 Voforia's model target only for premium plan (TT ^ TT)

Fig. 2.3 Voforia's Multi Target

Unity Prototype

Fig. 3.0 Homepage Scene in Unity

Fig. 3.1 AR Scene in Unity

Fig. 3.2 Multi Target & Info

Fig. 3.3 Info point animation

Fig. 3.4 AR Info Script

Fig. 3.5 Scan Icon Script

Fig. 3.6 The scan icon & ingredient name change after detection, and the info point works.

Fig. 3.7 The script for displaying a thumbnail when clicking the confirm button, with the option to remove it.

Fig. 3.8 Clicking confirm shrinks the item below as a recipe ingredient, which can be removed.

Fig. 3.9 The script to change the recipe image using the left/right arrow.

Fig. 3.10 Clicking generate recipe creates a recipe from the confirmed ingredients.

Fig. 3.11 The script for showing feedback text and fading the background when clicking "Add to Inventory."

Fig. 3.12 Clicking "+" confirms the ingredient is added to the inventory.

Fig. 3.13 Project MVP Prototype Walkthrough Video

Final Outcome

Google Drive Link (Presentation Video & Assets): https://drive.google.com/drive/folders/1zcQZcelm3ez9TOsObVyTYN-piCVH8w70?usp=sharing

Youtube Presentation Link: https://youtu.be/IhsqzfIBmEs

Fig. 4.0 Project MVP Prototype Presentation

Done:

- Homepage

- AR Scan Page

To do:

- Inventory Page

- Recipe Details Page

FEEDBACK

Week 9:

The UI looks good, and the storage info is practical. The challenge lies in the 3D model of the items—it needs to have a similar colour and shape for AR detection to work. So, if you're using fresh ingredients, you'll need to scan them immediately to avoid them spoiling. For example, a carton of eggs or a can—stable 3D models like these—can be scanned easily.

REFLECTION

I think the main difficulties I encountered in Task 3 were with the 3D models for AR and the coding in Unity. I feel like using Unity is quite troublesome, especially when it comes to UI layout. Unlike Figma, Unity doesn’t have an auto-align feature, so it’s hard to get everything properly aligned. Plus, I have to convert all the images into PNG files before importing them into Unity.

Besides that, I really need to thank ChatGPT—it’s helped me a lot with coding. However, sometimes the solutions it gives aren’t entirely correct. I absolutely hate seeing red errors in the console, and I have to keep fixing them over and over. But once the errors are gone, I feel so happy and satisfied.

Search This Blog

Chong Hui Yi (0363195)