← Back Home

Designing for flow. A case study in mobile game design.

Exploring gamification and "flow" states with game design. I designed, built and launched an iOS game called "Sero". The game has over 50,000 downloads.

My role

This was a personal project that I designed and developed myself. I'm 100% responsible for this project.

The process

The inspiration

When Monument Valley came out on the iOS App Store, I immediately played through it. I had never had such a simple, engaging and beautiful experience on my phone. This experience sparked my fascination with mobile games and how they can create a state of "flow".

Flow = Difficulty over time

I spent months researching game design and flow states. I learned that "flow" is the result of balancing difficulty over time. This is a unique challenge as the goal for most things I work on is to make them as easy as possible. To create flow you need to design friction into the experience.

Ideation & prototyping

The key to promoting flow would be engaging gameplay. I wanted to create something simple and explored ideas that didn't rely on much UI. After sketching some ideas, I started prototyping to see how they felt. At this point I didn't have the entire game thought out, I was still exploring.

The concept

After exploring a few options, I had a prototype I felt good with. The game consisted of arranging puzzle pieces to bounce a ball off of. The goal was to arrange the pieces so you could collect a series of triangles. Once the user collects all the triangles they can complete the level by getting to the other side of the screen.

Visual aesthetic

Once confident in the concept I spent time exploring visual aesthetics. I wanted something simple and beautiful. After many iterations I landed on a design utilizing triangles as building blocks. To add some interest I used bright colors and subtle gradient backgrounds.

Refining gameplay

The goal was not to collect coins or level up. I wanted people to get lost in the puzzle and enter a state of flow. Consistent feedback on progress is key to create flow. I chose to have separate "design" and "observation" phases of gameplay. Meaning, you first arrange puzzle pieces then launch the ball into the puzzle to see the results.

Testing an early prototype

I built and tested 5 levels to see how people responded. I immediately knew my design had fell short. Some levels were too easy and some made people frustrated. I identified the major problem as a lack of showing progress. Feedback was either success or failure and people didn't know if they were going down the right path. The user was to collect each triangle in a specific order to solve the puzzle but I was not showing this to users.

Better incremental feedback

I iterated on the design and chose to show progress by creating a "guide" at the top of the screen. I placed triangles that mapped to the triangles the users needed collect. Each triangle in the guide would light up green or red depending on if it was collected in the correct order. This created a smaller feedback loop and helped show incremental progress.

Incorporating sound

I wanted sound to set the mood but also give feedback and show progress through the game. Using a guitar, I recorded each individual string's sound as a melody played out. Each time the user collects a triangle it plays one string of the melody. If they are out of order it becomes out of tune at the point the error occurred. If correct, you hear a complete and satisfying melody.

Correct

Incorrect

Testing the revised prototype

I tested the prototype making sure not to interfere, only observe and ask questions. The results were much more positive. The process was easier to understand and people were enjoying themselves. People learned how the game worked through in-game feedback and asked fewer questions. After a few user tests I felt confident that gameplay was heading in the right direction.

Level design

Next came the most time consuming and challenging part of the process—level design. I expanded the visual language for five distinct "chapters". Each chapter incorporated new colors and gameplay elements to increase difficulty.

Learning through gameplay

Rather than providing instructions, I designed the early levels of each chapter in a way the forces the user to learn and understand how new gameplay elements work.

Supporting screens

Gameplay was key but supporting screens play a role as well. Success, failure, level selection, menu, etc...

Managing difficulty for individuals

To avoid stagnation I unlocked new chapters as difficulty increased. As a user made it half way through a chapter, the next would unlock. This allows users to work on multiple levels at once and take a break from any specific level they are stuck on.

Refining level progression

I did a larger "beta" test of the game and collected feedback. I tracked how many attempts it took people to complete each level. I graphed this data to show the difficulty over time. It was clear some levels were too hard and some were too easy. Using this data I iterated to create a smoother experience that promoted flow.

Launch!

After refining and reorganizing levels I spent a lot of time playing through the game to make sure all the bugs had been worked out. After I felt confident, I launched Sero on the Apple App Store.

The end result

Sero has done very with 50k+ downloads over 3 1/2 years. It's been featured on numerous websites and won an award ("Game of the Day", Design Nominees). It has a 4.7 star rating and has gotten some great user reviews.

Current status

Sero is no longer live on the Apple App Store. In December 2019, Apple released an update that broke the game. I chose to remove it from the App Store vs. continue to support it. Sero served its purpose and I'm happy that 35k+ people were able to enjoy Sero over the years.

← Back Home