Crackle Orchestrator · Prototype

Pick a flow below — each one drops you on the starting screen, then the in-page CTAs walk you through to the end.
Run locally npx serve docs/orchestrator/assets/mockups -l 4321 http://localhost:4321
Design system brand mark, tokens, typography, motion & live components — light + dark Open reference →
Public marketing site every landing design we have shipped, kept whole — newest first
v3 · outcome-led site → 7 pages · current v2 · design-system rebuild → deployed at ads.crackle.tech v1 · bid-stream ticker → snapshot · running

Flows · click "Start" to walk a journey

1

Admin setup

primary admin first-time login

A new tenant admin lands from an invite email, sets a password, signs in, completes the org profile, connects Google + Facebook, and invites the team.

  1. screen 00 · Email — click Set your password →
  2. screen 00a · Set password — click Set password & sign in
  3. screen 01 · Login — click Sign in
  4. screen 05 · Dashboard — sidebar → Settings · Org profile (or skip)
  5. screen 03 · Org profile — click Save changes
  6. screen 05 · Dashboard — sidebar → Connected accounts
  7. screen 06 · Connected accounts — click Connect Google Ads
  8. screen 06a · Google — click Save & test connection
  9. screen 06 · Connected accounts — click Connect Facebook
  10. screen 06b · Facebook — click Save & test connection
  11. screen 06 → 07 · Users & roles — sidebar → Users & roles
  12. screen 07 · Users — click + Invite user
  13. screen 07a · Invite modal — click Send invite · done!
~3 min · 10 screens
2

Set up an ad (create a campaign)

admin marketing

Run the unified 5-step wizard from the dashboard. Stepper at the top of every step also navigates the wizard.

  1. screen 05 · Dashboard — click + New campaign (top-right)
  2. screen 09 · Wizard landing — click Start →
  3. screen 09s1 · Goal — pick a tile, click Continue to budget →
  4. screen 09s2 · Budget — click Edit schedule → (optional) or Continue to targeting →
  5. screen 09s2a · Day-parting — click Save schedule
  6. screen 09s3 · Targeting — click Continue to creatives →
  7. screen 09s4 · Creatives — click Review all variants → (optional) or Continue to review →
  8. screen 09s4a · Hero variants — click Done
  9. screen 09s5 · Review — click Submit campaign
  10. screen 11 · Campaigns list — your new campaign is at the top · done!
~4 min · up to 11 screens
3

See reports

admin marketing reporting_admin

Browse aggregated metrics, trigger a heavy report (cache-miss state), then drill into a single campaign's performance.

  1. screen 12 · Reports — review the aggregated table (top of page)
  2. Click 90d or Custom in the date picker to fetch a heavy window
  3. screen 12 · Cache-miss — see the queued-job state, click ← Back to 30-day cached view
  4. screen 12 · Reports — click Drill in → on the App install · IN row
  5. screen 11a · Campaign detail — switch to the Performance tab · done!
~1 min · 3 screens
4

Manage creative recommendations

admin marketing

Find a campaign with fatiguing creatives and refresh them via the campaign-detail Performance tab.

  1. screen 11 · Campaigns — click Drill in → (or View →) on any row
  2. screen 11a · Campaign detail — scroll to the Creative health card under the Performance section
  3. Click Refresh creatives → on the Creatives card
  4. screen 11b · Edit creative — change the headline / hero, click Cancel to abort or follow flow 5 to submit · done!
~2 min · 3 screens
5

Create a change request & approve it

marketing requests admin approves

Marketing edits a campaign field; in Lower roles only approval mode the edit becomes a pending request the admin approves on screen 18. Activity log records both events.

  1. screen 11 · Campaigns — click Drill in → on App install · IN
  2. screen 11a · Campaign detail — scroll to the Creatives card, click Edit on the row
  3. screen 11b · Edit creative — make a change, click Save (route via approval) →
  4. screen 18 · Pending approvals — find the request, click Approve (or Reject)
  5. screen 13a · Activity log — see change_pending_approval + change_approved rows · done!
~2 min · 5 screens
6

Tune optimization rules & apply recommendations

super_admin · pilot recommend-only

The heuristic rule engine watches live signals (CPM, reach, frequency, CTR/VTR, pacing, platform mix) and proposes corrective actions. Work the daily recommendation inbox — apply or dismiss with the evidence in view — then tune the 20 rules themselves.

  1. Recommendations — review evidence-backed cards (signal values + sample size), click Apply or Dismiss, single or in bulk
  2. Rules list — all 20 rules grouped, per-source readiness, flip an enable toggle, click a rule to open it
  3. Rule editor — adjust key values, action params and guards, click Apply →
  4. Apply & impact — see the threshold diff and how many campaigns are affected, then Dispatch
  5. Dispatched — recommendations queued to rules.recommendations → Pending approvals · done!
~3 min · 5 screens · recommend-only (CC-9)
7

Build an audience signal & creative bundle ADR 0006

admin marketing

Start from a blank slate: create a reusable audience signal (age brackets + cross-channel interests), then build a dense creative bundle — one bundle per audience — and attach the signal. Every state is mocked, empty → full.

  1. screen 20c · Audience signals (empty) — the zero-state, click + New audience signal
  2. screen 20b · New signal (blank) — set the age range, add interests / similar apps (coverage badges), then Create signal
  3. screen 22 · Creative bundle (empty) — write headlines + descriptions, open + Images / + Videos, watch the creative score climb from 0
  4. Scroll to This bundle's audience signal — attach Puzzle & brain-game lovers (signal · every channel)
  5. Click + New bundle (another audience) to add a second bundle · done!
~3 min · empty → full · R4–R8
8

Run a lead-generation campaign ADR 0010

admin marketing

The third goal — a lead campaign. On Step 1 pick Lead generation, choose a destination (website form / instant form), bid on cost-per-lead, and fan out across the ad network — one unified campaign, same wizard. Surrounding pages (connect, org-setup, entitlement, list, detail, reports) are locked in the catalog below.

  1. screen 05 · Dashboard — click + New campaign (top-right)
  2. screen 09L1 · Goal — pick the Lead generation tile, choose a destination (Website / Instant form), click Continue to budget →
  3. screen 09L2 · Budget & bidding — pick a bid strategy, set Target cost per lead / lead value, click Continue to targeting →
  4. screen 09L3 · Targeting — devices, search terms, locations & languages, click Continue to creatives →
  5. screen 09L4 · Creatives — fill the creative bundle (headlines, descriptions, images, videos), click Continue to landing →
  6. screen 09L5 · Landing — website URL + tracking + live mobile preview (or the instant-form builder), click Continue to review →
  7. screen 09L6 · Review — click Submit campaign
  8. screen 11 · Campaigns list — your new lead campaign is at the top · done!
~5 min · 7 wizard screens · +8 surrounding pages
Start the flow → full wizard + surrounding pages locked
9

Operate the Demand Platform (DSP)

super_admin · operator exchange console

A different plane. Campaigns fan out of the Orchestrator into line-items on Crackle's own exchange — you oversee them here: the max-bid ceiling, the compiled price card, premium inventory, approvals and bidder health. The chrome turns red so you always know you've left the Orchestrator.

  1. Line-items — everything the bidder is serving, across tenants; click Edit on a row
  2. Edit · DSP settings — set the max bid ceiling, supply & premium (objective / budget / targeting are pulled read-only from the campaign)
  3. Price card — the compiled snapshot the bidder reads on every bid, incl. the segment × signal matrix (Match & Overview)
  4. Premium inventory — the allowlist that earns the premium multiplier
  5. Review — approve the line-items waiting on a human
  6. Bidder health — QPS, timeouts, spend drift, storage runway · done!
~4 min · 7 screens · red = Demand-platform plane
All 50+ screens (jump directly to any screen)

Public marketing site · landing 3

v3Outcome-led site · home, product, pricing, FAQ + 4 solutionscurrent v3— Productcurrent v3— Pricingcurrent v3— FAQcurrent v2Design-system rebuild · supply ticker (Blade snapshot)deployed v1Charcoal Trading · live bid-stream ticker (static snapshot)superseded v1— the ticker actually streaming (screenshot)superseded v1— hero + network stats (screenshot)superseded v1— Vue source (24 components)superseded What each version is, and how to add a v4

Demand platform · DSP 7

D0Line-items · operator list (cross-tenant)new D1Line-item edit · max-bid ceiling + supply + premiumnew D2Price card · segment × signal matrix (Match & Overview)new D3Premium inventory · allowlistnew D4Review line-item · approvalsnew D5Bidder health · QPS, timeouts, spend driftnew D6Signals & segments · discovered catalogue, grain, lineagenew

Auth & onboarding 4

00Invite email · magic link 00aSet password · 2FA enrol 01Login · email + password 04Org switcher dropdown

Super-admin 13

02Organisations consolesuper 02aCreate org + admin (modal)super 03bTenant configs · approval defaultsnew 08KVM key managersuper 08aRotate secret (confirm)super 10Distribution SSP · global / per-tenantsuper 10aMargin configuration · global / per-tenantnew 10bObservability settings · trace mode + sync-alertnew 10cReporting cadence · global / per-tenantnew 06sConnected accounts (super-admin) · viewed tenantnew 14API logs · 7d / 30dsuper 14aAPI log detail (request / response)super 15System health · queues, KMS, jobssuper

Tenant · onboarding & setup 12

03Org profile · settings + governanceedit 06Connected accounts 06Connected accounts · emptyalt 06Connected accounts · Google onlyalt 06aConnect Google Ads · OAuth + picker 06aGoogle credentials · review & save 06aAdd credentials · legacy modallegacy 06bConnect Facebook · OAuth + picker 06bFacebook credentials · review & save 06mMeasurement partners · Tenjin + AppsFlyernew 06m1Connect Tenjin · paste token + link appnew 06m2AppsFlyer · integration pendingnew 07Users & roles 07Users & roles · emptyalt 07aInvite user (modal)

Tenant · day-to-day 12

05Dashboard · post-onboarding 05Dashboard · after-setup variantalt 05Dashboard · empty statealt 11Campaigns list & status 11Campaigns · pending statealt 11aCampaign detail (tabs) 11bEdit creative (drawer) 12Reports · aggregated 12Reports · cache-miss statealt 13Notifications centre 13aActivity log · customer eventsnew 13aToast component samplealt

Campaign wizard 9

09Wizard landing · ADR 0002new 09s1Step 1 · Goal & name 09s1Step 1 · Goal + Select-appnew 09s2Step 2 · Budget & pacing 09s2aDay-parting schedule (drawer)new 09s3Step 3 · Targeting basics 09s3aTargeting · advanced disclosure 09s4Step 4 · Creatives + hero 09s4aHero variants reviewnew 09s5Step 5 · Review & submit

Lead generation · ADR 0010 15

09L1Wizard 1 · Goal + destinationnew 09L2Wizard 2 · Budget & bidding · target CPLnew 09L3Wizard 3 · Targeting · devices + search termsnew 09L4Wizard 4 · Creatives · bundlenew 09L5Wizard 5 · Landing · Website formnew 09L5bWizard 5 · Instant form builderalt 09L6Wizard 6 · Review & submitnew 06Connect · Instagram linkingnew 02LSuper-admin · ad-type entitlement grid (D14)new 02aLSuper-admin · single-tenant view + entitlementnew 03LOrg setup · completeness (name/logo/privacy)new 05LDashboard · org-completeness banner (D11)new 11LCampaigns · unified + type filter (D14)new 11aLCampaign detail · lead · CPL & destinationnew 12LReports · leads & cost-per-leadnew

Admin / ops 8

16Billing · invoices & plan 16aInvoice detail (drawer) 17Asset library · grid 17aAsset detail / replace (drawer) 18Pending approvals 19App library · listnew 19aApp library · Add appnew 19bApp events · sync & listingnew 19cApp event mappings · canonical matrixnew 19dApp event mappings · Tenjin import + sync-backnew

Build an audience & creative bundle · ADR 0006 10

20cAudience signals · empty (start of journey)start 20cAudience signals · list (populated)new 20bNew audience signal · blank builderstart 20bNew audience signal · filled examplenew 20Customer lists · emptyempty 20Customer lists · populatededit 20aNew customer list (modal)edit 22Creative bundle · empty (start of journey)start 22Creative bundle · in-progress + approve sealnew 23Campaign detail · bundles (live) — list + ad previewsnew 24New / edit bundle in a live campaign — re-syncnew

Optimization rules 5

21Recommendations · review inboxnew 21aRules list · all 20, groupednew 21bRule editor · thresholds & guardsnew 21cApply & impact · affected campaignsnew 21dDispatched · queued to approvalssuper