Unwind
Personal OS.
A mobile-first productivity OS that gamifies discipline through XP mechanics, habit tracking, deep work timers, and financial awareness.
01 · Overview
Project at a Glance
A single-page React application that transforms a complex productivity process into a gamified, habit-forming digital OS.
🎯 The Problem
Productivity tools are fragmented, causing constant context-switching and no unified view of discipline.
💡 The Solution
A single ambient OS with a gamified XP economy rewarding daily discipline across every life pillar.
⚙️ Design Principle
Visible progress is the most powerful habit reinforcement loop.
📐 Scope
Frontend-only React PWA — CSS custom properties, local state, no external data layer.
02 · Process
Double Diamond
How the problem was discovered, defined, developed, and delivered.
Stage 01
Discover
Identified that builders operate across health, work, finance, and learning simultaneously, but no single app reflected this cross-domain momentum.
Stage 02
Define
Core problem: no ambient interface makes total discipline visible as a single motivating number — the same loop that makes games compelling.
Stage 03
Develop
Prototyped three nav architectures. The full-screen overlay was chosen after nine destinations exceeded the tab bar cognitive ceiling.
Stage 04
Deliver
A mobile-first dark-mode PWA with nine views, rings, heatmap, XP economy, and level-up modal — in a single React component.
Competitive Audit
Evaluated Notion, Habitica, YNAB, and Forest. None unified all four life pillars into a single dashboard with a cross-domain progress signal.
Prototype Testing
Three navigation models were self-tested over two weeks. The overlay eliminated navigation anxiety and preserved full viewport height for timer and heatmap views.
XP Calibration
Values tuned through self-tracking: habits 5 XP, goals 10 XP, reflections 15 XP, shipping 20 XP. The 100 XP level targets one level per active working day.
03 · User Flow
App Walkthrough
Seven key screens. Tap any card to reveal the design rationale.
Focus
⚡ Deep Work
00:24:13
Workout
✓ Done
Meditate
0 days
Journal
✓ Done
Sunlight
0 days
The primary work surface. The deep work timer sits above habits to prioritize active focus over passive tracking.
Deep work timer is foregrounded above habits — focus sessions earn the highest XP-per-minute rate, guiding users toward deep work over passive tapping.
The 2×2 habit bento grid makes all four completion states readable at a glance without vertical scrolling — critical for one-hand mobile use.
Floating +XP text is anchored to the exact touch coordinate, creating a physical reward sensation connecting tap location to animation origin.
Pillars
Activity — 17 weeks
Cross-domain progress tracking that visually reinforces the whole-life discipline philosophy.
SVG stroke-dashoffset is computed from the circumference formula in JSX, making each ring's fill fully declarative with no third-party chart dependency.
Four pillars receive equal visual weight — no pillar is prioritised — reinforcing the whole-life discipline philosophy.
The heatmap is a 7-row CSS grid flowing column-first, matching GitHub's convention so the pattern reads instantly to a builder audience.
Resources
Net Income
£4,250
↑ +1,716 vs base
Bills
£1,820
Scheduled this month
Safety Net
£850/£1,700
A unified view of capital allocation, separating net income from scheduled bills and safety net progress.
The Net Income card carries a Brand Blue top-border to mark it as the primary metric; Safety Net uses neutral grey to indicate goal status.
A horizontal scroll tab bar provides four sub-views without a routing library, keeping the bundle lean and navigation gesture-native.
The safety net bar uses muted grey fill rather than blue, visually distinguishing goal progress from XP and skill progress.
Daily Review
A frictionless daily review flow capturing ambient mood and energy metrics.
Slider thumbs are 24px with a 44px effective touch zone, optimised for one-thumb operation in the natural mobile grip.
Saving a reflection awards a flat 15 XP regardless of slider values, tying the reward to the act rather than gameable scores.
The Early Shutdown XP badge is visible before the submit button, serving as a persistent motivational anchor throughout the form.
Ship Your Work
Public Accountability
Every ship earns 20 XP.
zaltt.com/case-study-01
2h ago · +20 XP
github.com/un-mesh/flow
Yesterday · +20 XP
A public shipping log that attaches the highest possible XP reward to shipping work.
Ship Feed awards the highest single-action XP at 20 points, making public shipping the most rewarded behaviour.
Previous shipments are rendered as a log below the input, providing social proof of the user's own output history.
The URL input carries a blue tint border at rest, signalling it is the primary action surface.
Knowledge
Architecture
Level 3
Stoicism
Level 1
Agentic AI
Level 2
Systems Design
Level 4
RPG-style learning progression reframing education as an open-ended skill tree.
RPG-style level-plus-tier labels frame learning as open-ended progression rather than completion, keeping motivation sustainable.
Progress bars are 3px tall — thinner than the finance bar — encoding that skill growth is slow relative to financial metrics.
The four categories reflect a real builder's interdisciplinary growth arc rather than generic productivity topics.
Identity
Milestones
The meta-layer of the OS, showcasing lifetime XP, unlocked levels, and earned milestone badges.
The level-up modal is a full-viewport blur overlay rather than a toast, communicating that levelling up warrants full attention.
Milestone badges use a 4-column grid, making locked badges visible and building a persistent inventory still to earn.
The Detach Session action uses muted text at the bottom, reducing accidental taps while remaining accessible.
04 · Accessibility
WCAG Audit
Six criteria — honest compliance status grounded in the source code.
2.5.3
Touch Target Size
Primary CTAs use w-full + py-3.5, meeting the 44×44px minimum. Secondary icon buttons use p-2 (~40px) and should be increased to p-2.5.
1.4.3
Contrast Ratio
Primary text (#F0EEE9 on #09090b) achieves ~18:1. The muted colour (#5E5B55) falls to ~3.1:1 on card surfaces and should be raised to #7A7570.
2.4.7
Focus Visible
focus:outline-none suppresses all browser defaults. A 2px solid #2F7CF6 outline must be added to every interactive element.
1.3.1
Info & Relationships
Headings use correct hierarchy. Habit tiles and goal items lack aria-checked or role=checkbox so screen readers can't convey toggle state.
2.4.11
Focus Not Obscured
The fixed 64px nav bar could obscure focused elements near the scroll top. A global scroll-margin-top: 80px on focusable elements would prevent this.
1.4.11
Non-text Contrast
SVG ring track achieves ~1.3:1 — below the 3:1 minimum. Raising to rgba(255,255,255,0.18) would meet this criterion.
05 · Inclusivity
Inclusive Design
Eight dimensions — honest assessment of current strengths and gaps.
Physical / Motor
StrengthFull-width CTAs and active:scale-95 feedback reduce precision demands. All primary actions are reachable with one thumb in the natural grip.
Visual
GapDark-mode only with no light-mode alternative. Users with photosensitivity or those outdoors have no accessible option.
Cognitive
StrengthOne task per view prevents overload. The persistent XP counter provides a progress anchor without requiring navigation away.
Auditory
StrengthNo audio features present. All state changes are communicated visually only, satisfying WCAG 1.1.1.
Keyboard / Switch
GapNo skip links, no defined focus order in the overlay menu. Users relying on keyboard cannot navigate efficiently.
Language / Literacy
PartialCopy uses domain-specific terms. Suits the target audience but excludes others. No i18n or RTL support.
Escalation Paths
GapNo error states, loading states, or in-app help defined. Onboarding and empty-state illustrations would reduce first-session abandonment.
Device / Context
PartialOptimised for mobile. Performance is strong. The backdrop-filter blur may degrade on lower-end Android hardware.
"The highest-leverage accessibility improvements for Unwind. are a light/dark toggle and explicit focus styles — two CSS changes that would open the app to significantly more users without any architectural work."
04 · Stack
Technology Stack
A deliberately minimal stack — selected for zero build-step demonstrability.
React 18
useState · useEffect · useRef
CSS Custom Properties
Runtime dark/light theme switching
Framer Motion (none)
Native @keyframes and transitions
CSS Grid
7-row column-first flow for heatmap
Why centralise all XP state in a single addXp callback?
Centralising XP in App.jsx with useCallback ensures the reference stays stable, preventing stale closures. The level-up side-effect also fires exactly once regardless of trigger.
Why CSS custom properties rather than Tailwind config tokens?
CSS custom properties allow runtime dark/light switching via a single classList toggle. Tailwind tokens are compile-time only.
Why a full-screen overlay nav instead of a bottom tab bar?
Nine destinations exceed the five-item cognitive maximum for a tab bar. The overlay preserves full viewport height for timer and heatmap components.
05 · Trade-offs
Considered Trade-offs
Three architectural choices that define the character of this project.
01 —
Accessibility First
Every element was designed against WCAG 2.2 before any visual styling.
02 —
Chat as Progressive Disclosure
The chat metaphor reveals exactly one question at a time.
03 —
Runtime Office Hours
checkOfficeHours() computes availability from device clock — no network call required.
| Attribute | Decision Made | Alternative Considered |
|---|---|---|
| State management | useState + prop drilling | Zustand or Redux |
| CSS System | Vanilla CSS Custom Props | Tailwind CSS or Styled Components |
| Navigation | Fixed 60px overlay header | Bottom tab bar footprint |
| SVG Charts | Radius offset formula in JSX | Recharts or Chart.js |