Role : Product Designer, UX/UI, Full-Stack Developer
Stack : React, Vite, Supabase, Claude API, Vercel
Timeline : Built in days using AI-assisted development
1. The Problem
Most people don't choose their life. They fall into it — a job that seemed sensible at 22, a city they never left, habits built around survival rather than intention. They know something is off. They just don't know where to start.
The tools that exist are either too shallow (personality quizzes, Instagram affirmations) or too clinical (therapy, life coaching at €200/hour). There's nothing in between that takes you seriously, uses real psychology, and actually helps you move.
I wanted to build that thing.
2. The Concept
Unmap is a 6-stage personal development web app that guides users through a structured psychological journey — from understanding where they are, to designing the life they actually want.
The name means what it says: unmapping the life you were handed, so you can map the one you choose.
The product is built on **85 psychological frameworks** across 7 clusters — identity, blocks, meaning, philosophy, behaviour change, lifestyle design, and location. Every AI reflection is informed by real frameworks: Logotherapy, Design Your Life, IFS, Polyvagal Theory, the Cashflow Quadrant, Blue Zones, Essentialism.
The frameworks don't show as jargon. They show as insight.
3. The 6 Stages
Where Are You
Wheel of Life across 8 dimensions
What Happened
Blocks diagnostic — universal, not trauma-specific
Who Are You
Values, energy, identity ceiling, strengths
Where Do You Want to Be
1-year, 3-year, and uncensored vision
How Do You Get There
Career vehicle, financial runway, first move
Where In The World
Location matching based on lifestyle needs
4. Design Decisions
The Path
The biggest design decision was the winding path illustration that runs behind every screen. It's not decorative — it's the product's metaphor made visible. You're walking a path. Every question is a step. Every stage completion moves you further along it.
The path is an SVG that fills with colour as you scroll on the landing page, and persists as a fixed background throughout the entire app. By the time you reach Stage 6, you've walked the whole thing.
Pastel Mesh Gradients
The colour system was designed to feel warm, modern, and human — not clinical or corporate. The hero stat cards use mesh gradients: coral-to-lavender for Journey Progress, sky-to-mint for Point B Clarity. Each of the 6 stage cards has its own pastel tint: soft blue, coral, lavender, mint, yellow, teal.
The brand colour is turquoise `#2DD4BF` — the colour of clarity, water, forward motion.
The Wheel of Life
The original Wheel of Life was a radar chart — functional but ugly. I redesigned it as a custom SVG pie chart where each of the 8 life areas is an equal segment (45°), filling from the centre outward proportional to the score. Each segment has a unique pastel colour. Labels with bold scores float outside.
The result is a visualisation people want to screenshot.
Gradient Sliders
Replacing 10 uniform buttons with a single gradient slider per life area was a UX instinct that paid off. One thumb drag instead of 10 decisions. The gradient runs from pink/lavender at score 1 to brand teal at score 10. More human, more satisfying, less decision fatigue.
The Reflection Card
Every Claude reflection appears in Lora italic — the emotional font of the app. Below it, framework citation pills show which psychological frameworks informed the reflection: "Informed by: FIRE Movement · Cashflow Quadrant · Essentialism."
This turns invisible psychology into visible depth. Users understand they're not talking to a chatbot — they're talking to 85 frameworks distilled into one response.
5. Technical Architecture
Stack
Frontend: React 19 + Vite, Tailwind CSS, Zustand
Backend: Supabase (PostgreSQL, Auth, RLS)
AI: Anthropic Claude API (claude-sonnet-4)
Deployment: Vercel with GitHub CI/CD
Mobile: PWA with iOS home screen support
RAG Integration
The most important technical decision was building a RAG (Retrieval-Augmented Generation) system using the 85-framework library.
Every Claude API call injects:
1. Unmap's tone rules and forbidden word list
2. The user's full accumulated profile (all answers from every completed stage)
3. Stage-specific framework context (3-4 frameworks most relevant to the current stage)
The result: every reflection is grounded in real psychology AND personalised to the specific human answering. The system prompt for Stage 4 injects Design Your Life, Logotherapy, and Self-Determination Theory. Stage 5 injects the Cashflow Quadrant, FIRE Movement, and Essentialism.
Database Schema
profiles — user profile, stage progress, point_b_clarity, roadmap_plan
wheel_scores — 8 typed columns for life area scores
stage_answers — JSONB per stage (flexible, no migrations needed)
reflections — all AI reflections with stage, cycle, created_at
checkins — daily mood scores with notes
Row-level security on every table. Auto-create profile trigger on signup. Fire-and-forget sync pattern — UI never waits for database writes.
The Reflection Pipeline
User completes stage answers
→ buildSystemPrompt(userProfile, currentStage)
→ injects full profile from all previous stages
→ injects stage-specific frameworks from library
→ Claude API call
→ Parse response + extract FRAMEWORKS marker
→ Display reflection in Lora italic
→ Display framework pills below
→ insertReflection(userId, stage, content) → Supabase
Point B Clarity Score
After Stage 4, a `calcPointBClarity` function scores all 10 vision answers (empty=0, short=1, medium=2, detailed=3) and normalises to 0-100%. This live metric on the dashboard shows users how fleshed-out their vision is. The score updates as they add more detail.
6. Key Product Moments
The reflection card after onboarding —
The first time Claude names something true about you using your exact words. This is the moment users decide to trust the product.
Is that who you actually are, or who you learned to be?
Stage 3 identity question. Where someone stops and goes quiet. The question that makes people cry in a good way.
The uncensored vision
Stage 4's final two questions: "If you couldn't fail, what would you build?" and "The life you want but haven't let yourself say out loud yet." Showing the user's own words as pull-quotes before Claude's synthesis is the best UX decision in the product.
The 4-week roadmap
Generated by Claude after Stage 5 using the user's actual answers. Week 1: Portfolio Foundation. Week 2: Market Testing. Week 3: Skill Positioning. Week 4: Income Pipeline. Specific. Real. Theirs.
7. AI-Assisted Development
Unmap was built using Claude Code as the primary development engine. The workflow:
1. Product decisions and architecture in conversation with Claude
2. CLAUDE.md project bible created — tech stack, design system, component rules, database schema, tone rules
3. Claude Code reads CLAUDE.md on every prompt for consistency
4. Human reviews, approves, tests — never manually configures
This is not vibe coding. It's a disciplined human-AI collaboration where the human holds product vision and the AI executes with senior engineer quality. The stale closure fix, the RLS policies, the fire-and-forget sync pattern — Claude Code wrote production-grade code throughout.
The result: concept to live deployed product in days.
8. V2 Vision- The Spiral Model
The current product is linear: 6 stages, complete, done.
But real growth isn't linear. Nobody does Stage 1 then Stage 2 and arrives healed. They spiral. They revisit. Stage 3 identity work changes how they read their Stage 1 wheel. Stage 5 financial reality changes their Stage 4 vision.
V2 is the growth spiral:
Cycle 1 — Surface level. Where are you, what's in the way, who are you.
Cycle 2 — Deeper. The wheel scores shift. The blocks get more specific. The identity gets more honest.
Cycle 3 — Integration. Vision, vehicle, and location all start to align.
Each cycle uses more of the 85 frameworks because we know more about the person. Framework selection becomes
dynamic — triggered by answers, not stage number.
If someone's inner voice said "you're not smart enough" in Stage 2, inject Transactional Analysis and Coherence Therapy into their Stage 3 reflection. If someone said freedom means "not answering to anyone", inject Self-Determination Theory autonomy into Stage 5.
The longer someone uses Unmap, the more precisely it sees them.
9. What I learned
Building Unmap taught me that the gap between a good idea and a working product is smaller than ever — but only if you're willing to make real decisions at every step.
The product reframe that mattered most: Stage 2 was originally "What Happened To Me" with a CPTSD diagnostic focus.
I changed it to "What's In The Way" — a universal blocks diagnostic that works for everyone. Neither trauma survivors nor non-trauma users feel othered. That's a product decision, not a technical one. Those are the decisions that make something real.
The design decision that mattered most: showing the user's own uncensored words as pull-quotes before Claude's synthesis in Stage 4. Person reads their own truth first. Then Claude names it. That sequence is everything.
The technical decision that mattered most: JSONB for stage answers. Flexible schema that survives iteration without migrations. V1 shipped, V2 can evolve.
10. The Bigger Vision
Unmap is the first product in a suite. The long-term vision is an ecosystem that meets people wherever they are in their journey:
DIRECTION — Unmap
HEALING — CPTSD Companion App (name TBD)
RELOCATION — Nomad Location Engine
BELONGING — Community Platform
The mission is simple: give people the clarity, tools, and courage to leave the life that was handed to them and build the one they actually want. Freedom is not a luxury. It is a human need.
"It starts with a dream. I learned that from people who made it. And I believe I can make it." — Karolina