Onboarding UI Overview

The Onboarding UI guides new users through the initial setup experience when they first access the MATIH platform. It presents a multi-step wizard that collects user persona preferences, configures data source connections, and walks users through their first conversational analytics query to demonstrate platform capabilities.

Application Structure

The Onboarding UI is located at frontend/onboarding-ui/ and shares the MATIH frontend technology stack:

Directory	Purpose
`src/pages/`	Wizard step page components
`src/components/`	Reusable onboarding UI components
`src/hooks/`	Custom hooks for wizard state and navigation

Wizard Steps

Step	Component	Route	Description
Welcome	`WelcomePage`	`/onboarding/welcome`	Platform introduction and value proposition
Persona	`PersonaSelectionPage`	`/onboarding/persona`	Select role and customize experience
Connection	`ConnectionSetupPage`	`/onboarding/connection`	Configure data source connection
First Query	`FirstQueryPage`	`/onboarding/first-query`	Interactive demo of conversational analytics
Completion	`CompletionPage`	`/onboarding/complete`	Summary and next steps

Onboarding Flow

Welcome --> Persona Selection --> Connection Setup --> First Query --> Completion
    |                                                                     |
    +-- Skip (experienced users) ----------------------------------------+

Personalization Impact

The persona selected during onboarding configures the user experience across the platform:

Persona	Default Workbench	Response Style	Suggested Queries
Data Analyst	BI Workbench	Visual, chart-focused	Revenue trends, KPI dashboards
Data Engineer	Data Workbench	Technical, SQL-focused	Pipeline status, data quality
ML Engineer	ML Workbench	Model-focused	Training jobs, model performance
Executive	BI Workbench	Summary, insight-focused	High-level KPIs, comparisons
Developer	Agentic Workbench	API-focused	Integration examples, agent tools

State Management

Onboarding state is persisted so users can resume if they leave and return:

interface OnboardingState {
  current_step: number;
  completed_steps: number[];
  persona: string | null;
  connection_configured: boolean;
  first_query_completed: boolean;
  skipped: boolean;
}

Skip and Resume

Experienced users can skip the onboarding wizard at any step
Skipped onboarding can be restarted from the user settings
The onboarding state is stored server-side and linked to the user profile

Development

cd frontend/onboarding-ui
npm install
npm run dev  # Starts on a development port

Detailed Sections

Section	Content
Welcome Page	Platform introduction, feature highlights
Persona Selection	Role selection, experience customization
Connection Setup	Data source configuration
First Query	Interactive conversational analytics demo

Provisioning Wizard Welcome Page