Experiential Design: Task 02

| 20.05.2025 - 27.05.2025 (WEEK 5-WEEK 6)
Tang Chin Ting [ 0366473 ]
| Experiential DesignBachelor of Design in Creative Media
| Experience Design Project Proposal

INSTRUCTIONS


LECTURES

Lectures & Exercises
Week 05:
In Week 5, we followed a tutorial provided by Mr. Razif on how to create a button in Unity to control video playback. We began by designing the button in the interface, then proceeded to script its functionality to play and stop the video. Below is the script we wrote for this task.
Figure 1.1 Script
Here is the showcasing video:
Figure 1.2 Week 05 Exercise Showcasing Video
To take it a step further, our lecturer instructed us to implement a button that would trigger a debug log displaying “KABOOOOM” after being clicked three times. This step was quite challenging, but with help from Mr. Razif and my friends, I managed to complete it. After adjusting the script, it worked as intended. Although the video isn’t very clear, you can still focus on the information below the screen, where it shows that I clicked the button three times and the “KABOOOOM” message appeared.
Figure 1.3 Script
Here is the showcasing video:
Figure 1.4 Week 05 Exercise Showcasing Video (2)
After completing these steps, our lecturer instructed us to download an animation that we would later import into the function. He recommended using assets from the Unity Asset Store, so I chose the same free version that Mr. Razif selected. Next, we imported the asset and set it to appear when the word “KABOOOOM” is triggered, adding a fun and engaging touch to the experience.
Figure 1.5 Unity Asset Store
Figure 1.6 Downloaded Animation Effect
Figure 1.7 Week 05 Showcasing Video (3)
Final Showcasing Video:
Figure 1.8 Final Week 05 Exercise Showcasing Video
Week 06:
Due to the traffic congestion caused by the ASEAN event, we had an online class this week. Mr. Razif also hosted a live stream on YouTube. I initially missed the beginning of the lecture, so I followed the entire session through the livestream for both the lecture and tutorial.

This week, Mr. Razif taught us how to create multiple buttons in Unity that allow navigation between scenes, similar to how we previously created navigation in Figma prototypes. We learned to achieve this using two methods: scripting and configuring the button directly in Unity’s interface.

Below is the script we used to enable button-based scene navigation. Using this approach, we can apply a consistent format for each button by simply changing the scene name, which is easier and more efficient than writing a separate script for each button. As shown in the second image, Unity’s [On Click] section allows us to assign functions to each button. We applied this to create a Menu Scene and a Credit Scene.
Figure 1.9 Script for Button
Figure 1.10 Created Different Button
We apply this function to each button and also create a Menu Scene and a Credit Scene.
Figure 1.11 Credits Scene Design
Figure 1.12 Menu Scene Design
After that, we created another button (refer to Figure X) with a toggle function: when clicked, an info panel appears; clicking it again hides the panel. This type of interactive button is very useful and will likely be included in our final project. Here is the script used for that function:
Figure 1.13 Button to Show The Info Panel
Figure 1.14 Script to Show The Info Panel
I did encounter an issue during this step. When setting up the "On Click" function for the button, I mistakenly unticked the field that linked it to the info panel. As a result, no matter how many times I clicked the button, the panel didn’t show up. I was confused and asked Mr. Razif for help. He clarified that if you want a button to make something appear, you must ensure the associated element is correctly assigned. If not, the button won’t trigger any visible change. On the other hand, if the goal is to hide something, then the assignment behaves differently, and unticking may be appropriate.
Figure 1.15 Function
Here is the final showcasing video:
Figure 1.16 Final Week 06 Exercise Showcasing Video

SUBMISSION

Task 02: Experience Design Project Proposal
For this task, we will build on the topic selected in Task 01 and develop a detailed proposal for our app idea. Specifically, we will:
  • Analyze the target users and their needs
  • Craft a clear problem statement
  • Define the project’s goals and objectives
We will also create a comprehensive user-flow chart to ensure the application delivers an interactive and engaging experience.

Requirements:
  • A document that explains their project idea and how the experience will be.
  • The proposal should contain an analysis of current experience, a comparison with similar solutions, and how it can be better.
  • Sketches to visualize the experience.
  • Mock design of how the final outcome should be from the user’s perspective.
Submission:
  • Blog post with reflective writing
  • Proposal document
  • Slides submission in PDF format
  • A video presentation
Final Idea:
AR Campus Companion

Problem Statement:
When new students navigate the large university campus often experience confusion and stress because they are in unfamiliar buildings or services. Traditional campus maps and signboards can be overwhelming or insufficient. Additionally, students may miss out on helpful tips or engaging experiences that could ease their transition and foster campus connections.

Concept:
An AR app that helps new students navigate campus by scanning key landmarks (e.g., library, cafeteria, classrooms) to get instant guides, facts, or helpful tips.

User Experience Flow:
1. User scans a building or QR marker near the location
2. AR will overlay shows the building name, information of the building (e.g., Cafeteria peak hours: 12–2PM, avoid for faster service.)
3. Navigation arrow to next spot (e.g., from library to E7.14 classroom)
4. Playful Feature: After scanning a location, users will see the yellow duck, a treasure, or a little monster appear. They can tap to collect them, and after collecting a certain amount, they can earn badges of varying levels.

Target Audience: Taylor's students, visitors and staff.

Building on this idea, Ming En and I decided to further develop the detailed information for our project. We referred to senior blog posts and realized that the first step is to finalize the problem statement and clearly define our objectives.

Our goal is to create an engaging and interactive experience for visitors and freshmen at Taylor’s University. The app will not only provide an augmented reality (AR) route guide but will also encourage users to actively explore the campus. This aims to prevent situations where students, having been on campus for one or two years, still struggle with navigation.

Based on our idea, we identified our primary target audience as freshmen and visitors at Taylor’s University, with staff members as our secondary audience. Moving forward, we will create three user personas and design a user journey map. This map will compare the current experience of exploring the campus without an AR route guide versus the enhanced experience with the AR guide.

Click HERE to view our Miro board.
Figure 2.1 Miro Board for User Journey Map
After gaining a clear understanding of the user journey, we outlined the key features to be included in our app. The core features are
  • AR Navigation Guide: to help users explore the campus interactively.
  • Gamified Exploration: As users begin a route, they can collect virtual "Happy Ducks" that appear along the path.
  • Reward System: As users collect ducks, they earn badges. 
  • Users can also save frequently visited locations. The save panel will appear the first time they arrive at a destination using the route.
The badge levels are:
  • Freshman (initial stage)
  • Campus Explorer (intermediate stage)
  • Taylor’s Pro (advanced stage)
The badges will appear on the user’s profile page, allowing them to track their progress and see how many ducks they’ve collected.

Finally, we decided to create the mock-up in Figma. We started by designing a route from Taylor's Library to the Grand Hall. To support this, we took photos of each scene along the path as we walked, which made it easier to build a more effective and realistic mock-up.
Figure 2.2 Designing a Prototype in Figma
Figure 2.3 Designing a Prototype in Figma (2)
Figure 2.4 Designing a Prototype in Figma (3)

Final Prototype in Figma:
Figure 2.5 Final Prototype in Figma

Final Proposal Document:
Figure 2.6 Final Proposal in Docs

Final Presentation Slide:
Figure 2.7 Final Presentation Slide

Final Presentation Video:
Figure 2.8 Final Presentation Video on YouTube

Google Drive Link: Click HERE

REFLECTION

During the Experiential Design module, I gained essential knowledge regarding the core principles of immersive interaction and user-experience design. The lectures each week and Unity exercises introduced me to foundational skills such as interactive buttons, scene change, video triggers, and toggle panels. These technical exercises, while challenging initially, caused me to realize that user experience can be defined through the interaction design process. With Mr. Razif's instruction and frequent hands-on practice, I became more confident working with Unity and applying C# script to enhance usability and interaction.

Our experience in developing Taylor's AR Campus Companion was an eye-opening experience in experiential design, beginning with a clearly set goal: to redefine campus wayfinding using augmented reality and gamification. The process was very iterative in nature, starting from simple user journey mapping, which allowed us to identify potential pain points and moments of delight possibilities. From spontaneous sketches, wherein we rapidly brainstormed core interactions, to accurate mockups for onboarding, homepage, profile, and AR route pages, we carefully iterated on the user interface and flow. It was the biggest challenge to integrate functional navigation with engaging AR aspects while maintaining an intuitive app and providing users with pleasant surprises.

Comments

Popular Posts