top of page

Read the full case study below

The Concept

A digital reimagining of a childhood pen-and-paper game 

the inspiration

Growing up, my sister and I would play this abstract strategy game together on pen and paper—one of us tries to fill the board by strategically planting "dandelions" that spread their seeds, while the other acts as "wind" to blow those seeds away and prevent full coverage. Now that she's in India and I'm in Seattle, I transformed our childhood game into a web experience that anyone can play anytime, anywhere.

The Human-Centered Solution

Dandelions & Wind lets you play as the dandelions (🌻), placing 7 flowers strategically on a 5×5 grid while an AI wind opponent (💨) blows seeds in different directions to limit your spread.

The game preserves the original's core tension: Can you position your flowers strategically enough to cover the entire board, even when the wind works against you? Three difficulty levels ensure both casual players and strategy lovers find the right challenge.

The Goal

Create a joyful, strategic experience in under 2 minutes that feels like the memory of playing it as a child.

My Role

UX Designer, Game Designer, and Developer.

KEY INSIGHT

How do you digitize a tactile, turn-based childhood game without losing the simplicity and strategic depth that made it special?

How AI Supercharged the Process

I leveraged Claude AI (Opus 4.1) as a collaborative development partner, completing the entire game through 7 focused iterations—rapidly translating game design concepts into functional code.

AI wasn't just a code generator—it was a strategic partner that helped me build a solid foundation fast, which I could then refine and customize myself. When final UI tweaks were taking longer to communicate to AI, I jumped in and edited the code directly. This was incredibly empowering: I wasn't burdened with writing everything from scratch, just making targeted improvements to a strong base. This process also helped me develop my coding skills hands-on.

  • Game Logic & Strategy: Claude helped me implement the core mechanics, including flower placement, the wind direction system, and the seed spreading algorithm. We built three difficulty levels with distinct AI strategies—from random moves (easy) to near-perfect strategic play (hard)—and created a hint system to help players discover optimal moves.

  • Visual Design & Animations: Together, we iterated on the warm gradient background and glassmorphic UI to create that optimistic, nostalgic feel. We designed micro-interactions, such as the planting animation when flowers are placed, the wind direction indicator, and the confetti celebration on a win. We also refined the wind compass visualization to make strategic information instantly readable.

  • Taking the Reins on Final Polish: When communicating specific UI adjustments to AI became slower than just doing it myself, I dove into the codebase and made direct edits. Having a solid foundation from AI meant I could focus on tweaking spacing, colors, and interactions without the intimidation of starting from zero. The UI isn't exactly perfect, but it works—and I learned a ton about CSS animations and game state management in the process.

THE DESIGN DECISIONS

Every visual and interaction choice was designed to make strategic thinking feel approachable, joyful, and rewarding.

I play-tested with friends and family to understand where players got confused, what information they needed at a glance, and which interactions felt satisfying versus frustrating. These sessions revealed crucial UX improvements that transformed the game from functional to genuinely enjoyable.

  • Warm Visual Language Creates Emotional Connection: AI initially generated a green-heavy, literal botanical theme. I pivoted to peach-and-yellow gradients that evoke childhood summers—warmth over realism. Generous whitespace and rounded corners reduce visual tension.

  • Strategic Information Made Instantly Scannable: AI displayed game stats as simple text lists. I prompted for visual representations: a wind compass showing used/available directions, an emoji-based flower counter, and live coverage percentage. Players now scan the state instantly instead of reading.

  • Micro-Interactions That Celebrate: AI provided functional transitions. I requested animations that reward decisions: flowers that bounce when planted, giant arrows showing wind direction, and confetti on victory. These details transform mechanical actions into satisfying moments.

  • Progressive Disclosure: AI placed the tutorial only at game start. After watching players skip it and get confused, I made it accessible anytime via a persistent "How to Play" button. Also added a hint system for players who want guidance without reading the rules.

  • Play-Testing Drove Spatial Redesigns: Originally, wind directions were arrows lined up horizontally—confusing and hard to parse spatially. I redesigned them as a circular compass showing all 8 directions at once, making orientation intuitive. Added turn indicators ("🌻 Your Turn" vs "💨 Wind's Turn") after watching players lose track of game state.

Dandelions & Wind - V1.JPG
The iterative journey - Each version with Claude AI refined the UI, micro-interactions, and code, proving that great design is the result of relentless refinement.
 WHAT I LEARNED

Focused iterations beat endless refinement—and knowing some code gives designers an edge.

This project taught me that strategic prompting and knowing when to stop dramatically accelerates development. My previous web app took 59 iterations—this game took under 10. While coding isn’t required for designers, having basic skills let me polish details myself instead of waiting for AI to interpret every tweak.

  • Focused Iterations Trump Endless Refinement: My previous web app (Daily Spark) took 59 iterations to complete. This game took under 10. Learning to prompt strategically, knowing when "good enough" beats "perfect," and recognizing when to jump in and code tweaks yourself—these skills dramatically accelerated my workflow. The game still has polish opportunities, but it's functional, playable, and genuinely fun—that's what matters.

  • Hands-On Coding Builds Confidence: When tweaks were faster to code than describe, I edited directly. Knowing enough code turned dependency into agility.

  • Simplicity Is Deceptively Hard: Translating a two-player pen-and-paper game into a solo digital one required surfacing invisible states—progress counters, turn indicators, visual feedback. Every UI element had to justify its existence.

  • Design for Real Behavior, Not Ideal Behavior: Many users don't read rules first. My initial tutorial was at the game start—players skipped it, then got confused. The solution: make help accessible during play, not just before it. Meet users where they actually are.

bottom of page