07.04.2023 - 07.07.2023 / Week 1 - Week 14Experiential Design /
Bachelor of Design (Hons) in Creative Media
Task 1 / Trending Experience - Lectures & Tutorial
Task 1 / Trending Experience - Lectures & Tutorial
LECTURES
#WEEK 1
Experiential Design Lecture #1: Introduction to Module
For this particular week, Mr. Razif, our module coordinator, had provided us with a module briefing on the subject outline and expectations. We received many examples of senior artwork that we used as resources and inspirations for coming up with design project ideas. In short, the "Experiential Design" module is a multi-disciplinary design approach that prioritises human-centric environments supportive of positive experiences and enhancing users' and visitors' well-being. For example, what we will be focusing on in this module is the user experience of an augmented reality (AR) application.
Continued after the module briefing and introduction, we are instructed to download Unity, a cross-platform game engine developed by Unity Technologies. Although the latest version that provided was 2022, we are recommended to download the 2021 version as the version is more stable and constructable compared to the latest version.
Fig 1.1 Unity Application (week 1/ 07.04.2023)
#WEEK 2
Experiential Design Tutorial #2: Intro to Unity & Vuforia
During this session, we were introduced to the engine, Unity Hub. After we had done the engine download, we had to go to [install > add modules] and install the required platforms. For Android phones, Android build support is required, whereas for iOS phones, iOS build support is required. After installing the "platforms", we can start creating a new project! Before we start, we need to sign in a Unity account.
Setting Up Unity & Vuforia
As the step was complicated and lots, I compiled a part of the tutorial notes under the PDF below :
Fig 2.1 Setting Up Unity & Vuforia Part #1 (week 3/ 14.04.2023)
The outcome of the 3D object on the marker card :
Fig 2.2 Outcome of 3D object on the marker card (week 3/ 14.04.2023)
And continued, in order to animate an object :
Fig 2.3 How to Animate 3D Object (week 3/ 14.04.2023)
we are required to [window > animation > animation]. Create an animation timeline and clip, and record the keyframe.
Fig 2.4 Outcome, Animation (week 3/ 14.04.2023)
To make the 3D object to be static at first then just having animation :
Fig 2.5 How to Make Object Static (week 3/ 14.04.2023)
Create a new clip and save > Go to [Window > animation > animator] > Set the desired animation Clip as default.
To connect the static and animation, we are required to create a button :
Fig 2.6 How to Create Button (week 3/ 14.04.2023)
Fig 2.7 Outcome, Move Button (week 3/ 14.04.2023)
In order to stop the animation, we need a "Stop Button". Repeat the step while creating the Move Button, but change the target object.
Fig 2.8 Button _ Move, Rotate & Stop (week 3/ 14.04.2023)
#WEEK 3
- No class. Public Holiday @ Hari Raya Aidilfitri -
#WEEK 4
Experiential Design Tutorial #4: Screen & Phone Build
For this particular tutorial, I was quite lost as I does not having my Xcode ready due to the facts that if I install Xcode, I need to upgrade my full MacOs. In the meanwhile, Mr. Razif suggested for those who required to upgrade, can hold on for him to figure on alternate method since upgrade might make our Mac become more slower (if old ver.). But, at last, Mr. Razif stated that "there are no alternatives instead from Xcode", so I was forced to upgrade my Mac which also took sometime for me to clean and backup my file.
The tutorial below are referenced to the additional playlists given by Mr. Razif (Exp Design - Mac OS Virtual Machine - export to iPhone/iPad) :
- File > Build Settings > Choose IOS
- Under Other Settings > Camera Usage Description > Type "AR Camera"
- Build Setting > Build > Create a folder "IOSbuild"
- Build & Run then check it in XCode
- Open the "IOSbuild" folder and run (make sure you plug cable with your phone)
Fig 3.1 Virtual Server, Outcome (week 5/ 07.06.2023)
#WEEK 5
Experiential Design Lecture #5: The Modern Design
#Important Notes :
1. Broad Field product & Services
They are fairly broad discipline which take into consideration a variety of different processes and goals to determine the outcome of a service, product, experience or solution. The broad field product & services included :
➜ Service Design (SD)
➜ Product Design (PD)
➜ Experience Design (XD)
➜ Human Centred Design (HCD)
2. "User" Discipline
Fig 4.2 "User" disciplines
These disciplines hone in on the specific users who engage in the experience(s), product(s) or service(S) created for them. The broad field product & services included :
➜ Brand Experience (BX)
➜ Customer Experience (CX)
➜ User Experience (UX)
➜ User Research (UR)
3. VCD & IA
➜ Visual Communication Design (VCD) : the realm of the graphic designer and visual artist. These are the pixel perfect artisans who beautifully create epic masterpieces for the platform, service offering or product.
➜ Information Architecture (IA) : less visual but beautiful in its own right. The ability to take information and make if flow in a cohesive and natural way is an art from within itself.
4. UI & IXD
Fig 4.3 User Interface and Interaction Design
➜ User Interface (UI)
➜ Interaction Design (IXD)
This brings in the user intent and emotional awareness when using the product or service. These disciplines focus on the standards of UI best practices and adheres to brand guidelines. It creates delightful experiences when users interact with the interface though smooth transitions, actions and animations.
5. User Mapping
User mapping is the process of understanding how users interact with products or services. It involves gaining insights into their behaviours, needs, and preferences to improve the user experience.
An empathy map is a valuable tool for capturing and visualizing what we know about a specific type of user. It helps create a shared understanding among team members and facilitates decision-making processes by externalising user knowledge.
On the other hand, a journey map is a diagram or visual representation that depicts the steps and experiences an individual goes through to achieve a particular goal. It is a helpful tool for identifying obstacles, inefficiencies, or pain points in the user's journey, particularly in relation to consumer purchasing decisions. By mapping out the user's journey, organizations can better understand and address user needs and optimize their products or services accordingly.
#Experiential Design In-Class Exercise: User Journey Map
For this exercise, our group formed a collaborative team consisting of Avril, Carmen, Jia Hsuan, Pei Yun, Ser Yeet, and myself. Our task was to create a user journey map for the experience of visiting a place using an augmented reality (AR) solution. We chose to focus on Starbucks at Syopz Mall, Taylor's Lakeside. In our user journey map, we included all the possible experiences from the moment the user arrives at the premises until they leave, taking into account both the positive aspects (gain points) and the areas that may cause difficulties or frustrations (pain points). Additionally, we explored potential solutions that the premise could implement to enhance the overall user experience. The full outcome was documented below :
Fig 4.4 User Journey Map _ Group (week 5/ 05.05.2023)
Fig 4.4 User Journey Map _ Group, Miro Board (week 5/ 05.05.2023)
#WEEK 6
Experiential Design Tutorial #6 : Sample model
*Unity-Chan! is the sample model that used in this particular lesson.
1. Download Unity-Chan! in Unity Assets Store [add to my assets > open unity > download > Import]
Fig 5.1 Prefabs (week 6 /12.05.2023)
2. Go to Unity-Chan! > Unity-Chan! Model > Prefabs [check Fig 5.1]
3. Drag the Unity-Chan to the "Hierarchy" // by checking the different model pose [go to animator]
4. Done!
Fig 5.2 Model Sample (week 6/ 12.05.2023)
Fig 5.3 Different Pose, Outcome (week 6/ 12.05.2023)
#WEEK 7
- Feedback session @ Project 2 : Experiential Design Proposal -
#WEEK 8
- No class. Independent Learning Week -
#WEEK 9
Experiential Design Tutorial #9: Creating Video Plan
How to put video in Unity?
1. Import a video
2. Create a Plan [Left Panel “+” > 3D Object > Plan]
3. Adjust the position [right panel]
4. Add component > Add a "Video Player" > Drag your video into the video clip
5. Play and Try.
Fig 6.1 Play and Try (week 9 /02.06.2023)
To avoid the Video playing at the background
6. Uncheck "Play On Awake" under Video Player
To make the Video Play
7. Create a button
[Left Panel “+” > UI > Button]
8. Change the text [Change the text Input to "play"]
9. Drag the "Plan" and change the "no function" to Play" [Video Player > Play() ]
To make the Video Pause
Duplicate the button layer and duplicate 7-9.
Fig 6.2 Play and Pause, Button (week 9 /02.06.2023)
Fig 6.3 Play and Pause, Outcome (week 9 /02.06.2023)
#WEEK 10
Experiential Design Tutorial #10: Ground Plane + Indicator
First, Export the Ground plane PDF [under packages > Vuforia Engine AR > Vuforia > Databases > For Print > Emulator > "The PDF File". The emulator ground plane is used to test whether it's going to work or not on a "ground" before you export to the phone.
Fig 7.1 Emulator Ground Plane "PDF" (week 10 /09.06.2023)
To active the Ground Plane :
Fig 7.2 How to Active Ground Plane (week 10 /09.06.2023)
under a new scene, add an AR camera [Right click > Vuforia Engine > AR camera], [Vuforia Engine > Ground Plane > Plane Finder], [Vuforia Engine > Ground Plane > Ground Plane Stage]. Then, drag the "Ground Plane Stage" into the Anchor Stage of the "Plane finder".
Fig 7.3 Outcome, Ground Plane Detected (week 10 /09.06.2023)
To To create a indicator to "scan" :
Fig 7.4 How to create Indicator (week 10 /09.06.2023)
Create a canvas & Image (drag the image to the "image source". For animation, create an animation clip and add keyframe to loop it.
Fig 7.5 How to make a "Alert Message" (week 10 /09.06.2023)
1. Create a image target Vuforia engine > image target] & 3D Object
2. Create a canvas, under the render mode, change the default to "world space"
3. Drag the AR camera to the "Event Camera"
4. Add some text/message by creating a panel [UI > Panel] and Text [UI >Text]
5. Using Script to navigate the active / disabled.
Fig 7.6 Outcome, #W10 (week 10 /09.06.2023)
#WEEK 11
Experiential Design Tutorial #11
For this particular tutorial, it seems to be very lagging and lost due to the fact we had poor internet connection on the day.
Continued from last week, this week we focused on making the indicator to fade out :
Fig 8.1 How to make fade indicator (week 11 /16.06.2023)
In order to make the indicator fade out, under animation, create 2 new animation clip, "canvas_fade" and "canvas_idle". Under "canvas_fade", add property, add the colour and adjust the "A" to Zero. To hide the fade out / stop loop after scan the target image, create a script and add "animation event" at the end of animation clip; change the "no function" to "hideMe" (the script property that you created).
Fig 8.2 Outcome, #W11 (week 11 /16.06.2023)
#WEEK 12
- Consultation Week -
#WEEK 13 - 14
- No class. Continued to the Project 2 & Final Project -
REFLECTION
Throughout my experience in experiential design, I have encountered several challenges that have made me feel unprepared and lost. In each session, there have been small issues that have had a significant impact on my overall progress and have left me feeling frustrated. For instance, during week 4, I realized that I hadn't installed Xcode on my device while most of the class was using Windows. This lack of preparation caused panic as I didn't know what to do, and it wasn't until the next session that we were informed that there was no alternative but to install Xcode. I had to spend days clearing my laptop, which meant I couldn't catch up with the previous tutorial. Additionally, there have been external issues in the class, such as poor internet connection and limited power plugs, which further restricted my overall experience and caused additional anxiety. As a beginner in Unity, I feel overwhelmed by the numerous programming languages and concepts that I struggle to understand even after explanations. It seems challenging for a designer to absorb programming knowledge in fragmented pieces without a cohesive understanding of programming styles and principles. However, I am grateful for the recorded lectures provided by Mr. Razif, as they serve as a helpful guide throughout the process.
Comments
Post a Comment