Personal
OS.
A mobile-first productivity operating system that turns discipline into identity through XP loops, habit scaffolds, deep-work sessions, shipping rituals, and financial awareness.
The product, underneath the streak.
Four panels: the behavioural problem, the operating-system answer, the principle behind the interface, and the frontend scope of the case.
Problem
Productivity tools are fragmented across apps, causing context-switching and no unified picture of discipline across health, work, money, and self-belief.
Solution
A single ambient operating system that rewards daily evidence. XP, streaks, heatmaps, shipped work, and financial visibility all feed one identity loop rather than five disconnected dashboards.
Principle
Visible progress is only useful when it feels like proof of self, not admin.
Scope
Frontend-only React PWA. Local state, CSS custom properties, no backend, and a full design-to-code case study.
Discover. Define. Develop. Deliver.
Four phases. The widening then narrowing happens twice: once on the behavioural problem, once on the product system that makes proof visible.
Discover
Audit the split between tasks, habits, money, learning, and shipped work.
Define
Reframe productivity as evidence of identity, not completion admin.
Develop
Prototype screen states for Today, Focus, Progress, Capital, Ship, and Profile.
Deliver
A frontend-only React PWA case study with local state and live system dials.
Ten states, one identity loop.
Each card flips. The front shows the screen state. The back explains how the interaction turns action into evidence.
Welcome
Identity-first entry
Welcome
The first screen frames the app as an operating system, not another checklist. The user chooses the mode of intent before seeing any task density.
Today
Command centre
Today
Today is the home base. XP, streak, focus and habits sit in one field so momentum is legible without making the user open five tools.
Focus
Deep work timer
Focus
The timer is promoted because focus is the behavioural hinge. Saving a session creates immediate XP and a durable proof event.
Habits
Daily evidence
Habits
Habit cards avoid moralising. Each completion is a small receipt that rolls up into identity rather than a pass/fail report.
Progress
Pillars + heatmap
Progress
Rings and heatmaps are reassurance tools. They show trend and breadth without turning the product into a spreadsheet.
Capital
Financial stability
Capital
Finance belongs in the same system because invisible money pressure breaks discipline. The app makes reserves, bills and income part of the same self-trust loop.
Ship
Public proof
Ship
Shipping is intentionally low friction: one field, one button, immediate reward. The ritual matters more than the admin around it.
Learning
Skill tree
Learning
Learning gives long-term structure to daily actions. Skill paths make scattered practice feel connected.
Review
Reflection loop
Review
Reflection closes the loop. The product is not only collecting actions; it is helping the user interpret them as identity evidence.
Identity
Profile receipt
Identity
The profile is not a settings screen. It is narrative closure: XP, streaks, milestones and unlocked markers show who the user is becoming.
We asked for a checklist. We should have asked for evidence .
Every system is a dial.
Move the controls and watch the system respond. Reward, pressure, progress, and tone are the levers that decide whether productivity feels motivating or oppressive.
Tune the identity loop.
Move a slider to the system responds. The balanced values: 7.3, 56, calm.
Clarity was the brief.
Five panels, five product rules. Each one keeps the reward loop calm enough to use every day.
Thumb-first actions
Reward contrast
Visible focus
Reduced motion
Recovery feedback
Live region
<div role="status" aria-live="polite"> Assistant is typing </div>
Designed for the thin parts of discipline.
Five life pillars, three operating states. The system has to work when motivation is high, when attention is split, and when the user has almost nothing left.
Focus
Body
Money
Output
Mind
A stack chosen for demonstrability.
A deliberately lean stack chosen to keep the behavioural idea legible. The app is fast to run, easy to fork, and honest about being a frontend-first prototype.
Why centralise reward state around XP?
A single reward pathway keeps the mental model clean. Every action lands in one system, so the user experiences continuity and the code avoids competing state graphs.
Why CSS custom properties?
The visual system depends on runtime mood shifts, glows, and shared accent behaviour. Custom properties keep those dials live instead of compiling them away.
Why a full-screen menu instead of bottom tabs?
The app wants more than five destinations and still needs vertical room for deep work, heatmaps, and dashboard cards. An overlay menu protects the content hierarchy.
Three decisions that shaped the feel.
Three decisions that shaped how the product feels, not just how it looks.
Identity over task management
The core design move was philosophical: stop treating productivity as checklists and start treating it as evidence. Every screen exists to answer one question: what proof did you create today?
Calm reward architecture
The interface borrows from games, but not their noise. Rewards are visible, immediate, and cumulative, without turning the app into a casino dashboard.
One visual language for life pillars
Health, work, finance, reflection, and shipping all use the same card grammar. That consistency makes the app feel like an operating system rather than a folder of mini-tools.