A workflow that reshapes long-form material into a focused, digestible learning experience tailored for ADHD learners.
User Testing
Prototyping
UX/UI
App Design
User Research
Focus Flow
My Role:
UX/UI Designer and Researcher
Team:
Tong & Madison
Project Duration:
8 Weeks
Goal:
Using Google's AI tools create an application that
Tools:
Figma
Gemini Canvas
Google AI Studio
Firebase Studio
Imagine you're a student with ADHD…
You sit down, ready to study…
You start reading your notes…
And you get overwhelmed…
Then you get distracted…
And more distracted…
Still distracted…
Introduces Focus Flow
The Good
Fast journey generation time
"The loading game is a clever way to hold users' attention"
Modular lesson segmentation made learning more engaging
The Bad
Image generation doesn't work
Confusing UX on the launch page
Pomodoro timer is confusing
Missing back buttons in the learning modules
Key Areas of Improvement
Create clearer access points to start learning journeys
Users were confused with the button options to start their journey and often clicked wrong buttons.
Give users the option to go back when in the learning modules
Users often wanted to reference the lesson when completing the quizzes but were unable to go back.
Add visuals to lessons
The current model we were using was unable to produce images without significantly increasing load time.
Improve the Pomodoro timer
Users were not drawn to start the timer, and when clicking into the break, they were unable to return back to the lesson.
Improve overall UI
ex. the dashboard text was low contrast, and the moving wave at the bottom of the screen was distracting.
Prototype 2
Improved CTA on launch page
Clear buttons to start Focus Flow vs. Assignment Helper.
Image generation
Improved image generation by reading and editing documentation to fix bugs
Improved overall UI
Used a soft gradient background and improved contrast between text elements and the background.
Back to our friend…
You sit down, ready to study…
You start reading your notes…
And you get overwhelmed…
Conclusion
The Good
Images generate fast and accurately
Added Firestore to store past journeys
Intuitive access points to start Focus Flow and Assignment Helper
Option for user to select model type so user has more say in response time/accuracy
Still Needs Work
Pomodoro timer still the same
Shared journey dashboard across all users
Accuracy of content in modules and quizzes
Reflection
Working on Focus Flow taught us a lot about designing with clarity and user needs at the center. Our goal was to create a tool that helps students move through assignments in a structured, step-by-step way, so the process began with defining the problem, mapping a simple user flow, and building an initial prototype. As we iterated, we focused on improving navigation, simplifying CTAs, tightening the UI, and reducing moments of confusion that could overwhelm users. The shift from Prototype 1 to Prototype 2 showed how much value comes from refining small details; contrast, layout, flow, and functionality all directly shaped how intuitive the experience felt. Overall, the project helped us understand the importance of iteration, user-friendly structure, and designing with real struggles in mind, especially for students who deal with distraction or cognitive overload.