Experiential Design: Task 03 - Project Prototype
EXPERIENTIAL DESIGN MMD 60204
WEEK 08 - Week 11 (10.06.2025 - 01.07.2025)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Experiential Design / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Experiential Design - Task 03: Project Prototype
1. INSTRUCTIONS
Module Information Booklet
Module Information Booklet
Task 03: Trending Experience (Week 08 - Week 11)
For this task, we will need to evaluate the primary features of our
sanctioned project. The result may not be a completely polished visual
design. The proposal must include:
- Screen Design Visual Prototype (Figma)
- Functioninng MVP of the App
Goal: We will assess their prototype capabilities and their
creativity in exploring alternatives to reach the intended results.
2. TASK 03: PROJECT PROTOTYPE
Me and Zhi Qing are developing an AR app called LinkAR, am imteractive
augmented reality business card platform that can enhances traditional printed
cards with digital experiences. When scanned using a smartphone, the card
activates a 3D avatar, contact details, and a personalized video. A secondary
feature includes a digital card index, allowing users to revisit scanned
cards—even if the physical version is lost. ARScan redefines professional
networking by merging physical and digital touchpoints into a seamless,
engaging experience.
2.1 Concept and Theme
My teammate Zhi Ching and I agreed to work on a theme focusing on a
"technological future". To complement this idea, we opted for a light
green color palette and a minimalist design. The light green hue represents
innovation, freshness, and comfort—traits that resonate with our
forward-thinking and user-friendly AR application.
Figure 2.1 Reference Moodboard
2.2 Design Guide
Once we confirmed our theme, we then created a design guide to maintain visual
uniformity.
- Primary Colours: Black, grey, white, light yellow-green (#DAFF8D)
- Accent Colour: Light red (#ED484C)
- Font: Inter - chosen for its clariy and contemporary simpliciy
Figure 2.2 Design Guide
2.3 Sketches
Once we had a full concept for the design guide, Zhi Qing start to brainstorm
and sketch how the application would function. The primary feature is "Scan
Business Card", enabling users to access the details on a business card. Users
have the option to mark the card as a favourite, which saves it in their
personal index. When thay revisit the index, they can view the card again and
read the information.
Figure 2.3 Sketches by Zhi Ching
2.4 Visual Prototype
While we start by creating a low-fidelity prototype, I assited in turning Zhi
Qing's sketches into UI wireframes in Figma, while encompassed buttons,
panels, and icons.
Figure 2.4 Low-Fi Prototype
Figure 2.5 and Figure 2.6 Cover Background and Final Design
Figure 2.7 Scanning Page
Figure 2.8 Information Page
Figure 2.9 Index Page Preview
Figure 2.10 User Flow
Zhi Qing and I then organized all visual assers in Figma to facilitate
smoother intergration with Unity.
Figure 2.11 Assets Board
📌 Click
HERE
to access to our Figma file
2.5 Progression in Unity
In Unity, Zhi Ching start our project from the main features, which is the
scanning flow. Zhi Ching have created a name card for "Florist" to
serve as the sample card. Below is the design of the card.
Figure 2.12 Target Image
To enhance our comprehension of this technology, Zhi Ching has discovered
some tutorial videos pertinent to our subject.
Video 1 Business Card Project Showcase
Video 2 AR Tutorial Video
Zhi Ching began the Vuforia setup and obtained the target image as outlined
in the tutorial.
Figure 2.13 Target Image setup
Figure 2.14 Target Image setup
Once the target image is chosen, then begin to create the elements within
it, such as the 3D avatar, UI button, and text information. The avatar
platform Zhi Ching choose from was Ready Player Me.
Figure 2.15 and Figure 2.16 Avatar Creating in Ready Player
Me
Figure 2.17 Placing Avatar into Frame
Then began adding the target message. For the news section, I
implemented intro animations for all the components, making them emerge from
the center of the card. To ensure the button links to the contact site, I
created a script that enables this functionality.
Figure 2.18 Scanned Information
Figure 2.19 and Figure 2.20 Link Manager Script to Control
Button
Figure 2.21 Menu Page
Figure 2.22 Scanning UI
Upon scanning an object, such as a target business card, the user interface
will show the term "Scanned" along with an information panel that allows you
to designate the collection as an index.
Figure 2.23 Scanned Information UI
Figure 2.12 The hierarchy assets and script assets currently
owned
2.5.1 Bugs and Incompleted Parts
Know Bugs
-
Scene assets disappear in Editor mode, but appear during Play mode.
Figure 2.13 Assets not appear
-
The starting scene seems excessively large; it's unclear if the issue lies with the scale or the camera settings.
Figure 2.14 Scene Scale Error
Figure 2.15 Scene Scale Error 2
-
The Pause and Play buttons are not working at the moment.
Figure 2.16 Play and Pause Button Not Working
-
Video Player not functioning
Figure 2.17 Video Player not appearing
-
The scanning status does not refresh properly – the interface continues to display "Scanning" even after the target has been detected. The panel stays on the screen, even when the card is no longer in view.
Figure 2.18 Not Detected but still showing "Scanned"
-
Menu Button, Menu Panel, and fell index system remain incomplete.
2.6 Presentation Video
3. REFLECTION
Through this project, I discovered my strength and enjoyment in visual
design, particularly in crafting UI layouts and defining the overall
aesthetic. While I was confident during the design phase, transitioning to
Unity and Vuforia presented technical challenges, especially in
understanding scripting and scene management. These difficulties, however,
became valuable learning opportunities. I realized that mastering
interactive tools like Unity requires not only patience but also a deeper
grasp of logic and structure. By experimenting, organizing assets
effectively, and solving problems step by step, I gradually improved my
technical confidence. This project ultimately taught me the importance of
persistence, adaptability, and balancing creativity with technical
execution.
QUICK LINK
Tasks
Google Drive Link: Click HERE
