Front-end Development
Productivity Web App
Concept & Problem
Designing Focus That Feels Like Play
Mind Meow (formerly Purrfect Focus) is a playful brain-training web app designed to make productivity feel warm, encouraging, and game-like instead of rigid or intimidating.
I wanted to explore:
What if focus felt like Duolingo meets Headspace — but wrapped in a cozy, character-driven experience?
Many productivity tools feel cold, clinical, or overly minimal. They prioritize efficiency but neglect emotional engagement. Mind Meow flips that dynamic by introducing a cute cat mascot as a guide — creating a sense of companionship and reward throughout the experience.
The goal wasn’t just to build a timer. It was to design an environment where micro-interactions, streaks, and progression mechanics make consistency feel satisfying and joyful.
Experience & Interaction Design
Game Mechanics Meet Mindfulness
The experience blends brain-training and focus tools into a unified, mobile-first interface:
An interactive animated cat guide that responds to taps and offers encouragement
Memory Match (6-pair emoji animal game)
Focus Timer (Pomodoro-style with 5/10/15/25 minute options)
Daily streak tracking and circular progress indicators
Playful transitions and bouncy animations
The design system uses warm cream backgrounds, coral/orange accents, and soft teal contrasts to maintain visual comfort while keeping energy high. Rounded shapes and subtle motion reinforce the app’s playful personality.
I focused heavily on micro-interactions — tapping the cat, completing a match, finishing a focus session — to create dopamine moments that reinforce habit-building. Every action gives feedback. Every interaction feels alive.
Development & System Thinking
From Interface to Implementation
Mind Meow was developed as a modern web application using:
Vite
TypeScript
React
shadcn-ui
Tailwind CSS
The project challenged me to think beyond visual design and into scalable component architecture. I structured reusable UI components for timers, progress rings, and game states, ensuring the system could easily expand (e.g., the upcoming Word Puzzle feature).
This project demonstrates my ability to bridge playful brand identity with real product execution — designing emotionally engaging interfaces while maintaining clean, modular front-end development practices.
