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.
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 — Today's View with Next Best Action, task queue, and progress ring
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.
VibeCoding workflow — iterative prompt engineering cycle used to develop FocusFlow
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.