I'm Blue Cover.png

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.

I’m-Blue-Cover-Background--compressed.png
Role

Lead UI/UX Designer and Software Developer

Tools

Figma  and Unity2D

Date

Aug 2021 - May 2022

I'm-Blue-Cover-(2)-Compressed.jpg
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.

Palette - Muted.png
Palette - Light.png
Palette - Dark.png

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

Wireframe - Basic.png

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. 

Wireframe - Basic (3).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.

Wireframe - Choice (1).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.

Wireframe - Choice (2).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.

Menu Background.jpg

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.

Menu_Background-(1).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.

Menu background (2).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
Final Implementation.png
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.