Experiential Design Task 3

Experiential Design Task 3

WEEK 05 - Week 07 (22.05.2025 - 05.06.2025)

NAME: Chai Wei Yi

I.D: 0369561

COURSE: Application Design 2 / Bachelor of Design (Honors) in Creative Media

GROUP: Class 01 Sec 01

Experiential Design/ Bachelor of Creative Media/Taylor's University
Task 3: Project MVP Prototype

INSTRUCTIONS

Task 3 Instructions: 

Timeframe: Week 6 – Week 10
Deadline: Week 10


Description:
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.


Requirements:
1. Screen Design visual prototype (Figma)
2. Functioning MVP of the App Experience


Submission:
1. Video walkthrough and presentation of the prototype
2. Online posts in your E-portfolio as your reflective studies

LECTURE

TASK 3 PROJECT MVP PROTOTYPE

Mood Board Visualization 

To establish a consistent look and feel, we created a mood board that reflects our app’s tone. Our visual references include AR UI examples and a clean interface layout to guide our design direction. The goal is to make our story App more attractive and fun.

Ui Reference

Design Guide 

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

Primary Colors:  Yellow #FDCD01 & Brown #9E690E

Accent Color: White #FFFFFF

Font: Motiva Sans & Legacy Run Time – chosen for its clarity and modern simplicity. 

We apply different font weights to establish hierarchy, from bold titles to readable body text. This ensures clarity on all screens, especially on mobile devices.

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 Story Page", which allows users to view the 2d character on the story book and listen to story. The user can also play game after reading the book. 

Visual Prototype 

We began by developing a high-fidelity prototype. Jiexuan helped give me opinion about my sketches into UI wireframes, including buttons, panels, and icons. He also help me do component we done it together. 

Prototype in Unity (MVP):

1. Setting Up Easy AR Engine

To begin using augmented reality (AR) in Unity, I needed to integrate Vuforia Engine into my project. But unfortunately our picture can't detected in Vuforia.

So, I have ask ChatGPT to give me some solution. Chatgpt suggest us a few different other AR engine. At last we decided to use EasyAR: 

I visited Easy AR website and created an account. I downloaded the Easy AR for Unity. Then imported the Easy AR Engine package into Unity. 

After all the set up I started to code the landing page. I also research some tutorial from YouTube.

After watching a few tutorial video, I started making the landing page frame UI. The button "Enter" on the landing page will take you to Page 2, which can choose the story book that we want to read. 

This is the code for the Enter button link to Page 2.

For the page two is the story book choosing section. In this page I create the frame to link together before go to scanning section. 

This is the code for the storybook choosing section page.

When we are doing scanning page we have faced some issue. We run the unity but the camera got problem. 

The camera got some error we can't find what happen so we ask Chatgpt. 

We have try to debug the script a few time but still cannot made it. So we decided to continue solve this problem on Final Task. 

Task 3 Presentation: 

Partner Blog:https:/0356515.blogspot.com/2025/08/experiential-design-task-4.html

FEEDBACKS

Week 10

Mr. Razif want us to work faster on Final Task because Our progress on Task 3 is a bit slow. 

REFLECTION

Experience

This project has greatly deepened my understanding of both UI/UX design and AR integration. I began by defining the design direction through a mood board, which established a playful yet modern visual identity for our AR-enhanced story app. Once the theme was finalized, I created sketches to visualize how the main functions—especially the “Scan Story Page” and interactive game—would work.

I developed the UI wireframes and high-fidelity prototype in Figma, with Jiexuan assisting me in refining certain layouts and components. She also helped test the interface within Unity to ensure that the design translated well into the development environment. Together, we made adjustments to improve usability and maintain visual consistency.

Transitioning from design to development in Unity was both exciting and challenging. My first attempt to integrate the Vuforia Engine failed due to image detection issues. After consulting ChatGPT for guidance, I switched to EasyAR, which proved more compatible. I handled the technical setup by creating an account, downloading the SDK, and coding the landing page and storybook selection UI.

Despite some successes, we encountered persistent camera detection issues in Unity. Our debugging efforts were unsuccessful, so we decided to continue tackling this challenge in the Final Task.

Observation
One key observation was that design clarity directly impacts user engagement, especially in children’s applications. The mood board, UI references, and design guide—featuring yellow and brown as the primary colors, clean fonts, and a structured layout—created a fun yet cohesive look. This consistency helped maintain our visual identity across the app, even during prototype development.

Another important insight was the limitations of AR engines like Vuforia when it comes to certain image targets. Despite following tutorials, detection issues persisted, highlighting the importance of matching the right engine to the project’s design and technical needs.

The coding process reinforced the value of modular design, as I reused UI structures between pages. However, technical problems such as camera errors reminded me that interdisciplinary projects demand both creative and troubleshooting skills.

Findings
The mood board played a central role in aligning the design intent with user expectations. It conveyed a playful, imaginative tone for children while remaining intuitive for parents and educators. We drew inspiration from existing AR interfaces and clean UI layouts to make the experience novel yet easy to navigate.

Our chosen fonts—Motiva Sans and Legacy Run Time—paired with a bright yellow and warm brown palette, balanced readability with personality. Font weight was used to establish hierarchy, making it easy to distinguish titles from body text, particularly on mobile.

Ultimately, the mood board and design guide served as anchors for both creative inspiration and technical direction, ensuring cohesion across sketches, prototypes, and Unity builds.