Experiential Design - Final Project: Completed Experience
01.07.2024 - 02.08.2024 / Week 10 - Week 14
Lim Rui Ying / 0358986Experiential Design / Bachelor of Design (Hons) in 3 Creative Media
Final Project: Completed Experience
INSTRUCTIONS
FINAL PROJECT: Completed Experience
Continuing the previous task, we are to refine the prototype into a complete
working and functional AR app in the final project.
Process
After reviewing my prototype, I successfully implemented the cat pattern for
spawning the AR hint and virtual cat. However, the block assembly process is
still incomplete. Due to time constraints, I opted to remove confirmation
messages and made the block assembly process to be self-guided. I also added
three more animals, including dog, rabbit, and chicken, so there are four in
total. Additionally, I included a mini quiz in the app based on
recommendations from my friends.
1) AR Hint
I first created the AR hint for each animal, starting with the cat
pattern, which was completed in the previous prototype, followed by the
dog, rabbit and chicken. These pattern blocks are assembled based on
existing designs I found online. The AR hints guide users in assembling
their desired pattern during the block assembly process.
|
| Fig. 1.1 Cat pattern |
|
| Fig. 1.2 Dog pattern |
|
| Fig. 1.3 Rabbit pattern |
|
|
Fig. 1.4 Chicken pattern |
2) Virtual Animals
To spawn the virtual animals, I prepared the remaining blocks needed for the
animal patterns above.
|
| Fig. 2.1 Blocks created |
Next, I assembled the blocks to form each animal pattern and converted them
into image targets. The dog and chicken patterns required several attempts, as
they were more challenging to detect and trigger the virtual animals to spawn.
|
| Fig. 2.2 Targets created |
Moving on, I attached each 3D animal model to the corresponding image target
by placing them on top of the image targets.
|
| Fig. 2.3 3D cat model |
|
| Fig. 2.4 3D dog model |
|
| Fig. 2.5 3D rabbit model |
|
|
Fig. 2.6 3D chicken model |
3) Scenes
I have 17 scenes in total:
- 3 scenes for start screen, menus and animal selection
- 8 scenes for the animal patterns
- 6 scenes for the mini quiz
|
| Fig. 3.1 All scenes |
Besides, I created scan guides for the app, which include instructions for
scanning a flat surface and scanning the completed pattern blocks. I added
boolean events to the guide canvases, making them inactive once a flat
surface or the target is detected.
|
| Fig. 3.2 Scan guide for flat surface |
|
| Fig. 3.3 Scan guide for pattern blocks |
|
| Fig. 3.4 Setting up boolean events to the guide canvases |
4) Scripts
I created 3 scripts for my project:
- AudioManager: Manages background music, ensuring it plays continuously across scene changes
- MySceneManager: Handles scene loading
- QuizManager: Manages the quiz's score system
|
| Fig. 4.1 Scripts |
|
| Fig. 4.2 Scripts for QuizManager |
5) Build and Export to Mobile Phone
Ensuring all things were done for the app, I built and ran the project and
successfully generated the app files. Then, I exported the app to my phone
using XCode.
|
| Fig. 5.1 Successfully built the app files from Unity |
|
| Fig. 5.2 Export to phone using XCode |
6) App Flow
Start Screen, Home Screen, Animal Pattern Selection
Animal Blocks AR begins with the Start screen and next to the Home
screen. The Home screen includes two buttons: Animals and Mini Quiz,
which navigates users to the Animal pattern selection screen and
questions of the mini quiz respectively.
|
| Fig. 6.1 Start screen, Home screen and Animal pattern selection screen |
AR Hint
After selecting the desired animal pattern to assemble, the app
navigates users to the corresponding animal to place the AR hint. A scan
guide appears and asks users to scan around and find a flat surface for
placing the AR hint.
|
| Fig. 6.2 Scan guide and Place AR hint |
Block Assembly Process
After successfully placing the AR hint, users can follow the AR hint to
assemble the blocks. Users can tap on the "complete" button at the
bottom right corner to spawn the virtual animal when completing
assembling the blocks.
|
| Fig. 6.3 Block assembly and scanning of the completed pattern |
Spawning of Virtual Animal
Upon successfully spawning the virtual animal, users can learn about the
animal's lifespan, diet, and behaviours by tapping the info button. They
can also hear the animal's sound by tapping the sound icon at the
bottom, which triggers a speech bubble displaying the sound's text.
Besides, home and back buttons are provided at the bottom for easy
navigation.
|
| Fig. 6.4 Animal description and animal sound |
Mini Quiz
Lastly, users can take the mini quiz that incorporates 5 simple
questions to test their learning. After completing all the questions,
a total score will be calculated. Users have the option to retake the
quiz or return back to home.
|
| Fig. 6.5 Mini quiz: Q1-Q3 |
|
| Fig. 6.6 Mini quiz: Q4-Q5 and Total Score |
Final Submission
Google Drive Link
Final Experience Design Project Document
https://docs.google.com/document/d/1iBS4fDL3GSEamfKVfOEWh-KXNRiZyfQyBP-z_-QGK5U/edit?usp=sharing
Final Experience Design Project Document
Presentation Video
Presentation Video - Final Project: Completed Experience
App Walkthrough Video
App Walkthrough Video - Final Project: Completed Experience
REFLECTION
Throughout the design process of the app, I realised there are still many areas for improvement, including navigation, transitions, animations and sound effects that can create a more engaging experience for users. Especially when comes to the detection of the completed pattern, it may be difficult to detect due to the differences in the angles and lightning between the physical blocks and the image target. Although my app is relatively simple and does not require complex coding, it is still functional and provides an engaging learning experience for kids. I am pleased with how it turned out, especially since I wasn’t sure this idea could be executed. I appreciate Mr Razif's encouragement to give it a try, and I'm happy with the results. Also, thanks to my friends who gave suggestions to me and tested my app.
App testing
Comments
Post a Comment