Experiential Design Task 1: Trending Experience
Experiential Design Task 1: Trending Experience
Zhang Wan Ru / 0368214
21/04/2025—18/05/2025 (Week 1-Week 4)
Experiential Design/Bachelor of Design in Creative Media/Taylors University
Lecture
Week 1:
In the first week, the teacher introduced us to MIB and the projects we needed
to do this semester. The teacher also showed us the homework done by our
seniors. Then we started to introduce ourselves so that we could understand
more.
Week 2:
In Week 2, Mr. Razif explained what user mapping journey maps and empathy maps
are. When we travel, we will encounter various advantages and disadvantages.
We also need to have solutions at the same time.
User mapping journey visually outlines the process a user follows to achieve a
goal, highlighting their actions, thoughts, and emotions at each touchpoint.
Fig. 1.1
Says: quadrant contains what the user says out loud in an interview or some other
usability study.
Think: Quadrant captures what the user is thinking throughout the experience.
Does the quadrant enclose the actions the user takes?
Feels: Quadrant is the user’s emotional state.
Fig. 1.2
Then we started to make a travel mind map in class. We chose the process of
taking the school bus from school to Sunway Pyramid, analyzed the pros and
cons in between, and how we can use AR to save it.
But when we first made the flowchart, we only analyzed the benefits and disadvantages but did not analyze the AR solution. After our presentation, Mr. Razif told us that we needed to add the AR solution. So we added it right after the presentation.
The link 🔗：https://miro.com/app/board/uXjVI9Q4Pno=/
Fig. 1.3
Week 3:
Question:
Imagine the scenario in one place; what would the AR experience be, and what
extended visualization can be useful? What do you want the user to feel ?
We chose the gym because we felt that there were many instruments in the gym
that we were unfamiliar with and did not know how to use. In addition, the
gym in the apartment did not have coaches or diagrams to teach us how to use
the equipment correctly and to ensure that we could exercise without
damaging our muscles and bones.
Then, we had a group activity where we needed to design a UI interface for AR glasses and present its features and possible use scenarios.
This class made me feel that AR can help us use things we don’t know how to use in our lives. Because it makes me feel that AR can make users “immerse themselves in it” and it is easier to remember the experience and emotions than flat pictures and texts.
After the class, Razif took us to experience AR on Google and explore various animals. After that, we learned how to connect Vuforia to Unity. During the activity, we also followed Razif sir’s step-by-step instructions, which gave me some useful technical guidance on how to start my project.
For further revision on connect Vuforia with Unity.
Fig. 1.4
Week 4: Watch Mr. Razif's recorded class capture for the week 4 tutorial.
How to add UI controls (buttons) to display in Unity
1. Set up the UI Canvas
Open Unity and set the game view resolution appropriate for your device (e.g., Portrait 9x16).
Create the Canvas:
In the Hierarchy, right-click → UI → Canvas.
Unity will add the Canvas and Event System objects.
Note: There must be only one Event System in the scene for the UI buttons to work properly. If an event system is missing, add it by right-clicking UI → Event System.
Configure the Canvas Rendering Mode:
Choose between Overlay (UI always on top), Screen Space - Camera (UI attached to the camera), or World Space (3D UI in the scene).
For typical mobile apps, use Overlay.
For AR or VR immersive UI elements, use World Space.
Set the UI Scaling Mode:
Change from Constant Pixel Size to Scale with Screen Size for responsive UI.
Set the reference resolution based on the target device resolution (e.g., 1920x1080 for HD).
Switch to 2D view for Flat UI view (to see the canvas properly).
2. Add button using TextMeshPro
Right-click Canvas → UI → Button - TextMeshPro.
If TextMeshPro is not imported, import TMP Basic Assets and Examples.
Use Rect Transform to adjust the size, position, and shape of the button as needed.
Rename the buttons logically, e.g. btnShow.
Change the label text (subtext) of the buttons to "HIDE" and "SHOW."
Optionally adjust the font and transparency (alpha channel in the button color) for better UI visibility.
3. Assign the button to the control object
Select the button → scroll to the OnClick() event in the inspector.
Click + to add a new event.
Drag the target game object (e.g., cube) into the object field.
Select the function.
Show/Hide: GameObject → SetActive(bool) Checked bool (true) for show, unchecked (false) for hide.
Repeat this for each object you want to control (e.g., add multiple objects like a cube and sphere by adding additional OnClick event entries).
4. Test the Show/Hide Functionality
Enter Play mode and test clicking the Show and Hide buttons.
Verify that the object becomes visible or hidden accordingly.
5. Animate Objects and Control Animation with Buttons
Select the object you want to animate (e.g., a cube).
Open the Animation window (Window → Animation → Animation).
Create an Animator and an Animation Clip (e.g., "cube_bounce").
Use the timeline and keyframes to animate properties like the position of the bounce effect.
Adjust the animation speed by varying the timeline length.
Control the animation with buttons:
Don't use SetActive, but use the Animator component.
In the OnClick event, assign the Animator and toggle its enabled state to start/stop the animation.
The animation stops or resumes based on the enabling/disabling of the Animator component.
6. Toggle buttons to start/stop animations
Sometimes a button needs to be toggled to start and stop.
Create two buttons: btnStart and btnStop.
First, set btnStart inactive and btnStop active.
When a button is clicked, toggle the visibility of the button (hide the current button and show the other button).
Use the OnClick event to not only control the Animator but also toggle the button visibility (GameObject.SetActive(true/false)).
Stack or overlap the two buttons to simulate a single toggle button.
Task
Ideas:
1. "AR Trendy Blind Box Pet Cultivation"
2. "Tree Hole Hearing"—AR Message Book in Nature
3. "AR Paper Messenger"Open an AR letter from the past
The Inspiration:
Fig. 2.1 ideas Word
Reflection
Experience:
Once I was traveling and used the AR walking navigation function of Google Maps. It recognizes the street environment through the phone lens and then superimposes direction arrows, street names, and guide icons on the screen in real time, allowing me to see "where to go" in the real world. Compared with traditional flat maps, I think this function is much more intuitive and less likely to get lost.
This AR navigation experience makes me feel very practical, especially in unfamiliar cities or complex streets. What impressed me most is that it turns the originally abstract information into visual cues in reality, greatly reducing the cognitive burden of "looking at the map."
This made me realize that AR is not just for "showing off" or entertainment; it can also enhance our real judgment at critical moments. This way of "real scene superimposing information" inspired me to think about how to make information more intuitive and closer to the user's current sensory experience when doing AR projects in the future.
Observations:
The interface is clean and concise
The AR information on the screen will not be overwhelming, and only the necessary guidance arrows and landmark names will be displayed, which will not affect the user's observation of the real road conditions and avoid information overload.
Enhanced sense of space and direction
AR navigation uses actual buildings as reference points and directly superimposes landmarks on them, making it easier for me to identify the direction. Compared with ordinary maps that require repeated rotation of the phone to confirm the direction, AR provides a stronger spatial perception experience.
The "enhancement" of augmented reality is not a show of skill, but practicality
Although technology is the core, the design of this function pursues "making reality clearer and easier to use" rather than using AR effects to create fancy visual impact. This point has inspired me a lot: in the future, when doing AR projects, it is not necessary to do complex 3D effects. The truly valuable enhancement is to help users understand reality and complete tasks.
Stability and startup speed are critical
I also observed that when the network is not good or the light is insufficient, AR navigation will have problems with recognition delays or loading jams. This reminds me: no matter how creative the AR design is, it must also consider the technical limitations and user patience in the actual use environment.
Findings:
Whether it is a letter unfolded through AR, a conversation between a virtual character, or a story segment that "emerges" in reality, it can give users a sense of "personal experience." This immersive design is more touching than traditional text or pictures. In Mr. Razif's teaching, we started with basic image recognition and Unity scene building. He took us step by step to understand how Vuforia works and introduced many practical cases. This made me change from a "viewer" to a "creator," realizing that even beginners can use simple tools to create interesting, warm, and meaningful AR content. I used to think that AR works must be very beautiful and 3D modeling must be exquisite to be successful. But now I understand that sometimes a static picture plus a voice guide and a character animation can arouse the resonance of users. "Simple but warm" is easier to remember. I began to think, what if a letter can be animated? What if a tree hole can express troubles? What if a trendy toy model hides its virtual personality? These ideas give me more imagination for creation, and I am more looking forward to my own AR project to bring emotional connection.
Comments
Post a Comment