• Flows

An interactive story-driven game about accepting and realizing past-self.

flow-tag

FLOWS is my bachelor's capstone project in interaction design. It's a 2D third-person puzzle game that lets players explore character worlds through collecting and solving puzzles. It features an engaging comic style and is an experiment in innovative interactive game design.

Download & play demo

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

flows-cover
flows-desktop

Timeline

Sep 2020 - Apr 2021

The User

Gamers who enjoy narrative storytelling games.

My role and who I work with

I work designed and developed the game all by myself

Tool Used

Unity (C#), Adobe Photoshop, 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.

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

How I Got There...

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

Research • Ideate

As a designer, I use design to tell stories and create a sense of curiosity and wonder in my work. Games are the perfect medium for storytelling because they create emotional responses through empathy with the character. In this project, I challenged myself to create a story-driven game entirely on my own, keeping the game mechanics simple and focusing on art and the story elements.

Research • Gameplay Pillars Focus on

It is essential to define 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

Plan • Conceptualization

To create the storyline of my game, I chose the foldback narrative structure because it suited my story about switching between the character's reality and her conscious world. 

Foldback Narrative story structures

  • One narrative arc
  • Plot branches several times but eventually folds back to a single inevitable event
Game-Flow-1

Plan • Comic visual

After planning the narrative structure, I began sketching art concepts to visualize the game world. Each level has a distinct mood, so I aimed to maintain visual consistency by drawing inspiration from the Moebius art style, influenced by the hand-drawn comic style of illustrator Jean Giraud, and Ghibli Studios' animated movies. I believed that the abstract theme would blend well with the poetic ambiance of the Moebius style for the game.

3
4
2
1

Visual Language

Design • Characters & UI

character-design

“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.

For my character design, I initially created a more complex drawing with detailed clothing and hair. However, to simplify the process and make the character more recognizable, I opted for a minimal style with a triangular body shape.

UI: Attention-grabbing yet clean and simple

While creating the main menu for my game, I focused on the UI as a crucial aspect of the in-game experience. I aimed to create a strong aesthetic feel that would appeal to my target players who enjoy hand-drawn visuals. To make the menu eye-grabbing, I implemented animation in the center. To attract the player's attention to start the game, I scaled the text "Begin"

main-menu-1
homemainmeu

To address player confusion during playtesting, I added a pop-up screen with animation on the first page of Chapter 1 to demonstrate how to play the game. This helps players understand what to do in subsequent scenes and improves the overall game experience.

popup
Web-1920-–-130

The home button needed to be more dynamic, so I added a dropdown icon on the top left that appears when players hover over it. The icon was inspired by a bookmark tag, and I wanted to keep the UI consistent with the comic book theme of the game.

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
Instructions

Test • Digital Prototyping (User testing during pandemic)

During the pandemic, I sent a digital copy of my first-draft prototype to my classmates to test the functionalities of the UI on the main menu and erasing mechanics in Chapter 1. 

Key findings from my first digital prototy, included a lack of instruction for erasing, the need to indicate the end of testing, and the potential to replace some UI with icons for quicker visual perception.

What lesson did I learn? 

- The lack of clear instructions led to a reduction in satisfaction during testing. In the future, we will provide clearer instructions to avoid confusion.

- Humans tend to process information more quickly through visuals than text. Therefore, it is important to ensure that the UI design is easily understandable without relying on lengthy text.

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

The target audience for my game is casual players who enjoy story-telling games. However, I also want to ensure that the difficulty is balanced to accommodate players with different skill levels.

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 create the story.

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

1. it needs to represent the consciousness of the character's mind

2. it needs to tell a story

3. it needs to fit with the flow of the narrative

4. it needs to represent the action mechanically properly

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

Web-1920-–-80

Immersive Design Challenges 

Reflects the story with mechanics

Erasing Mechanics

Erasing mechanics were used to represent the main character's painful past in the comic. In chapter 1, players erase the boyfriend's shadow image, symbolizing the character's desire to forget the memories. This action reflects her feelings and unfolds the story.

erase

Gain New Abilities

At first,  I struggled to show the character's growth after a painful experience with basic abilities. Through discussion with classmates, I decided to give new abilities as the story progresses, despite technical constraints. It's a simple solution that reflects the journey of self-growth.

chapter1
chapter-2-jump
pull

Puzzle mechanic

The puzzle mechanic reflects the character's mental states, represented by broken crystal pieces that the player collects and assembles. Initially, I thought the puzzle should be consistent with the difficulties of the puzzle, but a classmate's feedback made me realize that the puzzle should get easier as the story progresses, reflecting how we become more resilient to sadness over time.

puzzle

Visual Design: Cohesiveness

To match the static feeling of the comics, I decided to use a fixed camera/frame in the game. This creates a cohesive visual style for the player, allowing them to move freely inside the frame while maintaining the comic book style. ( 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 • Key Learnings

Overall, I think that my game project was successful. Although, it is the first completed workable project I have ever built I felt very proud of what I have accomplished in my final 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 be 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 every time they collected a crsytal.

If you like my work, drop me a line to say hi .If you like my work, drop me a line to say hi .If you like my work, drop me a line to say hi .

+1 778-985-2926      dcmok@yahoo.ca       |       INSTAGRAMᕯ        BEHANCEᕯ       LINKEDINᕯ         |        © 2023 Dionne Mok - Designed with love and effort