Future Studio — Vision → Mission → SMART Goals¶

Design Guide & Implementation Reference¶

1. Why This Matters¶

Most 15-year-olds (and adults!) stare at a blank page when asked "What's your vision?" and shut down. The solution is never start from nothing — always derive the next layer from the one before it, with the ikigai profile as the root.

Personality Assessment
        ↓
   Ikigai Profile  (What you love · What you're good at · What the world needs · What you can be paid for)
        ↓
   Ikigai Statement  ("Your Path-Aligned Ikigai Statement" — auto-generated in Step 3)
        ↓
     VISION       (Who do you want to BECOME in 5 years?)
        ↓
     MISSION      (HOW will you show up every day to get there?)
        ↓
  SMART GOALS     (WHAT specific, measurable outcomes mark progress per Life Pillar?)

Each layer is auto-seeded from the previous one. Users refine, not invent from scratch.

2. The Three Layers — Explained Simply¶

Layer 1 — VISION (the Dream)¶

"If everything went right, what does my life look like in 5 years?"

Written in first-person, present tense as if it has already happened ("I am...", "I lead...", "I've built...")
Grounded in the Ikigai Statement — the vision is essentially the ikigai statement made personal and vivid
Time horizon: 5 years
One paragraph, 3–5 sentences
Auto-fill formula: "In 5 years, I am known for [ikigai.love]. I use my strength in [ikigai.goodAt] to help [ikigai.worldNeed]. I am living my [selectedPath] path with confidence, contribution, and momentum."

Teen-friendly prompt: "If your best friend described your life in 5 years and everyone said 'that's so you!' — what would they say?"

Layer 2 — MISSION (the Daily Commitment)¶

"What do I commit to doing every day to turn this vision into reality?"

Focuses on character and habits, not outcomes
References the user's strengths (ikigai.goodAt) and passion (ikigai.passion)
Starts with "Every day, I will..." or "My purpose is to..."
Derived by asking: "What qualities and actions does the person in my Vision live by daily?"
Auto-fill formula: "Every day, I commit to [applying ikigai.goodAt] with intention and consistency. I serve [ikigai.worldNeed] through my [selectedPath] path by [ikigai.passion]. I measure my days by the quality of my effort, not just my results."

Connection rule: Mission should contain the same core values as the Vision and the same strengths as the Ikigai Statement. If the three don't share language, something is misaligned.

Teen-friendly prompt: "What kind of person do you want to be EVERY DAY, not just on your best day?"

Layer 3 — SMART GOALS (the Scoreboard)¶

"For each area of life, what specific, measurable outcome proves I'm on track?"

One SMART Goal per Life Pillar (Faith · Health · Family · Career · Finances · Growth).

The SMART Formula (adapted for teens)¶

Letter	Meaning	Plain English	Example
S	Specific	Be exact — no vague wishes	❌ "Get fit" → ✅ "Run 3km without stopping"
M	Measurable	Numbers, dates, clear proof	"3km", "by June", "saved RM500"
A	Achievable	Stretch goal but realistic	Not "become an Olympic athlete in 6 months"
R	Relevant	Connects to your Vision & Mission	Does this bring you closer to your 5-year self?
T	Time-bound	Give it a deadline	"By the end of this year" / "In 90 days"

SMART Goal Template per Pillar:

Goal (Specific + Achievable):
  "By [date/time], I will [specific achievement]..."

Measurable — Success Signal:
  "I'll know I've achieved this when [observable proof]..."

Timeline (Time-bound):
  "I will reach this by [month/year]..."

Relevant check:
  This connects to my Vision because... [link back to vision language]

3. Guided Flow Design (UX Principles)¶

Principle 1: Derive, Don't Invent¶

The system should always offer a "Start from my Ikigai" seed button. Users click → a suggestion fills in — then they edit it. Empty inputs are the enemy.

Principle 2: Show the Chain¶

At every step, show the previous layer in a locked card above:

While writing Mission → show their Vision at the top
While writing Goals → show their Mission at the top (and Vision on demand)
This creates a visual chain of accountability

Principle 3: Sentence Starters¶

Replace blank textareas with sentence starters:

Vision: "In 5 years, I am ____________________"
Mission: "Every day, I commit to ____________________ so that ____________________"
Goals: "By [date], I will ____________________"

Principle 4: Concrete Examples (by Archetype)¶

Show a single relevant example before each field — pre-filled based on the user's archetype. Example for a Visionary archetype:

Vision example: "In 5 years, I've built a platform that helps students access quality education. I lead a team of 8 and speak at conferences. I'm financially independent and wake up excited every morning."
Mission example: "Every day, I commit to learning one new thing and sharing it with someone. I show up with curiosity and courage, even when it's hard."

Principle 5: Plain Language for Teens¶

Avoid corporate jargon. Swap:

"5-Year Strategic Objective" → "Your Big Dream (5 years)"
"Alignment Anchor (Success Indicator)" → "How will I know I'm winning?"
"Capability Gap" → "One skill I need to build"
"Life Blueprint" → "My Life Plan"

4. SMART Goal Builder — Per Pillar Card Design¶

Each pillar card should have three clearly-labelled sections:

┌─────────────────────────────────────────────────────┐
│  💚 Health & Vitality                               │
│  Relevant to: [shows 1 sentence from their Vision]  │
├─────────────────────────────────────────────────────┤
│  GOAL (Specific)                                    │
│  "By [date], I will..."                             │
│  [ textarea — min 1 line ]                          │
├─────────────────────────────────────────────────────┤
│  MEASURABLE — How will I know I've succeeded?       │
│  "I'll know I'm on track when..."                   │
│  [ short text input ]                               │
├─────────────────────────────────────────────────────┤
│  TIMELINE — When?                                   │
│  [ month/year input or dropdown ]                   │
└─────────────────────────────────────────────────────┘

(Achievable and Relevant are implicit — Achievable is guided by the prompt "By [date]...", Relevant is shown via the Vision extract at the top of each card.)

5. Ikigai ↔ Vision ↔ Mission Alignment Check¶

After the user fills in all three, display a Consistency Panel at the bottom of the blueprint step:

Check	Source	Signal
Vision uses ikigai.love	`ikigai.love` vs `vision` text	✅ / ⚠️
Mission matches ikigai.goodAt	`ikigai.goodAt` vs `mission` text	✅ / ⚠️
At least 1 goal per pillar is set	Pillars completed count	`4/6 complete`
Goals have a timeline	`timeBound` fields	`3/6 time-bound`

6. Implementation Notes (Code)¶

Data Model Additions¶

// In LifeDesign.tsx state
pillars: {
  faith: '',          // SMART goal — Specific
  health: '',
  family: '',
  career: '',
  finances: '',
  growth: '',
  anchors: {          // Measurable — "I'll know I've succeeded when..."
    faith: '', health: '', family: '', career: '', finances: '', growth: '',
  },
  timeBound: {        // Time-bound — "I'll achieve this by..."  ← NEW
    faith: '', health: '', family: '', career: '', finances: '', growth: '',
  },
}

Auto-populate Helper Functions¶

// Builds a vision statement from the 4 ikigai circles + selected path
const buildVisionFromIkigai = () => {
  const { love, goodAt, worldNeed } = data.ikigai;
  const path = selectedPath ?? 'growth';
  const draft =
    `In 5 years, I am known for ${love.toLowerCase() || 'the things I love doing most'}. ` +
    `I use my strength in ${goodAt.toLowerCase() || 'my unique skills'} to help ` +
    `${worldNeed.toLowerCase() || 'make a positive impact on the world'}. ` +
    `I am living my ${path} path — with purpose, resilience, and contribution every day.`;
  setData(prev => ({ ...prev, vision: draft }));
};

// Derives a mission from the vision + ikigai passion/goodAt
const buildMissionFromVision = () => {
  const { passion, goodAt } = data.ikigai;
  const path = selectedPath ?? 'growth';
  const draft =
    `Every day, I commit to applying ${goodAt.toLowerCase() || 'my strengths'} with intention. ` +
    `I show up with ${passion.toLowerCase() || 'genuine passion'} and take consistent action ` +
    `toward the future I've described in my vision. ` +
    `I measure my days by the quality of my effort and the value I bring to others through my ${path} path.`;
  setData(prev => ({ ...prev, mission: draft }));
};

Firestore Compatibility¶

Adding timeBound alongside anchors is backward-compatible. Existing users will have timeBound = undefined — guard with || '' on read, same pattern used for all other fields.

7. Future Enhancements (Roadmap)¶

Feature	Description	Priority
Vision Gallery	Show anonymised vision examples by archetype for inspiration	Medium
Alignment Score	% overlap between ikigai words and vision/mission text	Medium
Goal Progress Tracker	In Growth Loop, check off milestones against each SMART goal	High
AI Refinement	"Make my vision more specific" button using AI rewrite	Low
Video Prompts	30-second guided video for each step, narrated for teens	Low
Parent/Mentor View	Read-only share link for parents to review the plan	Medium