Executive Summary
What we analyzed
Complete walkthrough of Synder's onboarding flow across all 6 role options, testing every form field, dropdown, and conditional element. Automated via headless Chromium (Playwright) to simultaneously document the UX and assess bot/agent compatibility.
Method
- Browser automation with Playwright (headless Chromium) — walked each role end-to-end
- 40+ screenshots captured across all flows
- LogRocket session analytics (Galileo AI API) — 90-day funnel data
- Form element inspection — DOM analysis of every input, select, and radio
Role Flow Map
Synder's onboarding has 6 role options that branch into 3 distinct flow paths:
| Role | Flow Path | Step 1 (Extra) | Step 2 Name | Asks about client? |
|---|---|---|---|---|
| Business owner / Executive manager | Business | — | Provide business details | No (asks about own biz) |
| Accounting or Bookkeeping Firm | Firm | Info about your practice (employees, industries, # clients) |
Provide Client details | Yes — client name, client's biz info |
| Staff Accountant | Business | — | Provide business details | No (same as Biz Owner but without accountant question) |
| IT & Technology department | Business | — | Provide business details | No |
| Marketing | Business | — | Provide business details | No |
| Other | Firm | Free text role description + Info about your practice | Provide Client details | Yes — same as Accounting firm |
💡 Key Insight
Only 2 roles (Accounting Firm and Other) get the "firm" flow with practice info + client details. The other 4 roles all get identical "business" flows. This means 67% of role options lead to the same experience — the role selector provides minimal differentiation for most users.
Role-Based Flow Documentation
🏢 Business Owner / Executive Manager
Step 1: Tell us about you
Single dropdown: "How would you describe your role?" — 6 options
- DROPDOWN Role *
Step 2: Provide business details
"We'll use this information to tailor your account"
- TEXT Business name *
- TEXT What's your business website?
- DROPDOWN Time zone * (defaults to UTC)
- DROPDOWN Country *
- MULTI-SELECT Industry * ⚠️ Non-standard react-select
- DROPDOWN How long have you been in business? *
- DROPDOWN Your revenue for the last year * ⚠️ HIDDEN — appears only after industry + duration are filled
- RADIO Do you have an accountant/bookkeeper? → Yes: shows email invite field / No: shows "find one" link
- TEXT Accountant email * (only if "Yes")
Step 3: Select integrations
"Synder is SOC 2 compliant and certified, so your data is thoroughly protected"
- CARDS Sales integrations — platform icons (Stripe, PayPal, Shopify, Amazon, etc.)
- CARDS Payment integrations
- BUTTON View all integrations — opens modal with full list
Step 4: Connect integrations
OAuth connection flow for selected platforms. Also shows accounting software selection (QuickBooks, Xero, Sage Intacct, etc.)
🔎 Business Owner Field Options (captured from DOM)
| Field | Options |
|---|---|
| Timezone | 600+ timezones (IANA list). US timezones listed first. |
| Country | 250+ countries. Australia, Canada, UK, US shown first as favorites. |
| Industry | Automotive, Construction, Education, Entertainment, Hospitality/Travel, Insurance, Legal, Logistics, Manufacturer, Marketing, Non-profit, Professional Services, Real-Estate, Retail/E-Commerce, Technology/SaaS, Other |
| Business duration | Just starting, Less than 1 year, 1-3 years, 3+ years |
| Revenue | 0-250K, 250K-1M, 1M-10M, 10M+ |
📊 Accounting or Bookkeeping Firm
Step 1b: Info about your practice Extra step for firms only
This sub-step appears WITHIN the "Tell us about you" tab — the stepper still shows 4 steps but this is effectively a 5th screen.
- DROPDOWN How many employees? * — 1 (just me), 2-9, 10-19, 20-49, 50+
- MULTI-SELECT Industries you serve * ⚠️ Non-standard react-select
- DROPDOWN How many clients to use Synder? * — 1-2, 3-6, 7-14, 15-50, 50+
Subtitle: "(have online transactions with Stripe, Square, Amazon, Shopify, PayPal, etc.)"
Step 2: Provide your Client's basic info
"This info is needed to adjust Synder's functionality in accordance with your client's needs."
- TEXT Client name *
- TEXT What's your business website?
- DROPDOWN Time zone *
- DROPDOWN Country *
- MULTI-SELECT Industry *
- DROPDOWN How long has your Client been in business? *
Note: No revenue question, no accountant question (they ARE the accountant).
📝 Staff Accountant
Identical to Business Owner flow except:
- No "Do you have an accountant?" question (they ARE the accountant)
- No accountant email invite field
- All other fields identical: business name, website, timezone, country, industry, duration
❓ Other
Gets the Accounting Firm flow but with an extra step:
- Free-text field: "I describe my role as..." * required
- Then proceeds to Practice Info → Client Details → Select/Connect Integrations
Step Comparison Matrix
| Step/Feature | Business Owner | Accounting Firm | Staff Accountant | Other |
|---|---|---|---|---|
| Stepper tabs shown | 4 | 4 (but 5 screens) | 4 | 4 (but 5-6 screens) |
| Step 2 heading | "Provide business details" | "Provide Client details" | "Provide business details" | "Provide Client details" |
| Free-text role input | ❌ | ❌ | ❌ | ✅ Required |
| Practice info sub-step | ❌ | ✅ | ❌ | ✅ |
| Employees count | ❌ | ✅ | ❌ | ✅ |
| Client count | ❌ | ✅ | ❌ | ✅ |
| Business name field | ✅ "Business name" | ✅ "Client name" | ✅ "Business name" | ✅ "Client name" |
| Revenue question | ✅ (conditional) | ❌ | ❌ | ❌ |
| Accountant question | ✅ Yes/No + email | ❌ | ❌ | ❌ |
| Loom video widget | ✅ | ✅ | ✅ | ✅ |
Drop-off Analytics
Data from LogRocket Galileo AI API — 30/90-day session analysis. Combined with browser walkthrough observations.
Onboarding Funnel
Drop-off Reasons by Step
Critical Step 1: Role Selection — 63.9% abandon
The #1 problem. Nearly two-thirds of all users who reach onboarding never get past the role selector.
Probable reasons:
- Opaque label: "How would you describe your role?" gives zero context about WHY the role matters or what changes based on selection
- Dropdown hides options: Users can't see all choices without clicking — unlike card-based selectors that show everything at a glance
- Decision paralysis: 6 options, unclear which to pick. "IT & Technology department" and "Marketing" feel wrong for most ecommerce users
- No "skip" or "I'll decide later": Required field with no way to proceed without choosing
- Context switch: Users just signed up with marketing promises → land on a blank page with one dropdown and zero context
High Step 2: Business/Client Details — ~30% drop between steps 1 and 2
Probable reasons:
- Too many required fields: 6-7 required fields on one screen feels heavy
- Hidden conditional field: Revenue question appears AFTER filling other fields — feels like a moving goalpost
- Industry multi-select confusion: "Please select all that apply" but the select component doesn't look like a multi-select — it looks like a standard dropdown
- Silent form failures: Clicking "Next step" with empty fields doesn't scroll to the first error — validation messages appear but may be off-screen
- Accountant invite pressure: Being asked to invite an accountant mid-setup can feel premature or irrelevant
High Step 3: Integration Selection — ~20% drop
Probable reasons:
- Must select BOTH sales AND accounting integrations: Business owners must select an accounting platform (QuickBooks, Xero, etc.) but these aren't shown in the default view or "View all" modal — silent failure with no error on first click
- Overwhelming platform list: "View all integrations" shows 30+ options
- No guidance: Which ones should I connect first? What if I'm not sure?
- "Choose at least one integration to proceed" — error appears on SECOND click only, doesn't explain what TYPE of integration is needed
Medium Step 4: Connect Integrations — ~25% drop
Probable reasons:
- OAuth complexity: Connecting to Stripe, PayPal, etc. requires leaving Synder → logging into platform → authorizing
- Account readiness: Users may not have their platform credentials handy
- Fear of access: "What exactly will Synder access?" — security concerns
- Multi-step OAuth: Some platforms (QuickBooks) have multi-step authorization
Known Active Bugs
| Bug | Impact | Status |
|---|---|---|
TypeError: Cannot read properties of undefined (reading 'email') |
Blocks users at mapping/currency step — prevents onboarding completion | P0 — Active |
Converting circular structure to JSON |
Breaks Product Mappings page — affects post-onboarding setup | P0 — Active |
Findings & Recommendations
8 findings prioritized by impact. Each includes severity, evidence, and a specific recommendation.
Finding #1: Role selection kills 64% of users Critical
Evidence: 1,101 sessions reach onboarding; only 397 proceed past role selection. The dropdown label "Choose an option" (or "How would you describe your role?") provides zero context.
Finding #2: Hidden required field — Revenue appears conditionally Critical
Evidence: On the Business Owner flow, "Your revenue for the last year" only appears after filling Industry and Duration. Users who fill the visible fields and click "Next step" get blocked by a field they didn't even know existed. No scroll-to-error behavior.
Finding #3: No progress indication or context Critical
Evidence: The text tabs ("Tell us about you → Provide business details → Select integrations → Connect integrations") are flat, hard to scan, and don't show completion state. For the Accounting Firm flow, there are 5 actual screens but only 4 tabs — the Practice Info sub-step is hidden inside Step 1.
Finding #4: Industry field is a non-standard multi-select High
Evidence: The Industry dropdown uses a custom react-select component with a hidden #clickableInput element. It's a multi-select ("Please select all that apply") but looks identical to single-select dropdowns. Users may not realize they can select multiple industries. The component also loses selections unpredictably in automated testing — suggesting potential state management issues for real users too.
<select multiple>. Make the multi-select nature visually obvious.
Finding #5: Integration selection has a hidden accounting gate High
Evidence: Business owners must select at least one accounting integration (QuickBooks, Xero, etc.) in addition to sales integrations — but accounting options aren't prominently shown. The error message "Choose at least one integration to proceed" appears only on the second click and doesn't specify WHICH TYPE of integration is needed.
Finding #6: 4 roles with identical flows waste the role selector High
Evidence: Business Owner, Staff Accountant, IT & Technology, and Marketing all lead to the same "Provide business details" flow (with minor variations in the accountant question). Only Accounting Firm and Other get a different path. This means 67% of role options are cosmetic.
Finding #7: Accountant invite creates premature friction Medium
Evidence: Business owners are asked "Do you have an accountant/bookkeeper?" with a required email field if "Yes". Selecting "Yes" then trying to proceed without an email blocks the form. The "find a trusted accountant here" link (on "No") is a nice idea but mid-onboarding is the wrong time.
Finding #8: No welcome screen or post-signup context Medium
Evidence: Users go from signup directly to the role dropdown with no welcome, no "here's what to expect", no estimated time. The marketing site promises "three simple steps" but the onboarding shows 4 tabs with up to 5 actual screens.
🤖 Bot & AI Agent Friendliness Audit
Assessment of how well the onboarding flow can be automated by bots, AI agents, or automated testing frameworks. Tested with Playwright (headless Chromium).
Overall Bot-Friendliness Score
Not bot-friendly
Multiple non-standard form components, hidden fields, and state management issues make automated onboarding unreliable.
Element-by-Element Assessment
| Element | Bot Score | Issue | Fix for Bot Compatibility |
|---|---|---|---|
| Role dropdown | ✅ PASS | Standard common-select — works with .click() + option select |
— |
| Business name input | ⚠️ PARTIAL | React-controlled input. Standard .fill() doesn't update React state. Needs nativeInputValueSetter + dispatchEvent('input') |
Add data-testid attributes. Ensure inputs respond to standard DOM events. |
| Timezone dropdown | ✅ PASS | Standard common-select |
— |
| Country dropdown | ⚠️ PARTIAL | Standard common-select but "United States" matches 2 options (US + US Minor Outlying Islands). Strict mode fails. |
Use unique IDs or data-value attributes for each option |
| Industry multi-select | ❌ FAIL | Critical blocker. Hidden #clickableInput element, not a standard select. Requires pixel-coordinate click below label. Selection doesn't persist reliably — Escape key undoes it. Value resets between interactions. No name or data-testid. |
Replace with standard multi-select or add API-accessible selection method. Add aria-* attributes and data-testid. |
| Business duration dropdown | ✅ PASS | Standard common-select |
— |
| Revenue dropdown | ❌ FAIL | Hidden until other fields filled. Bot must fill Industry + Duration first, wait for re-render, then discover the new dropdown. No way to know it exists beforehand. Also a common-select (automatable once visible). |
Always render all fields. Use CSS visibility if progressive disclosure is desired. |
| Accountant radio buttons | ❌ FAIL | Radio at y:944 below 900px viewport — not visible without scroll. .click() fails. scrollIntoViewIfNeeded() + {force: true} required. Overlapping labelContainer-1-1-12 div intercepts pointer events. |
Ensure radios are clickable via standard selectors. Remove overlapping container div. Add data-testid. |
| Accountant email input | ⚠️ PARTIAL | Conditional field — only appears when Yes radio selected. Standard input once visible. | Add data-testid and visibility state. |
| Integration platform cards | ⚠️ PARTIAL | Image-based cards with no text labels on some platforms. Need to click images by alt text or position. |
Add data-platform-id attributes to each card. Add visible text labels. |
| "View all" modal | ✅ PASS | Opens with click, closes with Escape | — |
| Form validation | ❌ FAIL | No error scroll-to-field. Validation messages may be off-screen. No aria-invalid attributes. Form silently fails with no API response on submit — purely client-side React state check. |
Add aria-invalid, aria-errormessage. Scroll to first error. Return structured error response. |
| Step navigation | ❌ FAIL | Future step tabs are disabled — can't click ahead. No URL changes between steps (all /onboarding/index). No query params for step state. Back button works but re-renders form from scratch. | Add URL params (?step=2) or expose step state. Enable programmatic step navigation. |
| Practice Info sub-step | ❌ FAIL | Hidden sub-step within Step 1 tab — no URL change, no distinct identifier. Bot must detect content change by reading page text. Stepper shows Step 1 for both role selection and practice info. | Give each logical step a unique URL or data attribute. |
| Cloudflare Access gate | ❌ FAIL | Email verification required before reaching the app. Needs CF-Access-Client headers or manual email code. Blocks any bot without pre-configured service tokens. | Provide CF-Access-Client-Id / CF-Access-Client-Secret service tokens for bot accounts. Or whitelist bot IPs. |
Recommendations for Bot-Friendly Onboarding
Priority 1: Add data-testid attributes to all form elements
Every input, select, radio, button, and card should have a unique data-testid attribute. This is the single biggest improvement for automation compatibility.
Examples:
data-testid="onboarding-role-select"data-testid="onboarding-industry-select"data-testid="onboarding-integration-stripe"data-testid="onboarding-next-button"
Priority 2: Replace non-standard react-select with accessible components
The Industry multi-select uses a custom react-select that doesn't respond to standard DOM interactions. Replace with a component that supports aria-* attributes and responds to .fill() / .selectOption().
Priority 3: Add URL-based step routing
Each onboarding step should have a distinct URL or query parameter (/onboarding?step=2). This allows bots to navigate directly to specific steps and detect their current position.
Priority 4: Provide an onboarding API
For true bot/agent onboarding at scale, expose a REST API that accepts all onboarding parameters in a single POST request. This bypasses the UI entirely and allows programmatic org setup.
POST /api/v1/onboarding/complete
{
"role": "business_owner",
"businessName": "My Company",
"country": "US",
"industry": ["retail_ecommerce"],
"businessDuration": "1_3_years",
"revenue": "250k_1m",
"integrations": ["stripe", "quickbooks_online"]
}
Priority 5: Render all form fields immediately
Hidden/conditional fields (Revenue, accountant email) should be rendered in the DOM from the start (even if visually hidden). This allows bots to discover and fill all fields in a single pass.
Progress Stepper Concept
The current onboarding uses flat text tabs with no visual progress indication. Here's a proposed stepper design.
Current vs Proposed
❌ Current: Flat text tabs
Problems: No step numbers, no completion state, no time estimate, disabled future steps look like broken links.
✅ Proposed: Visual progress stepper
Step 2 of 4 · About 2 minutes left
Key improvements:
- Numbered dots — clear position in the flow
- Completion checkmarks (✓) — completed steps are visually distinct
- Active state ring — current step has a blue glow
- Connected lines — show flow direction and completion
- "Step X of Y" — explicit text for accessibility
- Time estimate — "About 2 minutes left" reduces anxiety
- Short labels — "About you" > "Tell us about you"
Welcome Screen Concept
Welcome to Synder!
Let's set up your account. It takes about 3 minutes.
Accounting Firm Variant
For accounting firms, the stepper should reflect the actual 5-screen flow:
Step 2 of 5 · About 3 minutes left