Experiential Design - Final Task

Final Task

For our final task, we were required to complete our AR app and make it a functional, interactive application that can be used on a mobile phone. Building on the prototype we created earlier, I continued developing the remaining constellations using the same logic, while also enhancing the user experience by making the UI more immersive.

Completing All Constellations

Using the same logic I applied previously, I implemented the same approach for the other constellations. The difference is that I rearranged the placement of stars for each constellation, and each line connection has its own individual animation. After setting up the animations, I assigned them to the script of the main clickable star. I also linked the specific UI canvas needed for each constellation into the script.

Elements:

• "Constellation" Canvas - The constellation illustration that fade in after clicking and all-stars linked together.
• "Constellation" - Main star that appears on user's screen and clickable.
• "Constellation" 2-X (number) - The sequence of the stars appears after clicking the main clickable star.
• "Constellation" Line - The sequence of the line animation that links two stars together and form a complete constellation.

Example of Scorpio Constellation

Assigning Elements into Script

Meanwhile, for the story panel of each constellation, I also used the same logic but replaced the illustration for each constellation and reassigned the correct canvas, as well as the button that links to each constellation. For the reassigning of the story panel and the UI canvas, I was in charged with half of the constellation and set up the logic, meanwhile Angel will be helping up with the other 6 story panel constellations. 

Story Panel in World Space

UI Canvas in Screen Space

Landing Page

The landing page is very important for introducing the app and guiding the user to the next step. For the design of the landing page, I followed the layout I created in Figma. When users first open the app, they are introduced to "Stellara", followed by an option to choose between Camera Mode or Virtual Mode. After making a selection, a short and simple instruction appears to guide users to scan the ground and point their camera at the sky to look for glowing stars.

Figma Design

I started by adding a UI panel for the landing page, along with the heading and buttons. To make the landing page more interactive, rather than just a static screen, I applied a fade-in script to the UI elements. This creates a consistent animation style that matches the interactions used for the star constellations.

Elements under landing page

Fade in Script

To make the landing page even more interactive, I added a background video instead of a static image. I searched for a night sky video with stars that matched the aesthetic of our app and clearly conveyed to users that this is a stargazing app. I found a suitable portrait-format video from YouTube Shorts, it was short but high quality. To ensure the video loops seamlessly in the landing page background, I imported it into CapCut, a video editing software. There, I slowed the video down, reversed it, and attached the reversed clip to the end. This creates a smooth, continuous loop effect for the landing page.

Landing Page Background Video Edit

As for the instructions after entering the app, a message appears at the bottom of the screen to guide users to first scan the ground and then point their camera toward the sky. I created a script that ensures this instruction only appears after the landing page is closed, with a 5-second delay before it is displayed.

Fade in Instruction Script

Sound Effect

To make the interaction more immersive, I added sound effects for button clicks and background music throughout the app. I wanted the audio experience to feel calm and fantastical, so I searched YouTube for space-themed ambient music. After browsing a few options, I found and downloaded a track that suited the mood of the app perfectly. For the sound effects, I was inspired by the Piano Tiles game, which I felt matched well with the space ambient music. After looking at other stargazing and fantasy-themed apps, I noticed that sounds with a bit of echo or a hollow feel added a dreamy effect. So, I used similar sounds in my app. I also added slight variations for different buttons to give users clear feedback and make the experience feel more magical and interactive.

• Space Ambient Music: Youtube Link
• Button Sound Effect: Piano key from Capcut

I also prepared the narrative voice for the animation using ElevenLabs. I spent time searching for the most suitable voice, one with a soft and calm tone, but also with enough variation to sound natural and engaging. After generating the voiceovers, I uploaded all the files to Google Drive and shared them with Angel so she could add the sound effects.

Narrative Voice

Skybox

For the skybox, I tried many methods at first—like changing the environment settings, setting the camera to Skybox mode, importing a sphere from Blender, and using a cubemap. But none of them worked properly because the skybox didn’t rotate with the camera, even though it was visible. Later, I followed the tutorial video shared by Mr. Razif, and it finally worked. Instead of using a ready-made skybox or cubemap, I had to use an image with an inside-out shader and apply it as a material to a sphere. It was hard to find a suitable image, since it needed to wrap around the sphere smoothly. Most images I found were either low quality or didn’t connect properly at the edges. 

Working Skybox but Low Quality

I looked for more skyboxes online, but most of the raw images I found were either very blurry or had visible seams where the edges didn’t connect properly, which made the boundaries obvious. And even when we did manage to find a decent one, the image would sometimes lose its detail and turn into a plain color when transferred to the phone, which was quite disappointing.

However, that didn’t stop us from looking for alternative solutions. Since the skyboxes available online were mostly low quality, we decided to create one ourselves. I used Canva to design a gradient night sky and added small circles to represent stars. I also made the canvas as large as possible 5000px by 3000px to ensure the image quality remained high and clear.

Create skybox using Canva

Transferring

Since we needed to combine our files, we were quite worried that constant file transfers might cause crashes. So, we divided the tasks carefully. I was in charge of the base setup, including the world space and screen space elements. Meanwhile, Angel helped by providing some illustration assets and testing the star log logic on her side. Once I completed the setup and confirmed that all the logic was working, I exported the Unity package and passed it to Angel so she could continue her part. During this stage, I supported her by preparing the required illustrations and sound effects. If any changes were needed on my side, I would work directly on Angel’s laptop to avoid the risk of file corruption from repeated transfers.

Build and Run

This part almost gave us a heart attack. Since we didn’t have an Android phone to test on, our only option was to borrow Mr. Razif’s phone. However, we had to share it with other groups as well, so our time for testing was very limited.

At first, everything worked smoothly during testing, no big issues at all. We only got the phone back one day before the submission deadline to build and run the final version of our app. But somehow, right before submission day, we suddenly encountered a major issue: the star placement, animations, and some UI panels were all messed up. We considered many possible causes for the problem, but with the time was draining, we knew our priority wasn’t to figure out why it happened, but to focus on fixing it. And the biggest challenge, the final Unity file was on Angel’s laptop, and she had already returned to her hometown in Johor and we have no way to solve together using the same laptop. To make things worse, the part that broke was my part. The only solution was to remotely access Angel’s laptop to debug and fix everything, and it took a lot of time as remote controlling others device was not smooth in control, and moreover we were using Unity, so it was pretty laggy when I was trying to fix it. (I still consider it a bug, because we swear everything was working perfectly before the final export!). After a few hours of stress, sacrificing our sleep we finally managed to fix the issue. It was exhausting, but we were so relieved that we pulled through and submitted everything on time.

Me fixing the problem on Angel's laptop using Team Viewer

Final Submission

Google Drive: Link 

Final Presentation

Walkthrough Video

Reflection

Building an app with two people is not an easy task, especially when it involves linking two Unity projects. It’s a complicated process and carries the risk of file corruption or crashes. In our case, my groupmate Angel experienced this firsthand, when she imported my Unity package into her project, all of her previous work disappeared and there was no way to recover it. Fortunately, she had been tracking her progress using ChatGPT, which allowed her to roughly recover the scripts she had written.

Right before the submission, we also faced another issue where the star placements and animations were completely messed up. Luckily, I managed to find the fastest way to resolve the problem. Although we encountered many challenges, we were able to overcome them by working together. This is the benefit of having a team, we were able to solve problems collaboratively and support each other during difficult moments.

I also feel a strong sense of satisfaction because we successfully created the AR app we envisioned, a stargazing app that feels aesthetic, interactive, peaceful, and filled with wonder. At first, we thought it would be difficult to achieve, but we did our best and made it work. This wouldn’t have been possible without the guidance of our lecturer, online resources, and our persistence throughout the process.

This assignment not only taught me technical skills but also gave me the confidence and motivation to explore more in AR app development. It was a very meaningful experience, just like the Game Development module because we weren’t just imagining ideas, but actually building a real, functional app from scratch. Turning our concept into something that works in the real world felt incredibly rewarding.