Experiential Design / Task 4: Final Project

on
14.07.2025 - 28.08.2025 (Week 12- Week 14)
Gunn Joey / 0366122
Experiential Design / Bachelor of Design (Hons) in Creative Media
Task 4: Final Project

TABLE OF CONTENTS

1. Module Information Booklet
2. Task 3
3. Feedback 
4. Reflection

MODULE INFORMATION BOOKLET


TASK 3

Timeframe: Week 12 – Week 14
Deadline: Week 14

Description

A. Final Project: Completed Experience (30%)
Students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product
experience.

B. E-Portfolio (10%)
Students describe and reflect on their social competencies within the design studio context, supported by evidence. Reflect on how to empathize with others within group settings, interact positively within a
team and foster stable and harmonious relationships for productive teamwork. The reflective writing is part of the TGCP.

Requirements
  • Project file and Folders
  • Application installation files (APK for android, iOS Build Folder for IOS/iPhones)
  • Submission: Online posts in your E-portfolio as your reflective studies
  • Video walkthrough (Presentation)
A. Progress

1. Avatar Design

At the beginning of this task, we focused on improving the prototype we developed in Task 3. One of the key enhancements was the creation of a finalized avatar. This avatar was designed to represent me, Gunn Joey, and is also featured on the business card. By using the same character across both the digital application and the AR experience, we ensured a consistent and recognizable visual identity. This approach helped unify the different elements of the project, giving it a cohesive and professional feel.

For the avatar’s design, we chose to follow the visual style commonly seen in iOS avatars. This style is known for its clean appearance, modern feel, and user-friendly aesthetic. Our goal was to create an avatar that not only looked polished but also aligned with the overall futuristic theme of our app. This design decision helped reinforce the tech-focused concept we envisioned and ensured that every part of the user experience, from interface to AR interaction, felt connected and visually appealing. By maintaining this level of consistency, we were able to deliver an experience that looked and felt well thought out from start to finish.

Fig - Joey pic

Fig - Joey's Avatar

2. Art Exhibition Scene

After discussing our project with the lecturer, we decided to explore the idea of adding a virtual art gallery as an extra interactive feature. We wanted to expand on our original concept and give users a more immersive experience through augmented reality. To bring this idea to life, we used AR Foundation, aiming to include plane detection, object placement, and easy gallery navigation.

As we worked on this feature, we followed several tutorials and guides to understand the technical steps involved. However, despite trying different approaches, we ran into persistent problems during testing. The gallery either failed to load or didn’t function properly, and no matter how many fixes we tried, we couldn’t get it to work consistently.

With time running short and the technical issues still unresolved, we decided to remove the virtual gallery from the final version of the app. Instead of letting this setback affect the overall quality of the project, we shifted our focus to improving other parts of the app. We spent time refining the animation flow, making the avatar interactions smoother, and polishing the overall design of the interface. These improvements helped ensure that the final product still felt engaging, interactive, and well put together, even without the gallery feature.

Fig - Art Exhibition Progress 1

Fig - Art Exhibition Progress 2

3. Logo Page

On the logo page, we introduced an animation that brings both the logo and its name onto the screen from opposite sides. The logo moves in from the left while the name enters from the right, creating a visually appealing and balanced effect. To make sure this animation has time to play out properly, we added a slight delay before the app moves to the next scene. This delay was handled through code, allowing for a smoother transition without cutting the animation short.

Even with this setup, the shift to the landing scene felt too sudden and interrupted the flow. To improve the transition, we added a black screen fade effect at the end of the logo animation. This fade in and out acted as a visual buffer between scenes, making the overall experience feel more seamless and polished. To complete the introductory sequence, we also added a sound effect that plays when the logo appears. This audio touch added a sense of quality and refinement, helping to set the tone for the rest of the app and giving users a more engaging first impression.

Fig - Logo Page (Unity & Code)

Fig - VS Code

4. Landing Scene

When working on the landing scene, we decided to remove the earlier hand-drawn avatar and introduce a completely redesigned version. This update was essential to match the improved visual direction of the final app. The previous avatar, while functional during earlier stages, no longer fit with the polished and cohesive style we wanted to achieve, so it was replaced to ensure visual consistency throughout the experience.

To make the landing scene more engaging and user-friendly, we added a small interactive detail. The new avatar performs a playful gesture by pointing downward toward the "Start" button, gently guiding the user’s attention and encouraging them to continue. This animated interaction not only added charm but also served a practical purpose, helping users navigate the interface more naturally. It brought a sense of character and friendliness to the app’s first impression, making the entry point both inviting and easy to understand.

Fig - Landing Scene Unity & Code

Fig - Button On Click Settings

5. Home Scene

In the home scene, we made sure to update the avatar as well, replacing the original version with the redesigned one to maintain a consistent visual style throughout the app. Since our goal was to create a unified and polished look, it was important that every scene reflected the same level of quality and design coherence.

Unlike the landing scene, where the avatar includes interactive animation, the home scene features the avatar as a static image. It is positioned on the screen as part of the overall interface layout, serving a purely visual role without any movement or animation. This simpler approach was chosen to keep the focus on functionality while still ensuring that the updated avatar remained a consistent element across the user experience.

Fig - Home Scene Unity

6. Normal Mode

In normal mode, once the user scans the image target, a set of interactive content appears on screen, including an introductory video. To make the presentation more engaging, we added an animation where the content slides smoothly out from a card-style layout. This movement adds fluidity and draws the user's attention in a natural, visually appealing way.

The video plays in a continuous loop, allowing users to watch it at any time without needing to restart it manually. This ensures the video is always available, creating a seamless and user-friendly experience that encourages exploration and repeated viewing. The combination of animation and looping video helps maintain a dynamic and polished interface.

Fig - Video Clip & Animation

Fig - Objects Animation

7. AR Mode

To maintain visual consistency with the final design of the app, we replaced the original avatar in the AR Mode scene with the updated character. After the Image Target is scanned, the new avatar appears on screen and greets the user with a wave. This animated gesture introduces an interactive and inviting element to the experience.

We also enhanced the presentation of the feature buttons. Rather than displaying them immediately, we applied an animation that causes the buttons to float gently into place following the avatar’s appearance. This approach added movement and energy to the interface, making the AR scene feel more dynamic and visually engaging. These refinements were made to create a smoother and more enjoyable interaction for the user.

Fig - Avatar Onclick Settings

Fig - Button Animation Settings

Fig - Button On Click Settings

8. Learn About Me Scene

Within the Learn About Me scene, we made sure to update the avatar to match the final character design used throughout the app. This change helped maintain a cohesive visual identity and ensured that every part of the user experience felt consistent and well-integrated. In this scene, the avatar plays a more active role by delivering a short self-introduction. It speaks in alignment with a prewritten dialogue script, giving users a chance to learn more about the character in a direct and engaging way. This interaction goes beyond simple visuals, adding both personality and expression to the scene.

By allowing the avatar to speak, we aimed to create a more personal and relatable experience for the user. The scene takes on a conversational tone, making the interaction feel less like a presentation and more like a brief, friendly exchange. This approach helps strengthen the connection between the user and the character, making the app feel more interactive, character-driven, and thoughtfully designed.

Fig - Avatar Settings

9. Ask Me Anything Scene

In the Ask Me Anything scene, we continued to use the updated avatar to ensure visual consistency throughout the app. To make this scene more interactive, we developed a question-and-answer feature that responds to user input. When a user clicks on a question, the avatar appears on screen and delivers a corresponding line of dialogue.

Each question is linked to a unique voice line from the avatar, allowing for a variety of responses based on the user's choices. This setup adds a sense of responsiveness and variety, making the interaction feel more engaging and dynamic. By combining visual and audio feedback, we aimed to create a more immersive and conversational experience, encouraging users to explore different questions and enjoy the personalized responses from the avatar.

Fig - Button Animation Settings

Fig - Button Animation Settings

Fig - Button OnClick Settings & Audio Source

Fig - VS Code

Fig - Video Player Settings

10. Button Sound Effects

To enhance the interactive experience, we introduced two distinct button sound effects. These audio cues were added to accompany user actions, with each button click triggering a specific sound. By incorporating sound into the interface, we aimed to make interactions feel more responsive and lively. The addition of sound effects not only enriched the overall user engagement but also contributed to a more polished and dynamic experience.

Fig - BTN Sound Effects

Fig - Send Message Sound Effects (Ask Me Anything)

11. Scene Control

Each button also serves a functional purpose by controlling scene navigation within the app. When a user clicks a button, it triggers a transition to a designated page or scene. This allows for smooth and intuitive movement through the app’s different sections, ensuring that navigation feels seamless and user-friendly.

Fig - VS Code - Scene Control (Button)

B. Final Submission

Click here to view Google Drive Link.



Presentation Video:


FEEDBACK

Mr. Razif recommended adding a virtual art exhibition to enhance the AR experience and offer users more creative content to explore. He also emphasized that the avatar should be more interactive, encouraging us to develop features that allow it to respond to user input. His feedback guided us to think beyond basic functionality and focus on creating a more engaging, dynamic, and immersive experience for users.

REFLECTION

This project was a hands-on learning experience that helped us develop practical skills in AR, animation and interface design. As a team, we worked through each stage of development, from early planning to final adjustments. There were challenges along the way, especially when it came to technical issues, but we managed to adapt and stay focused on delivering a working app. Despite time limitations, we were able to improve key features and make the experience feel complete. The process gave us a clearer understanding of how to manage tasks, solve problems, and work effectively as a team.

While building the app, we noticed how much small details can affect the overall experience. Simple things like how buttons appear, how animations flow, or how sound is used can make the app feel more polished and enjoyable. We also saw that AR technology requires careful planning and testing. Features like object tracking or scene transitions often needed fine-tuning to work smoothly. It became clear that a good user experience depends not only on creative ideas but also on how well everything works together.

One of the most important lessons we learned was to focus on what is achievable within the given time and tools. While we started with many ideas, we had to decide which ones would make the biggest difference for the user. Adding personal touches, such as avatar interactions and sound effects, helped make the app feel more engaging. We also found that testing often revealed problems we hadn’t expected, which helped us improve the final product. In the end, the project showed us the value of clear design, careful testing, and being flexible when things don’t go as planned.

Comments

Post a Comment