UX / UI Design · VibeCoding · Web Application

FocusFlow —
Executive Function OS

RoleUX Designer (Prompter)
Project TypeVibeCoded Web App
ToolsClaude AI, Figma, HTML/CSS/JS
Year2026

Problem

People with ADHD and executive function challenges often struggle with traditional productivity tools. Standard task managers present an overwhelming wall of options, offer no guidance on what to do next, and treat all energy levels the same. This can lead to decision paralysis, abandoned task lists, and increased anxiety around getting things done.

The challenge was to design a productivity interface that adapts to the user's current cognitive state, reduces decision fatigue, and provides gentle structure without feeling rigid or punishing.

Project Overview

FocusFlow is a web-based productivity application designed specifically for neurodivergent users. It reimagines task management through the lens of executive function support, providing an adaptive interface that responds to the user's energy level and reduces cognitive overhead at every step.

The application features an energy-adaptive layout system that simplifies or expands the interface based on how the user is feeling. At "Low" energy, distractions are hidden and only the single next action is shown. At "Overwhelmed," everything clears except the Brain Dump — a free-form capture tool. The "Next Best Action" card surfaces one prioritized task at a time, removing the need to scan and choose from a full list.

Additional features include guided task templates with step-by-step walkthroughs for common routines (morning routine, deep work, inbox clearing, overwhelm reset), a built-in focus timer with sprint presets, a calendar view, a Spotify integration for focus playlists, weekly activity heatmaps, and a supportive assistant with ADHD-specific tips.

FocusFlow dashboard

FocusFlow dashboard — Today's View with Next Best Action, task queue, and progress ring

Key Features

Energy-Adaptive UI
The interface simplifies at Low energy and clears entirely at Overwhelmed, showing only what the user can handle right now.
Next Best Action
Surfaces one prioritized task at a time, removing the anxiety of scanning a full list to decide what to do next.
Brain Dump
A free-form capture tool for unloading thoughts without judgment. Ideas can be converted to tasks with one tap.
Guided Templates
Pre-built step-by-step routines (Morning, Deep Work, Inbox, Overwhelm Reset) with interactive guided walkthroughs.
Focus Timer
Sprint presets from 5 to 45 minutes. Short enough that the brain won't resist starting, with streak tracking for momentum.
Built-in Assistant
A supportive chatbot with ADHD-specific productivity tips, feature guidance, and encouragement — never judgment.

VibeCoding Process

This project was built using VibeCoding — an AI-assisted development approach where the designer acts as a "Prompter," guiding an AI through iterative rounds of prompt engineering to generate, review, and refine the final product. Rather than writing code directly, I focused on providing clear creative direction, UX requirements, and detailed feedback in each round.

The process involved multiple rounds of prompt reiteration. Each round began with a specific goal (such as adding the energy-adaptive layout system or building the guided template walkthrough), followed by a review of the AI's output, and then targeted feedback to refine the result. Features that didn't meet the design intent were revised or re-prompted from scratch. This iterative cycle continued until each component met the desired level of quality and usability.

The workflow diagram below illustrates this iterative process, showing how the Prompter directs the AI, reviews each output, and chooses to accept, revise, or reject before moving on to the next iteration.

Prompter Define UX goal & constraints Energy system, templates, ADHD focus AI generates code HTML/CSS/JS prototype output Review output Accept / Revise / Reject? Revise Iterate Refine prompt feedback loop Reject Re-prompt Reset context Accept AI refines output Incorporates Prompter feedback Satisfied? Prompter approves? No Yes Prompter finalizes Approve, test, ship Ready — FocusFlow shipped Prompter action AI action Decision point Feedback loop

VibeCoding workflow — iterative prompt engineering cycle used to develop FocusFlow

Final Deliverable

Fully functional web application built through VibeCoding with vanilla HTML, CSS, and JavaScript. Features local storage persistence, dark mode, customizable accent colors, Spotify embed integration, and all interactive features described above.

Interactive Demo
Back to all projects