Once i have completed the prototype, i consulted with Mr Razif on what can i do to make the final product, since what i have done in my prototype is mostly just the back end stuff, making sure that all of the feature i intended to have in the application is working before starting working on the UI & UX.
On my consultation with Mr Razif, he told me that my prototype is very lacking on the UI and UX, especially the lack of audio cues and visual cues, since this is a prototype that i just showed, i just have all of the important feature that i originally plan on. So basically what i need to focus more now is the User Experience and also another thing that i overlook that Mr Razif reminded me was that i was to biased with my app and i know everything, but if a random tester tried my app, they wouldn't know anything. So to solve that issue, i decided to add a tutorial on my final application build.
Part 2 - Visual Cues
So to start with my final product, I started working on my visual cues, i started the project by animating the already dog 3d model that i find. At first i was still confused and don't understand how does 3D animating in unity works since in unity, i mainly work with 2D elements and got 0 experience with 3D elements, so i tried animating in 3D with the animator component, turns out animating in 3D was similar to 2D excepts there is bones and just moving the Transform of each of the bones that turns out to be pretty simple.
With the new knowledge i discovered, i made a few animations and use the one of the free available for animating the Pal. The animations that i made were
Dog Idle
Dog Idle 2
Dog Panting (Dog Idle 3)
Dog Hungry
Dog Bark
2.1 Video of dog animations in Unity
How the animation will work is that The dog idle 1,2,3 will rotate every random amount of second, Dog will move to Dog Hungry when entering Feed Mode. When the pal say something, Dog Bark will be played.
2.2 Dog animator Component
2.3 Dog animator parameters
A problem that i have seen in my builds is that especially on the play mode and feed mode, when i do something it doesn't feel satisfying to do, like for example i played with my pal, all the things that show is just my pal happiness increasing, like also when i feed my pal, what it shows is just the food disappearing and the food bar increasing, This is not enough for the user experience.
To solve this issue, i added particles to show that something is happening, like when the pal eats the food, food particle will appear to show that the pal is eating something, and also for the playing, i added Happy particle to show that the pal is happy, and then a bark animation will play to show that something is happening.
2.4 Eat & Happy Particles In Unity
Part 3 - Audio Cues
Another thing missing from the prototype right now is the lack of audios here, another things, Like touching anything or interacting with the Pal feels fun or satisfying, The pal just stayed quiet, So i added a few audios in this app.
The first thing i added was the barking audio, when the pal says something, or when the pal said something nothing shows that the text changed, so now, when the pal says something or the text changes, the pal barks, animation and sound played to get the attention.
Eating also doesn't feel satisfying enough, so i added an eating sound effect to make it sound like the pal is actually eating something, Now the experience feels more alive.
Finally I added audio for all UI Sounds, Such as pressing a button, buying food, selecting food, etc all plays a sound so it doesn't feel to boring.
Part 4 - Main Menu
What is an app without a main menu, If the application immediately starts without a main menu, So i start creating a main menu and a logo to show the application.
4.1 Pocket Pal logo
With that i use it to create a main menu which only consists of a Start button and Exit button.
4.2 Main menu
Part 5 - Settings
To customize the user experience more, i made a settings button to customize the user experience more.
In the settings, i added ways to
Modify the Volume
Restart the Tutorial
Toggle the Speech Subtitle
Go back to the Main Menu
5.1 Settings Window
With this setting windows, the user can Modify the volume, so the volume doesn't get too loud, Restart the tutorial just in case the user is unable to understand the app, Toggle off the User's Speech subtitle just in case it gets a little bit too annoying, default is on, Or go back to the main Menu.
Part 6 - Tutorial
So one of the issues with my current application is that i am too biased with my app, people who never tried my app would not know how does my app operates. If i tried asking my friend who i never showed this app too, i need to explain how this works, so how should i show them how to use it to all of the users?
Well, i created a tutorial for this application, So.. How does the tutorial works?
When a new user opens the application, the app would immediately start tutorial mode. On tutorial mode, A Text box will appear guiding the user through the app and how to use it, When the user does the step required by the tutorial, The current tutorial window will disable and activate a new one until all tutorial is done. So in total there 13 Step in the tutorial which are:
Spawn the Pal
Enter Play Mode
Play with the Pal
Exit Play Mode
Enter the Shop
Buy Food
Exit Shop
Enter Feed Mode
Click on Any Food
Move the device to the pals mouth to feed
Exit Feed Mode
Press the mic icon to talk to the pal
Open Settings
So once all the tutorial is done, There will be a sign to exit the tutorial, if the tutorial wants to be replayed, it can be easily replayed through the settings button.
6.1 All tutorial gameObjects Activated
Part 7 - Bonus Features
The app will save its data and pal will slowly lose its hunger bar and happiness bar when the app is close.
There is an Enable Tutorial Checklist in the Main menu created just in case people already know our application.
There is a button to clear user data, which needs double verification, in the main menu so the user doesnt accidentally click the button
7.1 Updated Main Menu
For the final product, i asked some of my friend to give feedback especially in understanding how to use the app, Most of them give positive feedback and the app is pretty easy to understand due to the help of the tutorial.
7.2 A Pdf of all of my code
Final Video Walkthrough of App
Reflection
This module was one of the most enjoyable module which expands my knowledge using the app unity, i previously had already learned unity but its mostly in 2D, so by creating this project it taught me how to handle 3D elements in Unity. this project also taught me more about how to handle buttons and other UI Elements more. Since i'm a computer science major, This creating this app taught me the importance of User Interface And User Experience. I am very grateful for Mr. Razif in teaching this module and the few times of helping me in Consultation.
Comments
Post a Comment