Experiential Design - Final Project: Completed Experience

6/7/2025 - 3/8/2025  / Week 10 - Week 15
Cindy Clarissa Leslie / 0367677
Experiential Design / Bachelor of Design (Hons) in Creative Media
Final Project: Completed Experience

LECTURES 


INSTRUCTIONS

 



Final Project: Completed Experience

Process of creating UI

Since I already did the AR functions of the app, I moved onto creating the UI elements. I first had the prototypes done and ready in Figma before exporting them and inserting them into Unity.

Figure 1,1 Screens created in Figma

I followed the colour scheme I have chosen, creating a consistent branding for the app. I created 2 screens, which is the main menu screen and the starting screen. The starting screen will be placed right before the players start the coral scene experience, which was mostly used to create a narrative and motivate them in knowing the importance of coral restoration. Furthermore, I created informational panels for the buttons in the main coral scene.

Figure 1.2 Inserting UI into Unity and making them functional

Next, I set the main menu UI as a new scene, placed in the beginning when the players first open the app. 

Figure 1.3 Main menu coding

I coded in a script using SceneManager.LoadScene and inserting the names of the existing scenes. Furthermore, to add in an ambience throughout the whole app, I inserted background music.


Troubleshooting Coral Scene

Next, I had problems with one of the interaction in the coral scene. Initially my script worked, where an informational panel slides down when users press onto a 3d model of one of the marine species. I then consulted my lecturer and got several feedback.

Figure 2.1 Revised coding after feedback

First, I had to find out which aspect is causing the problem, the animation itself or the 3d collider. To find out, I had to create a debug.log on the fish model that shows an indicator in the console when it is pressed. I found that the taps weren't getting recognized, therefore it was the model itself having problems.

When I consulted, it was suggested that on.mousetouch would potentially be the problem and that I should change it.

Figure 2.2 Playtest after revised script

After changing the script, I have fortunately successfully troubleshoot the function, where the informational panel slides down the panel when the 3d object was tapped on.


Final Task 3: Project MVP Prototype

Figure 3.1 Final video walkthrough

FEEDBACK

When troubleshooting, focus on one aspect first instead of doing everything all at once. Utilize debug logs to figure out which one is causing trouble. It is advised to not on mousetouchdown, it's possible it doesn't work with 3d models.

REFLECTION

In my experience, there were some things that went well and there were challenging parts. Thankfully, most of the scripts and coding part worked well however, it gets really frustrating when there's a problem that I was pretty clueless on fixing, especially after several trials of fixing. With the guide of my lecturer, I was fortunately able to do it and was able to receive valuable feedback, especially in scripting, I need to find out and be solid on which aspect is causing problems before trying to fix it rather than always relying on copilot.

Comments

Post a Comment

Popular posts from this blog

Application Design - Project 3: Lo-Fi App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Project 3: Lo-Fi App Design Prototype LECTURES Week 11: Lecture 11 Usability testing Evaluate a product or service with representative users The aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Create scenarios for the participants, observe how they use it and gain insights. (3 different scenarios for 3 different users) Create a low fidelity wireframe first (does not contain graphics nor colours, just the main idea of the whole layout) UI Kit Should include aspects of the design: typography colour palette iconography INSTRUCTIONS Project 3: Lo-Fi App Design Prototype UI Kit As stated in the lecture, the UI kit should be created first to predetermine the design's typography, colour palette and iconography in order to ensure that it stays as consistent as possible. The kit will then be used as a f...
Read more

Application Design - Final Project: High Fidelity App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Read more

Experiential Design - Task 1: Trending Experience

Image
22/4/2025 - 29/5/2024 / Week 1 - Week 4 Cindy Clarissa Leslie / 0367677 Experiential Design / Bachelor of Design (Hons) in Creative Media Task 1: Trending Experience LECTURES Week 1: Lecture 1 Figure 1.1 AR playlist of past works by seniors During the first week, the lecturer mostly took time in class for introduction and providing us a playlist for giving us an idea on how getting into the module would look like. Each videos had a unique theme and concepts that have been tackled, whether it was educational, enterntainment, etc, each of the projects have utilized AR design for a certain function. This week overall, provided me ideas and inspired me to start brainstorming on what I should create for my project. Week 2: Lecture 2 User Mapping Empathy Map Tool used to articulate what we know about a particular type of user to: create a shared understanding aid in decision making Consider: what the user would say, think, do and feel Journey Map Mapping a journey or experience (task flow). ...
Read more