Skip to main content

Independent Project- Week 33



Semester BWeek 33
Student: Tai Ser Yeet (22064351)
Programme: BA (Hons) Digital Media Design
Task: Week 33's Class Task



WEEK 33

Experimenting with Ground Plane Stage 

  • To be able to make two or more identical models spawn from scanning an image target, you would need to make the image design slightly different from each other 
  • Upload the image again on the Vuforia engine website 

This week, I explored the possibilities of a mid-air target where you can spawn an object in mid-air after scanning an image. I also experimented with the functions of the ground plane stage and plane finder using an emulator, which I printed on paper for easier access.

  • To make the model continually visible even when you pan the camera away from the image target, select "Tracked or Extended Tracked" under the "Default Observer Event Handler (Script)"

Creating the Main Menu (UI Design) 

After the user clicks on the Start button from the main menu, the subsequent scene will appear. I did this by coding the function using Visual Studio Code.

I also animated the logo to fly in with a fade from the start.

Exporting the App onto the Tablet

13.3.24

I tried building the app from Unity on my laptop and ran it on my Samsung Tab S6 tablet by connecting both devices with a Type C wire but it was unsuccessful because of a few errors. I then consulted Josh for help and we tried exporting the app multiple rounds, each time changing a small part of the settings. The sequence of events was as follows: 

Problem 1: 
The system kept referring back to Display 1 for the final product even though the main camera and the AR camera were tied to Display 2. As a result, the main intro scene was not visible.

Solution 1: 
We changed the target display of all of the elements such as the camera to the canvas panel from Display 2 to Display 1.

Problem 2: 
The app could not detect the camera of a specific device. This caused a black background to appear behind the UI elements.

Solution 2: 
None at the moment. We tried downloading the ARcore plugin from the package manager but certain settings were still missing and that was probably the reason why I could not get it to work.



Creating the Wireframe Design

While I was searching for appropriate interfaces for kids ages 9-11, I came across this article writing about the criteria that needed to be considered when designing interfaces for kids. 

(Supunsala, 2020)

(Supunsala, 2020)

I found these examples of controls that could help the users interact with the 3D models without having to fiddle around with the finger gestures such as pinching motion for shrinking the object and swiping for object rotation. These buttons are also big and clear, perfect for our primary school users.
iExplore: Bugs

Shifu Safari - Augmented Reality Learning Games

Rough Wireframe Sketches 

To start off, I did a few storyboards of the main screens. This helped me visualize the structure of the app and maintain the consistency of elements such as the stroke width, style of buttons, and UX writing.
Log In/ Sign Up Screen

Sign Up Screen & Home Screen

3D Model Screen

Mini Quiz Screen

Mini Quiz Screen

Low Fidelity Wireframes

I then transitioned over to Figma and designed the low-fi wireframe and prototype using an existing design system I obtained from a UX workshop. The red lines on the canvas are grids I placed so that I could organize elements neatly to improve reading ease. 




Low-Fidelity Prototype on Figma