Teoh Gim Khoon (0361563)
Bachelor of Design (Hons) in Creative Media
Task 1 - Trending Experience
INSTRUCTIONS
Lectures
Week 2
In an informative session, the lecturer thoroughly briefed us on the Module Information, delving into the intricacies of how tasks, assignments, and coursework would be structured and coordinated throughout the entirety of the semester. The detailed presentation offered valuable insights into what we can expect in terms of our academic responsibilities in the upcoming months.
Week 3
Our coursework revolved around a comprehensive examination of essential design terminologies critical for the creation of exceptional user experiences. This in-depth exploration provided us with valuable insights into the foundations of user-centric design practices.
UX - User experience
UI - User interface
UI - User interface
BX - Brand experience
XD - Experiential Design
IXD - Interaction Design
SD - Service Design
IA - Information Architecture
XD - Experiential Design
IXD - Interaction Design
SD - Service Design
IA - Information Architecture
CX - customer experience
Tutorial
Week 3
Miro Board (Airport Journey Map)
We were assigned to create a journey map for a particular location, which involved identifying the tasks to be performed there, as well as gain points and pain points. We proposed potential solutions by integrating an augmented reality (AR) mobile app. Our group of 5 worked collaboratively on this project, with the Airport service AR application being the focus of our user mapping project.
Week 4
This week, the lecturer presented a tutorial to teach us how to use Unity software for our initial task, which involved creating image targets, animations, and buttons. We were led through the process step by step.
Image Target
 |
| Fig. 1 License key and Add target manager |
Initially, we learned the process of obtaining a fundamental AR camera license key from the Vuforia website. Additionally, we were instructed on how to incorporate a target image into the database, emphasizing the importance of high quality and rating for the image.
Fig. 2 Image Target in Vuforia
Animation
Upon completing the creation of the image target, we delved into the process of animating the object that appears on the image target. This involved adding keyframes within the animation settings in Unity to facilitate the movement of the object.
 |
| Fig. 3 Object animation |
UI Button
As we progressed, we focused on implementing a play and stop button to manage the object animation. To achieve this, our first step involved creating a panel to serve as the mobile screen. Subsequently, we incorporated the button with functionality to control the animation. This was achieved by establishing a link through the onclick() setting.
 |
Fig. 4 Screen panel & Button Linking |
Fig. 5 Play/Stop Animation
Week 6
Build Setting
During this week, we delved into the intricacies of build settings in Vuforia, understanding the process of setup, selecting the appropriate platform, and integrating the necessary plugins. We also focused on configuring and connecting the right device for previewing the final outcome of the project.
 |
| Fig. 6 Device and Build Setting |
Week 7
UI Button, Hover Button, Link scene
In the current week's lessons, our focus was on designing UI buttons in Unity and incorporating a hover effect when the cursor is placed over them. To achieve this, we began by importing the button design into the asset file and subsequently dragging it under the button image source, thereby replacing the original button design.
Fig. 7 UI Element in Asset
For the hover effect, we modified the button transition to a sprite swap and linked the desired design for the hover state to the button's highlighted sprite. Now, the button exhibits a hover effect.
Fig. 8 Button Transition
In addition to the simple hover switch, we explored hover animation. This involved adding an Event Trigger component, selecting the pointer enter and exit event types, and then linking the animation under the event trigger. This enhanced the visual appeal by incorporating dynamic animations when hovering over the button.
Fig. 9 Event Trigger (Pointer Enter & Exit)
To complete the button functionality, we extended our learning to linking the button click to navigate to another scene. This required creating a C# script, adding it under the canvas inspector, and connecting the button's onclick event to trigger the scene transition.
 |
| Fig. 10 Script & On Click Link |
Week 9
Ground Plan & Zoom Effect
In the final tutorial week, our focus was on the ground plane features, allowing us to place objects on any desired ground plane. Initially, we incorporated the plane finder and ground plane stage into the Vuforia engine, attaching a cube as a placement object.
Fig. 11 Ground Plane with Object
Upon completing the AR ground plane features, we delved into learning the pinch and zoom effect. The lecturer guided us on utilizing ChatGPT to generate the C# script code, which we then imported into the plane finder to enable the zoom effect.
Fig. 12 Zoom C# Script
To prevent the duplication of objects during AR ground plane interactions, it was emphasized to untick the duplicate stage box. This step ensured a smooth and singular placement of objects when utilizing the AR ground plane features.
Fig. 13 Duplicate Stage
Reflection
This blog has been a great learning experience! I've learned all about designing things for users and using augmented reality (AR) to create amazing experiences. I used Unity software to make images, animations, and buttons that come to life in AR. I even worked on the journey map on an AR app for airports! By the end, I was able to use features like ground planes and pinch-and-zoom, which made the AR experience even more immersive. This blog has shown not only what I can do with technology, but also how design and technology can work together to create something truly special. I can't wait to use these skills in my future projects!
Comments
Post a Comment