Unwind
Personal OS.
A mobile-first productivity OS that gamifies discipline through XP mechanics, habit tracking, deep work timers, and financial awareness.
01 · Overview
Problem & Solution
The design challenge and the mechanism built to resolve it.
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
Screen by Screen
Seven key screens. Click any card to reveal design decisions.
Screen 01
Focus / Today
Tap to flip →
Design Notes
Focus / Today
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.
← Tap back
Screen 02
Progress / Metrics
Tap to flip →
Design Notes
Progress / Metrics
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.
← Tap back
Screen 03
Finance / Capital
Tap to flip →
Design Notes
Finance / Capital
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.
← Tap back
Screen 04
Daily Reflection
Tap to flip →
Design Notes
Daily Reflection
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.
← Tap back
Screen 05
Ship Feed
Tap to flip →
Design Notes
Ship Feed
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.
← Tap back
Screen 06
Skill Trees
Tap to flip →
Design Notes
Skill Trees
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.
← Tap back
Screen 07
Identity / Profile
Tap to flip →
Design Notes
Identity / Profile
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.
← Tap back
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."
06 · Stack
Architecture Q&A
Technical questions a senior reviewer would ask — answered from the source.
Q01
Why centralise all XP state in a single addXp callback?
Answer
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.
Q02
Why CSS custom properties rather than Tailwind config tokens?
Answer
CSS custom properties allow runtime dark/light switching via a single classList toggle. Tailwind tokens are compile-time only.
Q03
Why a full-screen overlay nav instead of a bottom tab bar?
Answer
Nine destinations exceed the five-item cognitive maximum for a tab bar. The overlay preserves full viewport height for timer and heatmap components.
07 · Decisions
Trade-off Table
Five architectural decisions, with the alternatives that were on the table.