Experiential Design Task 3
21/4/2025 - 15/8/2025 / Week 1 - Week 14
Jie Xuan/ 0356515
Experiential Design/ Bachelor of Creative Media/Taylor's University
Experiential Design Task 3: Project MVP Prototype
TABLE OF CONTENTS
1. Instructions
2. Lecture
3. 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. Chai Wei Yi helped translate 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:
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 been deepened my understanding of both UI/UX design and AR integration. I started by defining the design direction through a mood board, which helped establish a playful yet modern visual identity for our AR-enhanced story app. After finalizing the theme, I created sketches to visualize how the main functions—especially the “Scan Story Page” and interactive game—would work.
Developing the UI wireframes and high-fidelity prototype alongside Chai Wei Yi was a collaborative effort. I translated initial ideas into sketches, while he helped turn them into detailed components within the design system. We both contributed to the layout and icons, refining each visual detail to improve usability on mobile.
Transitioning from design to development in Unity was both exciting and challenging. Although I initially attempted to integrate the Vuforia Engine, our image detection failed. I sought guidance from ChatGPT and shifted to EasyAR, which provided better compatibility. I handled the technical setup, created an account, downloaded the SDK, and coded the landing page and storybook selection UI.
Despite some successes, we encountered camera detection issues in Unity. Debugging efforts were not fruitful, so we agreed to continue this challenge in the Final Task.
Observation
One key observation is that design clarity directly influences user engagement, especially for children’s applications. Our mood board, UI references, and design guide (yellow and brown as primary colors, clean fonts, structured layout) created a fun yet coherent look. This consistency helped us maintain visual identity throughout the app, even during prototype development.
Another important finding was the limitations of AR engines like Vuforia when it comes to certain image targets. Despite following tutorials, we faced unresolved detection issues. This experience highlighted the importance of engine compatibility with design elements, prompting us to explore alternative platforms.
The coding process reinforced the value of modular design, as I reused structures and UI elements between pages. However, technical problems like camera errors also reminded me that interdisciplinary projects require troubleshooting skills beyond just design or coding.
Findings
Our mood board played a crucial role in aligning our design intent with user expectations. The visuals reflected a playful, imaginative tone suitable for children, while remaining intuitive for parents or educators who might assist them. We referenced existing AR interfaces and clean UI layouts to ensure the experience would be both novel and navigable.
The use of Motiva Sans and Legacy Run Time fonts—paired with a bright yellow and warm brown color scheme—created a balance between readability and personality. Font weight was used to indicate hierarchy, making it easy to distinguish titles from body text, especially on mobile.
The mood board and design guide ultimately became the anchor for both creative inspiration and technical direction, ensuring cohesion across sketches, prototypes, and Unity builds.
Comments
Post a Comment