Experiential Design Task 2: Prototype

5/10/2023 - 9/11/2023
Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media
MMD 60204 / Experiential Design
Task 2: Prototype


Task 2: Prototype
The process of making the AR prototype from my proposal begins with working in the Unity software.

Firstly, I opened Unity and installed the Vuforia engine to enable the AR Camera features. This process involves entering the Vuforia license code into the Unity's AR Camera.


Fig 1.1 - Image Target Testing

Secondly, my app requires a 3D model to be displayed. The 3D model used is from SketchFab.

 I used Vuforia's Image Target feature to project a 3D model by detecting the corresponding Image Target. The image target is set up by creating a Database in Vuforia Developer website under Target Manager. After inputting the images, the database is downloaded and inserted into Unity. I select my database name and image target underneath Inspector settings to select the 3D model for projecting.

Afterwards, I arranged the 3D model to be displayed facing the same direction and elevation of the Image Target so that it projects properly when shown.


Fig 1.2 - Pinch & Zoom settings

To apply the feature for users to manually adjust the size of their projected 3D model, I created a script that allows users to do that via touchscreen. After multiple testing, I found this setting to be user friendly by being not too fast neither too slow. Down below is the script for Pinch&Zoom:


Fig 1.3 - Pinch & Zoom Script


Fig 1.4 - Buttons

I created some buttons with horizontal scrolling by using the UI features of Unity. This is for users to browse through the selection of the available wall furniture.



Fig 1.5 - Prototype View


Video 1.1 - Prototype Demonstration

After exporting the app into mobile, I tested the features developed to ensure that it works as intended. I noticed that one of the image buttons were not appearing but other than that, the 3D model as well as the pinch and zoom feature works as intended.

Things to add:

For future development of this app, a few features such as having a button to show to users the info about the 3D model's size is displayed to give users a dimension to note down when they are satisfied with their 3D model placement. 

A menu screen is also to be added with onboarding via an instructions menu to showcase users how to use the application. 

Other than that, apply more models (mirror and clock) for variety in the testing of the application.

Download the file here:

Unity files: https://drive.google.com/file/d/1q3uAM_z6yYJxtAW5AemZMyORhO172MAx/view?usp=sharing

App APK: https://drive.google.com/file/d/1AsjZp0EdN7Gn2Zx4l6RU4gSEG8X5mF4h/view?usp=sharing


Comments

Post a Comment

Popular posts from this blog

Collaborative Design Practice - Task 1: Empathy Map & Problem Statement

25/09/2024 - 9/10/2024 | Week 1 - Week 3 Edwin Choo Quan Rong | 0348305 GCD62204 Collaborative Design Practice | Bachelor of Design (Hons) In Creative Media Task 1: Empathy Map & Problem Statement Instructions Task 1: Empathy Map & Problem Statement Week 1: Project Briefing & Group Formation (25/9) The first week of class with Ms Li Lian introduced us to the module of Collaborative Design Practice (CDP for short) by discussing about the contents and project goals we are taking this semester. Unlike any other modules that we have taken before, CDP provides us the opportunity to work with students from other departments of the campus, namely students from Business and Food Science majors. We as the Design students, were to form a team and select one project to collaborate on.  Introducing my design team members and their respective specializations: Arnusha Arnaz Khan (Group Leader) - Ent...
Read more

App Design II - Task 2: Interaction Design Planning & Prototyping

Image
 26/5/2025 - 9/6/2025 Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media DST 61004 / Application Design II Task 2 Task 2: Interaction Design Proposal and Planning Process Wireframes User Flowchart Diagram Animation Prototypes Animation Description & Rationale I utilized  Figma  to plan out the flowchart for the app. Here below is an overview of the flowchart as well as the animations used for the app. These animations were selected with simplicity, comfort, and ease of use in mind as people want to spend lesser time on simple information apps such as weather apps. Fig 1.1 - Flowchart Preview Fig 1.2 - Map Menu Flowchart Fig 2.0 - Video Presentation
Read more