Diving into Social Moth, I mainly worked on stylizing the UI to fix within the rest of our game's style. The game itself already had a working flow and assets, but the in-game art style changed to be much more hand drawn. So I reiterated existing systems and conceptualized screens.
Top left Anxiety Bar didn't feel very impactful. Many users struggled realizing what the bar is/does.
No screen to be able to see gifts the NPCs give players.
UI felt unpolished and did not match the game's aesthetic.
Work with artists and art leads to make Anxiety Bar more visually impactful.
Create concepts for a HUD that shows off all the NPCs' gifts, keeping in mind of real life anxiety coping mechanisms.
Overhaul UI to better align with the hard drawn style the rest of the game has.
In-game we have a much more hand drawn style that thrives on not having perfect lines. So we want to push that art style even further with our UI while also not taking too much attention away from the game's environment.
Don’t focus on symmetry or perfection. Imperfection shines positively with hand drawn.
Textured pencil brushes rather than pen tool or vectors.
Lineless colour blocks and let the shape language speak for itself unless absolutely necessary for extra details.
Low frame animation to give UI movement so it doesn't feel overly static.
One of the biggest focus was creating a "Sensory Kit" or basically a soothing kit that is quite known to help those with anxiety or general worry. Outside of concepts there were certain things to consider.
Sensory kits are not entirely well known, how should we portray it? Do we treat it as some kind of collectible? Should there be more meaning to it to those who are aware what it is?
How can we expand on the sensory kit? Should we have hover tooltips that further explains the gift given by the NPC?
The other areas I focused on was making iterations for the dialogue and choice HUDs and how to stylize the rest of the screens like main menu and settings.
Wanted to make a hover state that match the main motifs of the game: moths, narrative, and eyes.
Concepted a Save/Load screen, figuring out to best way to display information that is relevant to the player like collectibles, location, and time.
Tried to show different format for dialogue choices. Not only that but also think of ways of how to let the player know which choice either increased anxiety or lower anxiety.
Floating bubbles that players can either click on or press the hotkey to choose. This is closer to Night in the Woods where they show a general idea of the choice rather than word for word.
Common list format that allow players to get a better since of what they're picking.
The game already has a well established colour palette and fonts before I hopping into doing UI/UX. I mostly helped establish rules to the style guide like when and where to use to use the fonts and what percetange to use the colours throughout the UI.
Though for the colours, I wanted to make sure it would pop out especially with how colourful the game is in general. So while keeping the orange-yellow I wanted boost their saturation up while also using an off-black shade as our shading also does not use black.
Social Moth was me dipping my toes into UI/UX—more so UI Art—where I found myself enjoying the process of questioning what-ifs and figuring out ways to communicate with the player. Working on this project made me realize a lot of what I enjoy from game development and what I ended up not enjoying. A true eye opener.
Ever since I took a class on UI/UX I really wanted to experience what it was like in an actual project. I'm really glad this was my first "introduction" to the process. Though it wasn't perfect, I was able to start realizing what kind of questions what I needed to ask or what to tackle certain problems. Even more that this is where I learned UI/UX is not an isolated department but instead works with almost any kind of department imaginable. It just depends what kind of question is being asked.
Even more, I also realized that UI has a lot more need for touching the engine. Which I found to be a win-win as I really found it advantageous to learn about Unity. However, because I was still feeling quite unsure about how to go about Unity I squashed that chance. Regardless, it ignited my passion to learn more about Unity's UI toolkit.
Because this project is a AGP cornerstone that has a relatively strict timeline there was a lot of times where UI/UX would get pushed back. In addition to the fact that there was no discussion on revamping or questions being asked until the later half of the game development. This caused a lot of issues where while it seemed like there was a lot of time for us to implement things, the ideation part would take too long leaving little time to truly polish and smoothen the experience.
That also goes hand-in-hand to the fact that I was not yet quite confident in UI/UX nor in game development so I didn't have the confidence to try and push for more polish. I think despite all of that it still came out quite well and charming in its own way.
My first dive into game development was a mix of what I did and did not expect. While I did get to meet wonderful people it felt more like people were doing their individual tasks and not interacting. It felt that there was a wall and there was no real "collaboration".
But I am taking that to heart and going to try my best in future projects to put more of myself forward. I want to be able to talk between different disciplines to not only make friendships but also to learn much more about what each department wants or expects. I really think in game development even though problems can be dealt with individually there are pros to being able to understand different perspectives. There's no need to wait or create a meeting to get feedback. Being more open and public about your work even in the same discipline can help speed up processes.
