UI Design Process
Moodboards
Started with researching other Visual Novels on mobile, seeing what has been done before, and more importantly what was industry standard.
Gathered screenshots and other inspirations into a Figma Jam board. This helped the team discuss and pare down what we wanted to see in our game.
This was just for the redesign, there was a separate moodboard that was much more extensive used for the rest of the game.
Served as a proof of research, when there was a point of contention while working on the designs I used these screenshots to point at what works and what doesn’t.
Wireframes
Once done gathering all the information I needed I started getting the things blocked in with wireframes.
Since I was working with a team that weren’t design savvy it was not as blank slate as a traditional wireframe would be. I needed to convey ideas to them in a way they would understand.
This was purely to make sure we had everything we needed laid out and no elements of the game were missing.
Roughs & Iterations
There was a very long iteration process for this game. I went through every small part of it and made sure the stakeholder was happy and got to see at least three different versions of each element.
I started with making the main game page which is the dialogue screen, then built everything off of that.
There was a lot of back and forth discussions between the project owner on I about colour, hierarchy, and best practices where I needed to advocate for better design choices.
Final Designs
There were over 40 screens in this game that needed to be designed and plotted for the programmer.
It was a delight to go over the designs with the developer and communicated what each part of the design did, how it needed to be animated, which parts connected to each. Often times I would also need to help the programmer figure out how to make things work as the engine that was used for the game, Renpy, can be hard to figure out how to change the UI.
The cleanup process was really gratifying for all the iteration that the design went through.
Environment Art and CGs
I was asked to redo some of the art for the port since the backgrounds weren’t completely finished for the desktop version of the game.