To match the relaxing theme, I kept the UI minimalistic and clean. It is very different from typical pet simulator games, as they often have very loud UI that covers a lot of the screen. I wanted to keep the scene airy and light so the user didn’t feel overwhelmed. I got a lot of feedback from playtesting that reassured this design decision to keep the simplicity of the UI look as it added to the relaxed feel.
This was my first time working with a a mobile device and there were several new things I needed to consider. I had to learn about the anchor points and scaling with screen size for canvases in order to keep UI in place for different screens. I watched several videos and also asked fellow course members who are more experience with Unity’s UI system if they could help me set everything up correctly.
https://www.youtube.com/watch?v=Tys6QWi9RpM
The difference between UI sizes on smaller vs larger screens
I had to apply this canvas scaler setting to all of the canvases in my build in order for them to scale correctly.
Initial versions not reaching the edge of the screen
Small screens scale fine
Issues with UI after I hadn’t anchored the UI elements into the correct position.
Testing the visuals of the stat bar UI. It was important that the player could easily see their stat levels, however these colours were slightly too bright and saturated.
Shop sign was once a button. As playtesting v6 shows, I removed this and made it into a background graphic instead to avoid people accidently clicking on it when walking around the left hand side.
The back button was previously orange but it wasn’t visible enough so I changed it to pink.
This was the first prototype of the UI that I proposed. I was thinking of having circle buttons above the characters heads which would lead to the different scenes. I soon realised that this would be too overcrowded and there would be too many buttons above the character.
[2nd iteration of UI for stat bars. I planned to have them above the character to make it easier to see what level each of them were one, but after the other pets were removed in v3, there was no need for this anymore. Because of this, the final UI layout was designed and implemented. ](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/439e14ef-9dcd-41c4-9c75-f317d05e8088/IMG_2022051210475817.mp4)
2nd iteration of UI for stat bars. I planned to have them above the character to make it easier to see what level each of them were one, but after the other pets were removed in v3, there was no need for this anymore. Because of this, the final UI layout was designed and implemented.
UI Mock-ups in Figma - last composition experiment before the final version.
This was the prototype UI layout for the close up scene which changed after the new CBT activity was added. I felt that this incorporated the CBT idea more than having an information panel that was originally proposed.
This is the revised version of the close up scene UI. I kept it simple and clean to stay coherent with all the other UI in the different scenes. I chose the pink gradient featured in my game colour palette to add a pop of colour and keep it playful for the young target audience.
UI mock-up Figma screen recording Process
UI mock-up Figma screen recording Process