/* global React */ // Research methodology artboard — discovery, usability testing, IA rebuild function ArtboardResearch() { /* ── 1. Discovery ───────────────────────────────────────────────── */ const discoveryItems = [ { label: "Stakeholder interviews", body: "Ran structured 45-minute interviews with four stakeholders: two founders and two operations leads at early-stage SaaS companies who had recently adopted or evaluated expense tooling. Sessions focused on approval bottlenecks, policy-enforcement pain, and monthly-close workflows — not feature wishlists.", }, { label: "Persona synthesis", body: "Interview notes were clustered into three distinct behavioral archetypes — the submitter (Iris), the approver (Theo), and the finance owner (Maren) — each with meaningfully different context-switching pressure and tolerance for UI friction. Maren emerged as the primary design target: her workflow touches every other role's output.", }, { label: "Workflow mapping", body: "Traced the full lifecycle of a single expense from capture to audit-log entry across all three roles. This revealed four handoff moments where information was lost or delayed, and surfaced which steps were load-bearing for month-end close — informing which flows needed the most design attention.", }, ]; /* ── 2. Usability testing ───────────────────────────────────────── */ // Round 1 → Round 2 delta const r1 = 73; const r2 = 89; const delta = r2 - r1; const changes = [ { what: "What broke at 73%", desc: 'The primary task was: "Approve all in-policy expenses from last week." Most participants navigated to individual expense records instead of the queue — and none discovered the bulk-approve action without prompting. "Approvals" was nested inside a collapsible "Review" group in the sidebar and was invisible on first scan.', tag: "Round 1 failure", tagStyle: { background: "var(--c-error-bg)", color: "var(--c-error)", borderColor: "var(--c-error-bg)" }, }, { what: "What fixed it to 89%", desc: 'Approvals was promoted to a standalone primary nav item with a live pending-count badge. A persistent bulk-action bar appeared the moment any row was checked, removing the need to discover a hidden menu. The label itself changed from "Review" to "Approvals" with a count chip.', tag: "Round 2 fix", tagStyle: { background: "var(--c-success-bg)", color: "var(--c-success)", borderColor: "var(--c-success-bg)" }, }, ]; /* ── 3. IA rebuild ──────────────────────────────────────────────── */ const ia = [ { before: "Review (collapsed group)", after: "Approvals · top-level item + badge" }, { before: "Bulk action in overflow ···", after: "Bulk bar on row-select" }, { before: "Cards buried under Settings", after: "Cards · standalone primary nav" }, { before: "Reports nested 3 clicks deep", after: "Reports · second-tier top nav" }, ]; return (

{/* ── Header ── */}

R Research · Methods & Findings

Before the first wireframe.

Three parallel streams — stakeholder discovery, two-round usability testing via Maze, and IA observation — anchored every design decision in behavior over assumption.

Usability tool Maze

Rounds 2 rounds

Completion lift +{delta}pp

{/* ── Body ── */}

{/* ── Column 1: Discovery ── */}

01

Discovery

{discoveryItems.map((item, i) => (

{i + 1}

{item.label}

{item.body}

))}

Participants: 4 stakeholder interviews · informal recruits — colleagues and LinkedIn connections with finance ops or accounting backgrounds, not a paid research panel.

{/* ── Column 2: Usability testing ── */}

02

Usability testing · Maze

{/* Metric bar */}

First-try task completion · Approve all in-policy expenses

{/* R1 */}

Round 1

{r1} %

{/* Arrow */}

→

{/* R2 */}

Round 2

{r2} %

+{delta}pp lift · 11 testers per round

{/* Round breakdown */} {changes.map((c, i) => (

{c.tag} {c.what}

{c.desc}

))}

Testers: informal recruits — peers with finance, ops, or accounting experience. Not a formal panel.

{/* ── Column 3: IA rebuild ── */}

03

IA rebuild

After watching finance admins hunt for actions that should have been one click away, the sidebar navigation was rebuilt from scratch — critical paths surfaced, visual noise cut.

Before → After

{ia.map((row, i) => (

{row.before}

→

{row.after}

))}

The IA rebuild reduced mean time-to-action for Maren's daily sweep from ~38 seconds to under 10 — measured via Maze click-path recordings, not self-report.

{/* Observation note */}

Observation method

Session recordings reviewed for hesitation patterns and mis-clicks, not just completion rate. Click-path heatmaps in Maze identified the exact nav item that broke the scan flow.

{/* ── Footer ── */}

FinFlow · Concept Case Study · 2026

Research · Methods & Findings

); } window.ArtboardResearch = ArtboardResearch;