Project
Gentle Focus — Calm Productivity Web App
Role
Product Design · UI/UX · Interaction Design
Approach
Vibecoding · AI-assisted workflow · Prompt-driven iteration
Tools
Workflow
AI → Figma refinement → Code → Deploy
Concept & Approach
Gentle Focus started as an exploration into how productivity tools can feel less stressful and more supportive. Instead of following a traditional UI workflow, I experimented with a vibecoding approach, using AI tools like ChatGPT, Claude, along with both Figma for manual design refinement and Figma Make AI for generating and iterating on UI structures. This shifted my role from designing static screens to shaping a system-driven experience, where prompt engineering and design intent guided the overall outcome.
Research & Product Thinking
Through analyzing tools like Forest and similar task management systems, I identified a reliance on performance-driven mechanics such as streaks, timers, and penalties. While effective, these patterns often introduce pressure and reduce motivation. I reframed the problem using a behavioral design approach, focusing on positive reinforcement, emotional UX, and cognitive ease, where even starting a task is considered meaningful progress.
Experience Design & Flow
The product was designed around user states and transitions, not just screens. I mapped out scenarios such as starting a task, pausing, extending time, and completing work, ensuring each interaction felt intentional. Features like the Flow Score system, reflection prompts, and optional rewards were introduced to create a non-punitive feedback loop. Instead of focusing on efficiency alone, the system prioritizes how users feel throughout the journey, making the experience calm, forgiving, and continuous.
Execution & Outcome
While AI generated the initial UI, it required significant refinement to reach a usable state. I focused on interaction clarity, layout consistency, and motion behavior, including character-based feedback and subtle animations to enhance emotional engagement. The project was taken from concept to a fully functional live web application, deployed using GitHub and Vercel. This process reinforced the importance of combining AI speed with strong product thinking to create meaningful experiences.