The Redesign Manifesto: From 55 Pages to a Product

I counted the pages in Life Hub yesterday. Fifty-five. Fifty-five separate routes, each with its own template, data fetching logic, and design decisions made in isolation. Some of them are genuinely useful. Some of them I have not opened in weeks. A few I had forgotten existed.

Building features is easy. Curating them is the actual product work. This is the plan.

The Audit

I categorized every page by usage frequency. The results were uncomfortable.

Daily Use (5 pages)

• Today: the closest thing to a home screen. Morning context, quick actions, daily priorities.
• Journal: daily entries with sentiment tracking.
• Life Wheel: pillar scores, sub-score breakdown, trend sparklines.
• Goals: active goal tracking with milestones and progress.
• Actions: next best actions prioritized by the scoring engine.

Weekly Use (8 pages)

• Digest, Health, Insights, Streaks, Relationships, Finance, Settings, Council

Occasional Use (10 pages)

• Trends, Experiments, Projects, Liam, Romantic, Morning, Fitness, Calendar, Masterpiece, Achievements

Rarely or Never Used (32 pages)

• Timeline, Activity Intel, Year Review, Thoughts, Ideas, Optimize, Goal Review, Data, LLM Costs, Screen Time, Chat, Conflicts, About Me, and others

Thirty-two pages that I rarely touch. That is 58% of the app. They exist because I could build them, not because I need them every day.

The Consolidation Strategy

Merge the Daily Hub

Morning, Today, and Actions are three pages solving one problem: "what should I focus on right now?" Morning has a ritual checklist and weather. Today has priorities, streaks, and a daily snapshot. Actions has a ranked list from the next-action engine.

These should be one page with collapsible sections. When you open Life Hub in the morning, you see your ritual checklist, today's weather, your top priorities, and the three most important actions, all in one scroll. No navigation required.

Collapse the Tracking Pages

Journal, Thoughts, and Ideas are three flavors of text entry. Journal is dated entries. Thoughts is quick captures. Ideas is... also quick captures but with tags. These should be a single "Capture" page with a type selector.

Merge Health Views

Health, Fitness, and Screen Time all display body and activity data. Liam has its own health section. These do not need to be four separate destinations. A single Health page with tabs (Body, Fitness, Screen, Baby) would reduce three nav items to one.

Absorb the Ghosts

Timeline, Activity Intel, Year Review, Data, LLM Costs, About Me, Conflicts: these are either diagnostic pages (useful for me as a developer, not as a user) or novelty features I built once and forgot. They should either move to a collapsed "Admin" section or be removed from the sidebar entirely, accessible only via the command palette (Cmd+K).

The Navigation Hierarchy

The sidebar should have three tiers:

Primary (always visible, 5-7 items)

These are the pages you use daily. They get icons and full labels:

• Home (merged Today/Morning/Actions)
• Journal (merged with Thoughts/Ideas)
• Life Wheel
• Goals
• Health (merged with Fitness)
• People (Relationships + Romantic)

Secondary (collapsed group, ~8 items)

Weekly-use pages that expand on click:

• Digest, Insights, Trends, Streaks, Finance, Calendar, Council, Experiments

System (icon-only or hidden)

Developer and admin pages, accessible via Cmd+K or a gear icon:

• Settings, Infra, Data, LLM Costs, Screen Time, Achievements

This takes the sidebar from 35 items to about 15, with a natural visual hierarchy that tells you where to go.

The Design System

Every page currently invents its own card style. Some use bg-gray-800/50, others use var(--bg-surface), a few use hardcoded hex colors. Padding varies from p-2 to p-6 on the same page.

The fix is a small set of shared components:

• StatCard: a metric with label, value, trend arrow, and optional sparkline
• ListCard: a section with header and scrollable items
• ActionCard: a call-to-action with icon, text, and button
• ChartCard: a wrapper for any Chart.js visualization

Four components covering 80% of the UI. Each uses the CSS variable system consistently, supports light and dark themes, and has predictable spacing. Pages become compositions of these components rather than bespoke HTML.

One Interaction Pattern

The current codebase uses Alpine.js, HTMX, and raw fetch depending on which page you are on. Each pattern has merits, but using all three creates cognitive overhead for both the developer (me) and the code (incompatible component interfaces).

The pragmatic choice is HTMX-first for most interactions (forms, toggles, filters) with Alpine.js reserved for complex client-side state (Life Wheel chart interactions, drag-and-drop reordering). Raw fetch gets eliminated entirely: anything it does, HTMX or Alpine does better with less code.

The Philosophical Shift

The deeper change is not structural. It is philosophical.

For fourteen months, the question was: what else can I track? Every new data source, every new metric, every new visualization got its own page because that was the fastest way to ship it. The app grew by accretion.

The new question is: what should I see right now?

That question demands opinion. It demands that I decide: when you open Life Hub at 7 AM, you see your sleep score, your top priority, and whether your burnout risk changed. You do not see 35 sidebar items and a choice paralysis problem.

A product has opinions. A junk drawer does not. The data layer already has opinions: the pillar scoring engine weighs metrics, detects anomalies, computes burnout risk. The presentation layer needs to inherit that confidence.

The difference between a feature collection and a product is curation. I built the features. Now I need to curate them.

This is part 3 of a 4-part series. Final post: the CI/CD pipeline that makes all of this shippable.