7da4f0a167
- Added DocLink component and mapped routes - Fixed Coupons nav link to /marketing/coupons - Updated Settings pages to show inline documentation links
40 lines
2.2 KiB
Markdown
40 lines
2.2 KiB
Markdown
# User Onboarding & Simplification Strategy
|
|
|
|
## The Problem
|
|
The current "General Settings" screen presents too many technical decisions (SPA Mode, Entry Page, Container Width, Typography, Colors) at once. This creates analysis paralysis for new users who just want to "get the store running."
|
|
|
|
## Recommended Solution: The "Quick Setup" Wizard
|
|
Instead of dumping users into the Settings screen, we implement a **Linear Onboarding Flow** that launches automatically on the first visit (or manually via "Setup Wizard" button).
|
|
|
|
### Tech Stack
|
|
* **No new libraries** needed. We can build this using your existing `@radix-ui` components (Dialog, Cards, Button).
|
|
* **State**: Managed via simple React state or Zustand store.
|
|
|
|
### The Flow (4 Steps)
|
|
|
|
#### 1. Welcome & Mode (The "What"?)
|
|
* **Question**: "How do you want to run your store?"
|
|
* **Options**:
|
|
* **Immersive (Full SPA)**: "Modern, app-like experience. Best for dedicated stores." (Selects 'full')
|
|
* **Classic (Checkout Only)**: "Keep your current theme, but use our super-fast checkout." (Selects 'checkout_only')
|
|
* **Standard**: "Use standard WordPress pages." (Selects 'disabled')
|
|
|
|
#### 2. The Homepage (The "Where"?)
|
|
* **Question**: "Where should customers land?"
|
|
* **Action**: Dropdown to select a page.
|
|
* **Magic Button**: "Auto-create 'Shop' Page" (Creates a page, sets it as SPA Entry, and sets WP Frontpage setting automatically). **<-- This solves the redirect bug confusion.**
|
|
|
|
#### 3. Styling (The "Look")
|
|
* **Question**: "Choose your vibe."
|
|
* **Design**:
|
|
* **Layout**: Simple visual toggle between "Boxed" (Focus) vs "Full Width" (Immersive).
|
|
* **Theme**: Clickable color swatches (Modern Black, Trusty Blue, Vibrant Purple).
|
|
|
|
#### 4. The Finish Line
|
|
* **Action**: "Save & Launch Builder".
|
|
* **Result**: Redirects the user directly to the Visual Builder for their home page.
|
|
|
|
## Ancillary Improvements
|
|
1. **Contextual Hints**: Use the already installed `HoverCard` or `Popover` to add "?" icons next to complex settings (like "SPA Entry Page") explaining them in plain English.
|
|
2. **Smart Defaults**: Pre-select "Boxed", "Full SPA", and "Modern" font pair so users can just click "Next -> Next -> Next" if they don't care.
|