AI Product Design · 2025
Reframe
Observe and reframe your thoughts
AI Product Design · 2025
Observe and reframe your thoughts
AI Product Design
CBT
PWA
AI Integration
Mobile UX
Behavioral Design
Product Design · Engineering
2025
A focused PWA for moving through a single difficult feeling — emotion check, automatic thought, distortion identification, reframe, and a measurable before/after. CBT structure delivered in under a minute, with AI assistance only where it actually earns its place.
Stack
The kit that built this project — from research to deploy. AI tools called out separately because they shape how the work gets made, not just what it's made of.
AI
Design
Code
Infrastructure
Most CBT apps fail at the same point: they're too much. Onboarding flows, courses, streaks, progress bars, weekly reports, gentle reminders to come back. By the time you're ready to actually examine the thought that's bothering you, you've forgotten what it was. Reframe is built for the opposite premise — open the app, name the feeling, walk five steps, close it. The whole thing fits in the moment of needing it.
Five screens, walked through in order, each one doing exactly one thing. The structure is taken straight from Beck's classic Thought Record protocol — the design contribution is making it fit one-handed on a mobile screen without losing the substance.
01 — Name it
Eight emotion pills, intensity slider, continue. No mood scoring, no journal prompt, no 'how was your day' wrapper. The first screen exists to get a label and a number with as little friction as possible.
02 — Surface the thought
A textarea and an + Add this thought button. The user can list multiple thoughts in one session — the design assumes that one feeling often comes with several thoughts attached, and they should all get examined.
03 — Spot the distortion
The thought from step 2 pinned at the top, with suggested and other cognitive distortions below. Auto-detected distortions are pre-selected based on keyword analysis. The user can accept, reject, or add others.
04 — Reframe
The screen where AI earns its place. Selected distortions stay visible, and a balanced counter-thought field opens below. Claude offers a draft counter based on the user's exact words — not a generic affirmation. The user can accept, edit, or rewrite.
Most of Reframe is structure, not intelligence. Adding AI to the wrong steps would actively make the product worse. The model is invited in at exactly two points:
When the user lands on step 3, a fast model pass scans the thought text for linguistic markers of common distortions. 'Always' / 'never' suggests overgeneralization. 'Should' suggests should-statements. 'Will think' / 'must be' suggests mind-reading. The model pre-selects matches, the user confirms or rejects. This shaves 30 seconds off the slowest step in the flow.
After the user has written what they're thinking and selected the distortions, Claude is given the original thought, the distortions, and an instruction to draft a single rational counter — grounded in the user's own language, never generic, and never sounding like an affirmation. The user can accept, tweak, or write their own. The counter is a starting point, not an answer.
No streaks. No reminders. No history view that turns this into a journaling product. No social sharing. No 'how are you feeling today?' opening screen. Each of these was tested at some point and removed because they pulled the user out of the moment they were trying to use the app for.
Reframe is the product I built when I realized that the most useful tool I could give myself was one that didn't try to retain me. The success metric isn't time-in-app — it's the gap between feeling stuck and feeling slightly less stuck. If you forget the app exists for two weeks and then open it the next time you need it, that's the goal.
© 2025 Hanna de Vries