Experiential Design · Task 3 · Project Prototype

21 March 2025 - 3 June 2025 / Week 6 - Week 11

YANG ZHI CHING / 0365154

Experiential Design / Bachelor of Design (Hons) in Creative Media

Experiential Design · Task 3

---

| Instruction

Doc 1.1 MIB

---

| Visual Design Prototype

Concept and Theme |

Together with my teammate Tze Wei, we decided on a theme centered around a "technological future". To match this concept, we chose a light green color scheme and a minimalist visual style. The color light green symbolizes innovation, freshness, and comfort—qualities that align with our futuristic and user-friendly AR application.

Fig 1.1 Reference Moodboard

Design Guide |

After confirming our theme, we developed a design guide to ensure visual consistency.

• Primary Colors: Black, grey, white, light yellow-green (#DAFF8D)
• Accent Color: Light red (#ED484C)
• Font: Inter – chosen for its clarity and modern simplicity

Fig 1.2 Design Guide

Sketches |

After we had a complete design guide idea, I started brainstorming and sketching out the usage of the app. Our main function is "Scan Business Card", which allows users to view the information on the business card. The user can then set the card as a favorite, or "favorite," which stores the card in the user's index. After opening the index, users can view the card again to read the information again.

Fig 1.3 Sketches

Visual Prototype |

We began by developing a low-fidelity prototype. Tze Wei helped translate my sketches into UI wireframes, including buttons, panels, and icons.

Fig 1.4 Low-Fi Prototype

After that, I first started working on our onboarding page, which is the cover that allows users to press "Start". By the way, we have decided to call our app name “LinkAR”, which means users can connect with other people through the “LinkAR” AR app.

 

Fig 1.5 Cover Background and Final Design

Fig 1.6 Scanning Page

Fig 1.7 Information Page

Fig 1.8 Index Page Preview

Fig 1.9 User Flow

To streamline integration with Unity, I organized all visual assets neatly in Figma.

Fig 1.9 Assset Board

---

| Progression in Unity

In Unity, I start our project from the main features, which is the scanning flow. I have design a namecard of "Florist" to be the sample card. Below is the card design.

Fig 2.1 Target Image

To help us better understand this technology, I also found some tutorial videos related to our topic:

Vid 2.2 Business Card Project Showcase

Vid 2.3 AR Tutorial Video

Following the tutorial, I started with the Vuforia setup and got the target image.

Fig 2.4 Target Image

After setting the target image, start making the information in the target image: avatar, UI button, and text message. The Avatar website I used was Ready Player Me.

 
Fig 2.5 Avatar Creating in Ready Player Me

Fig 2.6 Putting Avatar into Frame

I started placing the target message. In the news section, I gave all components an intro animation so that they appear from the center of the card. In order to make the button link to the contact site, I have a script that allows the button to link to.

Fig 2.7 Scanned Information

 

Fig 2.8 Link Manager Script to Control Button

After setting up (not set up yet but have a draft) the scan information, I enter the menu page and the scan frame UI. The button on the menu page will take you to Page 2, which has a blank page with a camera frame, instructing you to perform a "scan" operation.

Fig 2.9 Menu Page and Scanning UI

When you scan an object, that is, a target business card, the user interface will display the word "Scanned" and an information panel where you can set the collection as an index.

Fig 2.10 Scanned Information UI

 
Fig 2.11 The hierarchy assets and script assets currently owned

| Bugs & Incompleted Parts

Known Bugs |

1. Scene assets disappear in Editor mode, but appear during Play mode.

fig 3.1 Assets not appear

2. Start scene appears too large; unsure if it's a scale or camera setting issue

 

Fig 3.2 Scene Scale Error

3. Pause and Play buttons are currently non-functional.

 

Fig 3.3 Play and Pause Button Not Working

4. Video Player not functioning.

 

Fig 3.4 Video Player not Appearing

5. Scanning status does not update correctly – UI still shows “Scanning” even when the target has already been detected. Panel remains on screen even when the card is no longer visible.

Fig 3.5 Not Detected but still showing "Scanned"

Not Yet Finished |

1. Menu button, menu panel, and full index system remain incomplete.

---

| Presentation Video

---

| Reflection

Observation |

Throughout this project, I realized that I am good with the visual design process. Creating the UI layout, choosing the color palette, and building the overall look and feel of the app was something I truly enjoyed. I didn’t face much difficulty during the design phase—in fact, it was the most enjoyable part of the project for me.

However, when transitioning to the technical side, especially working with Unity and Vuforia, I encountered several challenges. I often struggled with understanding how the system works behind the scenes, especially with scripts, object hierarchies, and scene management. Even small bugs sometimes took a long time to resolve because I lacked the technical background.

Findings |

I discovered that even though Unity offers a powerful platform for interactive experiences, it has a steep learning curve for beginners. Online tutorials were helpful, but not always directly applicable to my exact situation. Many times, I had to experiment or find workarounds through trial and error. This made me realize how important it is to understand the logic and structure of Unity—not just follow steps blindly.

I also found that proper organization of assets and keeping a clear structure in the Unity hierarchy helped reduce confusion during development.

What I Learned |

• Technical Skills:

  • How to set up Vuforia in Unity for AR tracking

  • Importing and placing avatars using Ready Player Me

  • Creating animated UI elements that appear based on user interaction

  • Writing basic scripts to connect buttons to external links

• Soft Skills:

  • How to manage frustration and stay patient when solving bugs

  • How to search effectively for Unity-related solutions

  • The importance of testing features in small steps to prevent bigger problems later

Overall, this project taught me that even though technical challenges can be overwhelming, they can be overcome with persistence and curiosity. I still have a lot to learn in Unity.

---