As the UI designer for the project I started by looking at existing games/novels for inspiration. One of my main inspirations I used for research was a game by the name ‘BAD END THEATER’ as seen below.
The first thing I noticed when looking at this sort of UI was its simplicity, most if not all visual novels seem to share this trait. I devised that a simple UI would help users focus on the art and visuals, as they are the main draw in for the audience, hence why the UI is designed in darker colours/shades while the text and images are much lighter/bright. I made a note of this and made sure to remember this when creating my designs. I also made note of other traits of this example such as a uniform colour palette.
Below are the original designs I created for the UI. All of the assets are original works of mine, I used the games underlying theme of office work to come up with the ideas.
Through mine and my teams decision we decided to go with the black bars option. We chose this option for various reasons. First relating back to the research, by using black as the base both the text in white and visuals in full colour would stand out more. Second, with both other designs more work would be needed to make them functional which with the time frame I had (taking into account most of my work would be done once other peoples work was done) would be difficult to pull off, especially with the email theme as it would be very complex. With all this being said I would still keep these alternate designs with the goal to add them in if I had spare time or required it.
With the UI decided I would eventually put all the assets together and prototype it to create a working final product.
Final Prototype (Embed not supported on WordPress, Fullscreen/F11 recommended)
https://xd.adobe.com/view/ead27a8c-943f-4282-8d08-9f8604752e5d-bf81/?fullscreen&hints=off
Reference: BAD END THEATER Available at: https://store.steampowered.com/app/1764390/BAD_END_THEATER/ Accessed 29/04/22