UX/UI Designer
March 2025 - April 2025
Flutter
Tools: Unity | Figma
​Flutter is a peaceful yet unpredictable journey of a butterfly migrating through different seasons across the sky. Carried by gentle breezes over hills and fields, it occasionally faces sudden gusts of wind that throw it off balance. Through dips and weaves, it embraces both the calm and the challenge of the open sky until it reaches its final destination, home.
Academic Project
Role: User Experience Designer
Background
Flutter is an academic project that explores a butterfly's migration as a metaphor for emotional resilience, using motion and its accompanying emotion to express the adjectives of being adventurous, graceful, and unpredictable.Through iterative design, I learned how subtle changes in movement can evoke powerful emotion, overcoming early challenges in player control and pacing.
Problem
How could I design a short gameplay experience that felt emotionally expressive and intuitive to play, while using movement and environmental feedback rather than traditional interface-heavy systems to guide the player?
Design Goals
I approached Flutter as an opportunity to explore a UX and level design pipeline through a short but complete gameplay experience.
Early on, I focused on defining what it should feel like to be a butterfly, shaping movement and obstacles around that feeling, and then testing whether the experience felt intuitive, emotionally satisfying, and paced well within a 1–2 minute play session.
Competitive Research
My research began with definining the genre, mood, art style, and audio direction for my conceptual game. I studied existing games to analyze their visual style, character movement, camera behavior, and audio that enhances sensation and immersion. As well as researching and thoroughly analyzing how a butterfly moves and navigates the environment.
UX Design
Color Palette
These are the colors I chose for the game space environment. Bright and colorful
Environment Design
Set in a winter forest that later changes to reflect each season and their respective colors
Flower (2009)
What stood out to me:
-
Storytelling through movement and the environment
-
Motion and speed lines that strengthened the sense of flow
-
Seamless transitions between peaceful and tense moments
-
Strong visual and audio cues that guided gameplay without using a user interface
Flower (2009), Thatgamecompany
Feather (2019)
What stood out to me:
-
Responsive bird movement that made flying feel natural and satisfying
-
The freedom to explore the space while still feeling in control
-
Environmental influences that made movement feel more dynamic and alive
Feather, Samurai Punk
Journey (2012)
What stood out to me:
-
Strong flow and momentum created by the player’s constant forward movement
-
Environmental storytelling that helped establish the tone and mood
-
A sense of discovery that came from movement, atmosphere, and pacing working together
Journey, Thatgamecompany
Player Movement/Controller
One of the main UX challenges in Flutter was designing movement that felt expressive without becoming confusing. I kept the control scheme intentionally simple by having the player move forward toward a clear destination, while using momentum, hovering, wind lift, and brief moments of interrupted control to make the movement feel closer to a butterfly’s flight. This made movement itself the main storytelling tool, rather than something purely functional.
Key Movement Elements
To accurately depict the movements of a butterfly, these are the elements I focused on:
1. Speed
The player cannot stop or control the speed directly. Their speed will gradually increase momentum, the longer it is in flight
2. Wind Resistance & Lift
To simulate flight, gusts of wind propel the player upward, followed by a brief loss of control during descent to convey acceleration and recovery
​
3. Hovering
Instead of constant-speed gliding, players can hover in place, mimicking a butterfly’s flutter before changing direction
Player is unable to control its movement, when interrupted by a gust of wind
Player Camera
To support that movement, I used the camera as an important part of the experience rather than just a way to follow the player. The camera stayed behind the butterfly while keeping the wings visible, widened the field of view during faster movement, and used subtle shake and bobbing to reinforce speed and flutter. I also paired movement with soft ambient music, wing flap sounds, and wind audio so that feedback came through multiple layers of the experience instead of visuals alone.
1. Field of View (FOV)
I used a fisheye lens effect to mimic how a butterfly might see the world. As the player speeds up, the FOV widens slightly, then eases back to normal as they slow down
2. Camera Shake
Camera shakes slightly to signify speed when gaining acceleration
​
3. Camera Bob
I added subtle bobbing to mimic a butterfly’s wing flutter, making movement feel natural and slightly erratic
Field of View changes the longer you fly
Audio & Music
I focused on creating a peaceful, immersive flight experience with soft ambient music to evoke wonder, while SFX emphasize movement and wind.
1. Wing Flap SFX
Light fluttering sound plays as the butterfly moves
2. Wind/Air Currents SFX
I used a gentle whoosh for movement and a stronger airy hum for gusts to convey lift and make the wind feel present
​
3. Background Music/SFX
I used soft ambient nature sounds (birds, rustling, water) that shift based on the player’s location
Background Music and Audio plays as you move
Visuals
The game's visuals feature soft, dynamic lighting with shading, and include particle effects like wind trails, motion trails, reinforcing the feeling of travel across the landscape.
1. Wing Flap Animation
Light fluttering sound plays as the butterfly moves
2. Other Wildlife
Birds and Butterfly objects
​
3. Environment
Adjust lighting to give a sense of time and realism. Change the skybox to a sky. As well as floral and plant details
Dynamic Environment and Lighting
What I Started With
Early Prototypes
I started with a blank 3D Unity template and hooked up basic functionality!
Early Player Movement & Camera
I prototyped a camera that followed the player and a rough butterfly movement that is erratic, to resemble the flight pattern of a butterfly.
​​​
What didn't work well:
-
Movement: Felt too slow in terms of reaching the end of the level, and did not fit the 1-2 minute gameplay criteria. It was too fast to close surroundings
-
Camera: Only followed the player and the bobbing was too sporadic
-
Events: I added flower events where players land on a flower, but it caused confusion since they temporarily lost control
Early Player Movement
Close up of player to the environment
Early Environment
I planned out a path, hills, added some color, and grass using the terrain tool. I used external assets for the trees, plants, and player character.​
What didn't work well...
-
Terrain: The level felt too large and plain, with no clear path, and players could see everything from far away, which made it less engaging
-
Level of Detail (LOD): The grass cannot be seen past a certain distance. Making the background bright and standing out
Early version of the terrain and environment layout
Final Prototype
What I ended with!
Full Gameplay Video ༊·°
I further developed the level to better reflect my full vision. What started as a basic prototype became a more expressive world, where movement itself helped tell the story.
Key Improvements
From Earlier Versions
​​
​Improved Controls:
-
Camera sways when moving left to right
-
Increased and smoothed out head bobbing
-
Added delays in movement to show speeding up and slowing down
-
Increased FOV when speeding up
-
Player cannot move backwards or fly sideways
-
Movement felt semi-reliable and not perfectly straight to resemble a butterfly
​​
Improved the movement of the player
​​Better Pacing:
-
Player can move at a reasonable speed
​Sense of Progression (images below)
-
Seasonal Change: Trees change color to show seasonal changes. From winter, fall, spring, to summer
-
Day-Night Cycle: Each cycle lasts 80 seconds, and adjusts lighting based on time of day. I swapped out the skyboxes
-
Bird and Butterfly Boids: These elements created the feeling of being immersed in nature, enhanced by ambient sounds and the presence of other wildlife. Groups of birds and butterflies (boids) are spawned with their own animations, provided by the 3D asset package used in this project
​
- Sparse Trees - Frozen Pond
- Leaves turn orange - Different Biome - Flowers, Butterflies
- Trees grow fruit - More Butterflies - New Flowers
- Sparse Trees - Frozen Pond
​​
Player Guidance​
-
Breadcrumbing: Butterflies are placed near key parts of the gameplay and facing towards the goal.
-
Flower Events: Pollen particles direct the player's attention towards a cluster of flowers.
-
Wind Events: Sounds of a gust of wind boost the player upward or reposition them to a new location to give a sense of depth, speed, and scale.
-
Fog: Far distance (the horizon) covered by fog to limit perspective.
​
What I Learned
Building Flutter from scratch taught me how to organize and structure a short and complete gameplay experience using external assets and custom-made content to convey the story's narrative.
Designing events and feedback systems was challenging at first, especially in guiding players clearly through the level.
Through playtesting and iteration, I learned how to make each design change intentional and impactful. This project pushed me to think critically, apply feedback effectively, and improve the overall experience step by step, and through close oriented detail.
I had A LOT of fun making Flutter, and it showed me how much I've grown as a designer who values immersion, clarity, and meaningful iteration.