Experiential Design: Task 4 Final Project

1/7/2023 

ALTAIFI, LEEN MAAN A (0367698)

Bachelor of Design (Hons) in Creative Media, Taylor's University

Experiential Design: Task 4 Final Project

---

Table of Content

1. Instructions & Tasks

        - Submissions

2. Reflections

---

1. Instructions & Tasks

Module Information Booklet

Task 4: Final Project

The objective of task 4 is to synthesize the knowledge gained in task 1, 2 and 3 for application in task 4. We must integrate visual assets and refine the prototype from task 3 into a complete working and functional product experience.

Children's Animal Sounds AR App Proposal

Exp. Design Task 2 Proposal by ALTAIFI, LEEN MAAN A

In my previous task, I tested the main features of the app, which are:

• Animal Image Recognition and AR Models corresponding to the scanned image.

• 3D Model Interaction by rotating and zoom in/out on the animal model, and tapping on it to make the animal sound.

• Information panels become accessible when the animal is scanned, includes text information and a play/pause button for text-to-speech.

• Background music that persists across scenes, toggle buttons for enabling/disabling it , and interactive sliders for controlling the volume.

• User guide and settings panels that are mutually exclusive (only one can be open at a time) to avoid overlapping.

• A quiz where the user listens to an animal sound and selects the correct animal from four options. The user receives feedback if the right or wrong animal is selected.

I am now required to complete the prototype, by doing the things I have not done, which include: 

1. Adding all the remaining animals’ 3d models, sound effects, and information panels.

2. Adding a ‘Start quiz’ page before jumping straight to the questions, and a End of Quiz page at the end that has buttons to retry the quiz and go back to home page.

3. Adding all the remaining questions in the quiz and sound effects of the animals.

4. Adding UI/UX enhancements such as automatically closing the information panel’s text-to- speech audio when the information panel is closed to prevent overlapping of audios if the user moves on to different animals.

Process Documentation:
1. Adding all 3d models, sound effects, and information panels.

I first start by adding the target images in the Vuforia database and import the package in unity. I have an image target for each animal in the animal book, which includes: bird, monkey, owl, snake, tiger, and caterpillar.

Fig.1.0: Adding Image Target Database in Vuforia

Then I import the remaining 3d models with their textures in unity and make them children of the image target, each animal with its own image target.

Fig.1.0: Importing 3D Models to Unity

Fig.1.0: All 3d Models Imported in Unity

To make the animal 3d models interactable, in the same way I did in the previous functional prototype task, I add the 'model interaction' and 'play sound on touch' scripts to each 3d model, and ensure that I add a box collider to each model so that the script would work.

Fig.1.0: ModelInteraction Script

Fig.1.0: PlaySoundOnTouch Script

I import all the information panels from illustrator to unity, converting them to 2d UI sprite so I can make the png image as the panel background.

Fig.1.0: Designing Animal Information Panels In Illustrator

Then, in each animal information panel, I attach the audio controller script, so that the text to speech audio is linked with the text in the information panel, as well as the pause and play buttons that control the audio. The pause/play buttons are composed of 2 png sprites that transition accordingly.

Fig.1.0: Snake information Panel

Fig.1.0: Owl information Panel

Fig.1.0: Tiger information Panel

Fig.1.0: Caterpillar information Panel

In order for unity to recognize the animal so that it shows the correct animal information panel when it is detected via the image target: first, I made an information manager script that creates a list of all the animals' names linked with the respective information panel. Then, I attached "AnimalIdentifier" and "AnimalImageTarget" scripts to each animal's image target, which again, uses the animal's name to link the animal with its information panel.

Fig.1.0: 'Information Manager' script containing 
Animal Panel List with Animal Names

Fig.1.0: 'AnimalImageTarget' and
'AnimalIdentifier' Scripts attached to the
Image Target

All of these panels are controlled via the information button in the AR Mode that only becomes active once an image target is detected, and it shows the animal panel of the detected animal. The info button is linked via the information manager script.

2. Adding 'Start' and 'End' Quiz Pages

I designed the pages on adobe illustrator first then imported them to unity. The page consists of a 'retry' button that allows the user to retake the quiz, and a 'back to home' button that takes the user backs to the home page.

Fig.1.0: Designing Pages in Adobe Illustrator

Unlike the question panels, which are all under the same unity scene but different panels, the start and end pages are separate scenes, because I felt like it was the simplest way to go about it. I just linked them all the same way every other scene was connected, via scene manager "SceneManager.gotoScene"

Fig.1.0: Adding Start Quiz Scene

Fig.1.0: Adding Quiz End Scene

3. Adding All Quiz Questions

I create a canvas and a panel for each question because each panel has a progress bar, so I thought it would be more efficient to create a new canvas for each question instead of reusing the same assets, and I changed the order of the animal options for each question so that it would not be repetitive. In the quiz manager script, I made a list for all the animal options (which are 5), and assign every question with its respective animal sound with the correct animal option.

Fig.1.0: Adding Quiz Questions 1

Fig.1.0: Adding Quiz Questions 2

And for every animal option button in every question, the 'AnimalOption' script is attached to them, so I can add all the different states for the button option which are each separate png sprites. The states are default (unanswered), green outline (answered correctly), and red outline (answered incorrectly).

Fig.1.0: Adding Quiz Questions 3

Fig.1.0: Animal Options Script

4. Adding UI/UX enhancements

To further enhance the user experience and prevent any overlap between the audios and information panels, I made it so that not only does the pause/play button control the text-to-speech information audio, but also the 'x' button that closes the panel. So when the panel is closed, the x button stops the audio playback, and resets the play button state.

Fig.1.0: Close Panel Audio Controller Script

Fig.1.0: Script attached to 'x' Button

Presentation Slides

Exp. Design Final Presentation by ALTAIFI, LEEN MAAN A

Submissions

Final App Presentation

Final App Walkthrough

Google drive link

---

2. Reflections

The process of working on this project was quite rocky, but I am finally glad to say I have completed it. From being completely lost during the beginning of this course, to finishing the goals I had for this project, I am proud to say I have learned a lot from this project and our lecturer, Mr. Razif. 

I tend to be harsh and critical on myself when I don't feel like I do the best I can in projects, or when I compare my work to others, but I think I can say that I tried my best working on this project. It was very challenging and I had to attempt so many times to find solutions to the problems I had, which almost made me give up, but I persisted. It was a tough learning curve, but definitely worth it. 

It was interesting to learn more about what unity is capable of, and despite looking very intimidating at first, I can get quite used to it. I'm looking forward to see what future projects could come out of this software and the skills I have learnt from it.