I'm Blue
A serious game to spread awareness of depression
Project Context
This is my Final Year Project as a Year 4 student in NTU. I decided to work on a self-initiated project that I was interested in because most of the projects offered did not pique my interest. I also wanted to work on a project that included some elements of design and UI/UX and I thought that developing a game would be such a good blend of design and development. Hence, I decided to develop a meaningful visual novel game on a topic I had very few knowledge in - depression. This game aims at equipping people who do not have much exposure to depression, on how to converse with people who are diagnosed with depression.
Role
Lead UI/UX Designer and Software Developer
Tools
Figma and Unity2D
Date
Aug 2021 - May 2022
Design Thinking
Colors
This game targets people who have not have prior exposure to depression. Hence, the overall design of the game should help them understand as accurately as possible how being in a depressive state feels like.
​
Several color palettes came into mind:
​
Muted palette Bright palette Dark palette
​
​
​
​
Furthermore, I had to think of what kind of feel I wanted to portray with the game - cartoon, animated, serious, dull etc. The overall feel should also aid in allowing users to have a deeper understanding of how depression feels like.
Interface Layout
A visual novel type game is a form of digital semi-interface. They have a textual narrative combined with a static or animated illustration. Hence, there is a need to design how the interface will be presented, displaying the illustration and the storyline. Several iterations were needed in order to achieve a user-friendly interface.
Some elements that will be included in the game - images of the 2 main characters, textual narrative, buttons for user interaction
Layout 1
For this layout, the background image takes up 3/4 of the screen. This allows the user to be fully engaged with the visuals in the background while still being able to read the text at the bottom. An image of the person speaking is also included at the bottom left hand corner for users to connect the person to the name.
.png)
Layout 2
This layout places less emphasis on the background image but uses the character's full body image to display emotions, body language and facial expressions. This helps users to visualize the characters better and provide a more engaging storyline.
After arranging the wireframe elements for the default display, I moved on to design an interface that includes buttons for users to choose their own adventure.
Layout 3
Choices are placed in the middle of the screen to draw attention to the eyes that the computer is waiting for the user's input. Since the choices are the main focus, I decided to place them in the middle.
.png)
Layout 4
In this layout, the images for the characters are removed with the idea that the characters will be included in the background image. Choices are not placed in the middle of the screen so as to allow users to be continually engaged with the visuals in the background image.
.png)
Ultimately, layout 4 was chosen as it was difficult to include avatars of the characters with realistic facial expressions and body language. Layout 4 also enhances the visuals in the background allowing the user to be immersed in the story.
UI Design
After planning out the layout of each element, it is time to include the UI designs into the wireframes. With the topic about depression, it is important to allow users to receive the full experience of how it feels like to be depressed. From several interviews from friends, they mentioned how depression is associated with the loss of all hope. Below describes the design thinking process for the cover image.
Cover illustration 1
The initial design meant to deliver the idea of hopelessness. The tight and chaotic strokes around the borders of the image are meant to show how frustrating it can be in the mind to not be in control of your own emotions. However, this idea was turned down as it does not include anything the user can expect within the game.
.jpg)
Cover illustration 2
This design includes an image that users can anticipate to see within the game, making it a more suitable image as the cover image of the game. However, there is feedback given by the professor that this can portray a false image of what depression looks like. People who are depressed do not usually express what they are really feeling.
.jpg)
Final cover illustration
This was created to exemplify how depression can be mysterious. The smoke/cloud-like textures around the borders show how a person can be diagnosed with depression but not exactly show it. This is also shown in the image of the main character of the game who has depression. On the outside she can look very normal, however is struggling deeply from within.
Carrying on from the theme of the cover illustration, the designs of the other design elements are created. This includes the design of the buttons and the container for the story text.
Final implementation
Learning points
Independence
Working alone on a huge project definitely taught me how to be resourceful and depend on myself. Although I did receive guidance from my professor, I had to come up with all the inputs before receiving any advice. This taught me how to utilize the tools that I have and my knowledge of design to create my own interface from scratch without much sourcing of illustrations and images.
