Timeline | September 2020 - April 2021

Project | Graduation Project

My Role | Game Design | Level Design | UI Design | Illusrations

Platform | PC, Mac & Linux Standalone

Technology | Unity | C# | Photoshop

 

 

ABOUT

What is FLOWS

My capstone project for my bachelor's in interaction design. FLOWS is a 2D third-person story-based puzzle game where players will explore the character's worlds through collecting, finding, and puzzling within an engaging comic style. It is an experimental exploration of discovering new innovative ways of interactive games.

Download FLOWS and play

Note: this application only works with PC, MAC & Linux Standalone

Flows is a 2D third-person story-based puzzle game where players will explore meticulously designed worlds with delicate hand-drawing illustrations and engaging comic style.

The story is about a young girl dealing with painful experiences from the past. As the story progress, she will go through self-realization to finally accept herself and see her reality differently.

Game ---

Let me presents "FLOWS"

chapter1
puzzle
erase

EVOCATIVE STORY

Unfolding the story. Walk her out to her biggest struggles.

COMICS VISUALS

Enjoy gameplay with comics style, and hand-illustrated story.

MEANINGFUL PUZZLE

Explore the story from Wonder’s eye and navigate her out to her internal world.

REVEAL JOURNEY

Self-realization and acceptance is the goal of the story.

jellyfish

Process---

HOW I GOT THERE...

Ideation

As a designer, I am obsessed with using my design to tell stories. I always want to evoke a sense of curiosity and wonder through my work, and I found games is the perfect medium to tell stories because it is not just interactivity but also with how we get an emotional response from engaging as the character in the story. Like in movies, you get emotions through empathy by understanding what the person on the other side of the screen goes through.

In this project, I wanted to challenge myself in terms of both design and development to create a story-driven game entirely on my own. As it is my first time creating an original story, I wanted to keep the game mechanics simple and focus on the aesthetics of art and the story elements of the game instead.

Screen-Shot-2021-04-22-at-8.46.54-PM

Gameplay Pillars Focus on

It is important to define what are the gameplay pillars to focus on during the game's development. As the game's foundation, a pillar is a set of features that will get particular attention during the game's development.

GamePlay-pillar
Instructions

Digital Prototyping

During the pandemic, I couldn't get to test my first draft prototype in person with my classmates. So I decided to send them a digital copy of my prototype with some instructions for testers to follow.

In the first prototyping draft, I want to test the functionalities of the UI on the main menu and see if the erasing mechanics work well with unfolding the story of the comics in Chapter 1.

Key findings from my first digital prototype:

- The erasing mechanic lacked instruction for the player to know which area needed to be erased on the image.

- I learned that it is essential to indicate when and where is the end of the test of the prototype. E.g., Make notices for the tester

- Some Ui in the main menu could be replaced with icons because it allows users to have a quicker visual perception to obtain information and get it processed by the brain.

Conceptualization

To start building the storyline of my game, I need to identify what kind of interactive story structure. After researching different kinds of narrative story structures. I decided to use the method of foldback narrative structure because my story was about switching back and forth in the character's reality and her conscious world.

 

Foldback Narrative story structures

- One narrative arc

- Polt branches several times but eventually fold back to a single inevitable event

Game-Flow-1

Art style - Comic visual

After figuring out the narrative structures, I started sketching some art concepts to visualize the world I am creating. The levels design has a different mood from one another, so I want to keep my visual consistent and cohesive. I decided to go with the Moebius art style, which I got inspired by Jean Giraud, an amazing illustrator artist, with a very strong hand-drawn comic style of my game. In the process, I also got inspired by watching animated movies from Ghibli Studios. I think the abstract nature of the theme would be working great with the Moebius style that has a poetic feeling in a game.

 

 

3
4
2
1

Visual Language ---

Characters Design & UI

One of the core elements of character design comes from our first impression.
The first thing that people tend to see and read is the overall shape of the
character's form and silhouette.
- Prof. Mary Jane Begin, Illustrator, Author.

character-design

First, I design my character with a more complex line drawing with the clothing and hair. Since I need to draw out the character multiple times throughout the development of the visual. So I decided to go with a more minimal style approach in my character design. The character's overall body shape was formated as a triangle shape. As Mary Jane Begin mentioned, the character's shape should be special enough for people to recognize.

UI: Attention-grabbing  yet clean and simple

As I was creating my main menu in my game, Ui was an important part of the in-game experience because the main menu should introduce the player's atmosphere. I want to have a strong aesthetic feel when players enter the game because my target players enjoy hand-drawing style visuals. Implement animation on the center will attract/ eye-grabbing players interested. When the player first enters the game, the player will look for a button to start the game, so I decided to scale the text of "Begin" bigger to attract the player's attention.

main-menu-1
homemainmeu

During playtesting, I found that some players did not know what to do in the game. And that was because it was a lack of introduction on the first screen. So I decided to have a pop-up screen with animation to show how to play the game on the first page of chapter 1. With animation, players will understand what to do in the coming up scenes in the game.

popup
Web-1920-–-130

To make the home button more dynamic but without too distracting in the game, I decided to have the dropdown icon on the top left so when the player hovers over the icon, it will dropdown. The icon was inspired by a bookmark tag while we read a novel book. I want to have the Ui have the same theme as the comics book feels.

animated-ui
BacktoHome

After the playtesting, most of the player was confused the direction of scrolling in the page, so I decided to have a scroll down animation indicates which direction to scroll.

scroll-down
scrollingdown

Game Design Principles

While designing, structuring, developing, and testing my game, I noticed that it is very easy to lose focus for my project, so I came up with 3 important principles for me to follow.

These were the most important rules I need to keep in mind.

1. Level Design : Inclusiveness

2. Story/Mechanics: Balancing

3. Visual Design: Cohesiveness

Screen-Shot-2021-04-22-at-10.44.09-PM

Level Design: Inclusiveness

One thing that in my mind when I was started this project was who is the player here? What kind of player will enjoy this type of game? And I realized my target audience would be mostly casual players who enjoy story-telling types of games. And my mentor advised me to design for all types of players; The difficulties need to be balanced so that from the player who might have the higher skill to players who have fewer skills to complete the game.

Story/Mechanics: Balancing

As I was developing what kind of mechanics I should include in the game. My mentor points out that the mechanics in the game needs to reflect/balance with the story I am telling to the audience because all these interactions are what creates the story.

To make the mechanics have a meaning to the story, I set some requirements to myself to follow:

- it needs to represent the consciousness of the character's mind

- it needs to tell a story

- it needs to fit with the flow of the narrative

- it needs to represent the action mechanically properly

- the mechanic needs to be tactile enough to work with the controls.

Web-1920-–-80

Immersive Design Challenges 

Reflects the story with mechanics

1. Erasing Mechanics

The erasing mechanics were presented throughout the comic about her painful experience from her past. At the end of chapter 1, the player needs to erase the boyfriend's shadow image, which foreshadows how the main character wants to erase the sad memories after their broken relationship.

The action of erasing in this game reflects on how she felt during that moment in her life. But also, the gesture of erasing also has a meaning of unfolding the story in the game.

erase

2 . Gain New Abilities

At first, I struggled to represent the meaning of the character's growth when she got overcome with a painful experience. At the draft, I was assigned the character with basic abilities to move left and right and jump for all levels design. But I realized that doesn't reflect on showing the character's growth. After some discussion and ideas sharing with my classmates, I came up with a solution. I want it to give new abilities to the character when the story process. Although, all those abilities are very generic, and that was because of technical constrain. Still, I think it is a simple solution to reflects upon the story about the journey of self-growth.

chapter1
chapter-2-jump
pull

3 . Puzzle mechanic

The puzzle mechanic was presented after the gameplay in her consciousness world. The broken crystal pieces were representing of the character's mental states. Collecting the crystal pieces and then assemble back reflects how the character has put herself together as a whole, healthy person. At first, I thought the puzzle should be consistent with the difficulties of the puzzle. But as my classmate's feedback of "how it gets easier to build resilience to ourselves as we experience lots of sadness from our life." I realized that rather than make the puzzle consistent with every level, the puzzle would get easier to solve toward the end of the story.

puzzle

3. Visual Design: Cohesiveness

When designing how the character should move in the level, I notice the character move with the camera ups and down, left and right. Which is feels like shaking when the character moves at a very fast speed. Also, it shares a different style from the comics, where the comic has a very static feeling, and the gameplay is very active.

 

To create cohesiveness with the comic style, I decided to have a fixed camera/frame on one screen. The character is free to move around inside a frame without feeling very glitch in an environment. This allows continuos the comic styles I developed through the game. Like how we read comics books, we move our eyes to a block of an image and then move to the next one. It gave an overall cohesiveness of visual style to the player.

comics-move

Fixed Camera - comic style

shake-camera

Free Camera - active

Reflection

 

Insights

Overall, I think that my game project was successful. Although, it is the first completed workable project I have ever builded but I felt very proud of what I have accomplished in my finial year in the interaction design program.

If I have more time---

Next Steps

 - Refine sound design. I wasn't able to have enough time to implement sound effects.

- I would further developing the storyline

- Add more animation so that it is more eye-grabbing for players to look at.

- If without technical constrain, I would like to make my character's abilities stronger everytime they collected a crsytal.


If you like my work, drop me a line to say hi.
I’m currently seeking for a full time position as a UX / UI designer at an agency, tech company and, game company.

OPEN MAILBOX
dcmok@yahoo.ca

CONNECT

Designed with love and effort - © 2021 Dionne Mok.