Year / Timeline | September 2020 - April 2021
Project | Graduation Project
My Role | Game Design | Level Design | UI Design | Illustrations
Platform | Unity (C#), PC, Mac & Linux Standalone
ABOUT
What is FLOWS
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.
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"
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.
Process
HOW I GOT THERE...
Ideation
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.
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.
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.
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
- Polt branches several times but eventually folds back to a single inevitable event
Art style - Comic visual
After figuring out the narrative structures, I started sketching some art concepts to visualize the world I am creating. The level's 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 for 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.
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.
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
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
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.
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.
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
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.
Immersive Design Challenges
Reflects the story with mechanics
1. 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.
2 . 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
3 . 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.
3. 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. )
Fixed Camera - comic style
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 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.
Trying to become a better
designer everyday !
© 2022 Dionne Mok - Designed with love and effort