Ideation Stepper — Redesign Mockups

Four directions for the phase stepper + sub-stepper. Current state shown first for comparison. The whole journey spans two studios (Ideation → Design), which is the root of today's "two redundant dot rows" confusion.

Completed Current / in-progress Not yet reached Cross-studio Reviewing a past phase
NOWCurrent design (for reference)

The full 16-phase cross-studio rail on top, then a second smaller row of dots that re-states the same ideation phases plus a "Discovery — 3 of 10" text label. The two rows show overlapping information in two different visual idioms — that's what feels unintuitive.

🐦 Code RavenIdeation StudioDesign StudioLaunch StudioUsage
Top stepper — every phase, both studios
Sub-stepper — ideation phases again, as dots + text
Discovery — 3 of 10 👁 PREVIEW
OPTION A · RECOMMENDEDMacro stages on top, active-stage phases below

Two tiers with different jobs instead of duplicate dots. Top = the big stages (here grouped by studio) with overall progress. Below = only the phases of the stage you're in, labeled and roomy, with a clear "you are here." Completed stages collapse to a check; tapping any reopens it.

Why it's more intuitive: the stepper answers "what's the big picture?" and the sub-stepper answers "where am I right now?" — no overlap. 16 cramped dots become 3 readable stages + ~4 readable phases.

Stages
Discover
Profile · Interview · Discovery · Reflection
Ideation
Discovery — phase 3 of 10
Design
Experience · Visual · Mockups
Handoff
Final review & export
Phases in this stage
Discovery · step 3 of 10 👁 PREVIEW
OPTION BFocused "you are here" window

Stops trying to show all 16 dots at once. Centers the current phase large and labeled, with the previous/next phases ghosted on either side and arrows to peek. A slim scrubber underneath shows absolute position; "View all phases" opens the full map on demand.

Why it's more intuitive: maximum clarity on the one thing that matters — what you're doing now — while the full journey stays one click away. Great for small windows.

Phase 2
Interview
Ideation · now
Discovery
3 of 10
Phase 4
Reflection
OPTION CGrouped accordion stepper

A single hierarchy: named stage pills across the top; the active one expands inline to reveal its phases as the sub-stepper. Completed stages show a check and can be re-expanded to review. There is only ever one row of phase dots — the active stage's — so nothing is duplicated.

Why it's more intuitive: the stepper and sub-stepper become the same component at two zoom levels. The relationship is obvious because the sub-stepper literally drops out of the pill you're on.

Discover
Shape
Validate
Foundation
Design
Ship
Shape · Discovery — 3 of 10
👁 PREVIEW
OPTION DCompact breadcrumb + dropdown navigator

The most space-efficient. A breadcrumb pill — Ideation › Discovery · Step 3 of 10 ▾ — sits next to a thin overall progress bar. The ▾ opens a grouped, jump-anywhere menu. Reclaims almost all the vertical space the two rows take today.

Why it's more intuitive: nothing competes for attention; the breadcrumb reads like a sentence. The full map is there when wanted, gone when not. Pairs well if you want the phase chrome to nearly disappear during deep work.

IdeationDiscovery· step 3 of 10
👁 PREVIEW
Discover ✓
Profile
Interview
Ideation
Discovery
Reflection
Pressure Test
Design
Experience Design
Visual Design

Dropdown shown open for illustration; normally collapsed to just the breadcrumb line.

Self-contained mockup — open directly in any browser. Phase data mirrors the Full Exploration route (current phase = Discovery, 3 of 10).