Case Study 03 · Business User Experience

Business User
Onboarding
Flow

Business users abandon setup because it feels like a dev tool. This is the design process behind an onboarding experience that collects technical configuration from non-technical users — without panic, confusion, or a call to IT.

UX Flow Design Non-Technical Users Progressive Disclosure Conversion Optimization AI-Assisted Setup

ROLELead / Solo Designer

SCOPEUX flow + brand design

PRIMARY USERBusiness / Finance Ops

SUCCESS METRICFirst integration live <10 min

TIMELINE4 weeks discovery → prototype

Phase 01 — Discovery

Why business users abandon setup

I ran 5 unmoderated usability sessions with finance operations professionals using a competitor product. The abandonment moments were consistent and predictable — and entirely design-fixable.

Usability Session Findings — Where Users Drop Off

Tested 5 participants on a competitor's integration setup. All 5 abandoned before completing setup. I mapped exactly where, why, and what the fix is for each failure point.

ABANDONMENT MAP · USABILITY FINDINGS

DROP 1: "Choose your data source type" → blank text field
   WHY: No affordance — blank field assumes prior knowledge
   FIX: Visual source picker with named cards and icons

DROP 2: "Enter your API endpoint"
   WHY: Non-technical users don't know what an API endpoint is
   FIX: Auto-populate for known sources; explain with examples

DROP 3: "Configure field mappings" → spreadsheet-like grid
   WHY: Resembles advanced tool; users feel they might "break something"
   FIX: AI pre-maps fields; user confirms, not configures

KEY INSIGHT Anxiety precedes confusion. Users feel wrong before they get lost.

Core Design Principle — Orientation Before Action

The breakthrough insight from sessions: users who could see the full setup path (all 5 steps at once) felt less anxious — even on the hardest step. Knowing where you are and where you're going reduces fear more than simplifying the steps themselves.

DESIGN PRINCIPLE HIERARCHY

PRINCIPLE	HOW IT MANIFESTS
Orient before asking	Show all 5 steps in the sidebar before the user fills in a single field. The journey is visible from step 1.
AI does the hard part	AI pre-maps fields, auto-fills known endpoints, and validates before anything runs. User approves — doesn't configure.
No jargon on first pass	"API endpoint" becomes "Where does your data live?" Technical detail is available on expand, not in the primary flow.
Safety by default	Nothing runs until the final "Launch" step. AI confirms readiness. User can always go back. No destructive actions.

Phase 02 — Flow Architecture

Five steps, one mental model

Step Architecture — Why These Five, In This Order

I tested 3 different step orderings. The winning sequence builds confidence progressively: start with something the user knows (naming their integration), build to things they might not know (source connection), and end with AI-assisted validation so they feel safe before launch.

STEP SEQUENCE RATIONALE

STEP	WHAT IT ASKS	WHY THIS POSITION	ANXIETY LEVEL
1. Name	What do you want to call this integration?	Easiest possible first step. Success is instant. Confidence established.	None — anyone can name a thing
2. Destination	Where should the data end up?	User selects from known destinations — no new concepts introduced.	Low — pick from a list
3. Source	Where does your data live?	Visual picker replaces blank text. Most-used sources pre-configured.	Medium — mitigated by visual selection
4. Field Mapping	Do these field names look right?	AI maps first; user confirms. Approval, not configuration.	Medium → Low after AI pre-fills
5. Validate & Launch	Ready to go live?	AI runs a dry-run validation. User sees green checks before launch.	Low — AI confirms safety

Progressive Disclosure Architecture

Each step reveals only what's needed for that step. Technical detail (API docs, schema structure, connection strings) is always available — but behind an "Advanced" expand, never in the primary flow. This one decision cut usability session abandonment in half during re-testing.

DISCLOSURE LAYERS

LAYER 1 — Primary flow (always visible):
   Named field, visual picker, AI-suggested value, approve button

LAYER 2 — "Advanced" expand (on demand):
   API endpoint URL, auth method, schema detail, timeout config

LAYER 3 — Engineering handoff (email to IT):
   "This step needs IT — send them this link" option appears if user seems stuck

KEY RULE If a field requires Googling, it belongs in Layer 2 or 3, never Layer 1.

Phase 03 — Design System

Warm, capable, not clinical

Why Dark + Gold — The Emotional Design Decision

I tested a light and a dark variant with 6 users. The dark gold theme consistently rated as "sophisticated," "serious," and — most importantly — "like it knows what it's doing." The light version felt "generic" and "like every other tool." In onboarding, emotional confidence is as important as clarity.

AESTHETIC RATIONALE

Dark canvas (#1a1410) → feels like a precision instrument, not a consumer app
Gold accent (#c8a84b) → warmth, quality, not cold tech-blue
Warm parchment text (#f0e8d8) → readable, not harsh, signals documents and trust
Cormorant display font → editorial weight, communicates considered design
Syne UI font → geometric confidence, not generic san-serif neutrality

USER QUOTE "It looks like it was built for my industry, not adapted from a dev tool."

The Persistent Sidebar — Orientation Mechanism

The sidebar is the most important UI element in the entire onboarding flow. It's always visible, always shows all 5 steps, and updates in real time as the user progresses. Users reported this single element made them feel "in control" across all usability sessions.

SIDEBAR STATE DESIGN

STATE	INDICATOR	TITLE COLOR	DETAIL TEXT
Completed	Gold filled circle ✓	Bright / white	Shows the value the user entered
Active	Gold outline circle	Gold highlight	"Current step" label
Future	Dim outline circle	Muted / 25% opacity	Brief description of what's coming

Phase 04 — Working Interactive Prototype

Full five-step onboarding flow

This is the complete, interactive onboarding flow. Navigate through all 5 steps using the Continue button or click progress steps at the top. The sidebar updates live. Fill in fields, select a data source, and review the AI field mappings before launching.

Phase 05 — Reflection

Results & next iterations

What Made the Difference

WIN 1 Sidebar orientation reduced anxiety — users felt safe
WIN 2 Visual source picker eliminated the #1 abandonment point
WIN 3 AI pre-maps fields — user approves, not configures
WIN 4 Validation step with green checks before launch = trust
WIN 5 "Send to IT" escape hatch keeps business user in control

Next Iterations

NEXT 1 Template library: "Start from Bloomberg→Snowflake template"
NEXT 2 Inline AI chat: "Ask a question about this step"
NEXT 3 Animated success state on final launch — celebrate the moment
NEXT 4 Mobile-responsive: setup from tablet during a meeting
NEXT 5 Save progress: return to incomplete setup without losing data