Pitch Planning · Settings UX Convergence

Smash Balloon Settings — a family that grew up in two eras

A hands-on audit of the Settings page across every Smash Balloon feed plugin — free vs pro, captured live from local installs. The goal: map what exists today and draw the boundary for a converged settings experience.

8plugin families surveyed
2distinct settings UIs in the wild
40+settings screens captured
12cross-plugin inconsistencies

The headlineWhat the survey actually shows

Two generations of the same page

The family is mid-migration. Three flagship plugins still run a Legacy per-plugin settings UI (red “Save Changes”, expanded upsell grid). The newer plugins run a New (React) shared “customizer” (blue “Save Changes” with a checkmark, collapsible upsell, friendly empty states). Same product, two visual languages, inconsistent tab taxonomies.

The new React UI is the convergence target

Four plugins already point at the shared React customizer — but shipped unbuilt in these reference drops (blank pages, one hard PHP fatal). We compiled them locally to reveal the intended future-state UI. Convergence isn’t a green-field bet; it’s finishing a migration already underway and back-porting the flagships onto it.

Inventory at a glanceEvery family, its settings generation and tab set

PluginSettings UITabs (free / single)Tabs (pro)Render
📷 Instagram FeedLegacyGeneral · Feeds · AdvancedGeneral · Feeds · Advanced · Snippets✅ renders
📘 Facebook FeedLegacyGeneral · Feeds · Translation · AdvancedGeneral · Feeds · Translation · Advanced✅ renders
🐦 Twitter / X FeedsLegacyGeneral · Feeds · Translation · AdvancedGeneral · Feeds · Translation · Advanced✅ renders
🎵 TikTok FeedsNew (React)General · Feeds · Advanced · Code Snippets🛠 built by us
⭐ Reviews FeedNew (React)General · Feeds · Advanced · Language & Translation🛠 built by us
▶️ YouTube FeedNew (React)General · Feeds · AdvancedGeneral · Feeds · Translation · Advanced🛠 built by us
🧱 Social WallNew (React)General · Feeds · Advanced🛠 built by us
🧵 Threads FeedNot built— none
Legacy per-plugin Vue/PHP settings, ships built New (React) shared sb-customizer, shipped unbuilt Not built no source yet

Legacy vs New, side by sideInstagram (legacy) and TikTok (new) — same “Settings › General”, two designs

Legacy — Instagram · red “Save Changes”, expanded upsell grid, “Try Demo”
New — TikTok · blue “Save Changes ✓”, collapsible “Show Features”, empty states

Cross-plugin inconsistenciesConcrete divergences to resolve in a converged design

High · structure

Tab taxonomies don’t match

Instagram has 3 tabs (no Translation); Facebook/Twitter have 4 (with Translation); TikTok has “Code Snippets”; Reviews has “Language & Translation”. Same concepts, different sets and order per plugin.

Med · naming

One feature, three names

The localization tab is “Translation” (FB, Twitter), “Language & Translation” (Reviews), and absent (Instagram). Snippets is “Snippets” (Instagram Pro) vs “Code Snippets” (TikTok).

High · visual

Two Save buttons, two upsell systems

Legacy: red “Save Changes”, no icon, expanded feature grid, CTA “Try Demo”/“Get Started”. New: blue “Save Changes” with a checkmark, collapsible “Show Features”. Upsell banner is green on Instagram, blue everywhere else.

Med · licensing

Free vs Pro-unlicensed are unrelated UIs

Free shows a warm “you’re on Lite — no license needed, 50% off”. Pro with no key shows a red “license key is inactive” alert + activation field. A user upgrading crosses a hard visual seam.

Med · naming

Menu labels: singular vs plural

“Twitter Feeds” (free) becomes “Twitter Feed” (pro); “TikTok Feeds” vs “Instagram Feed” vs “Facebook Feed”. No consistent rule.

Low · empty states

Inconsistent empty states

Legacy “Manage Sources” is a bare “+ Add Source” box; the new UI shows a friendly “Looks like you have not added any source.”

High · bug

Facebook breadcrumb is wrong

On the Settings page the header breadcrumb reads “/ Dashboard” instead of “/ Settings”.

High · bug

Twitter Pro settings can 403

On a fresh Pro install the Settings page returns “Sorry, you are not allowed to access this page” until the onboarding wizard is dismissed — a dead end. Pro activation also throws a SQLite migration error.

High · delivery

Four plugins ship their settings UI unbuilt

Reviews, TikTok, YouTube and Social Wall reference a React bundle that isn’t in the package → blank pages, and Social Wall hard-PHP-fatals out of the box. (We built them locally to audit.) A packaging/release gap.

Med · structure

Tab counts range from 3 to 4 with no rule

Social Wall exposes only General/Feeds/Advanced; Instagram Lite only 3; Facebook/Twitter/Reviews/YouTube-Pro 4. Whether a plugin gets Translation, Snippets, or neither is inconsistent rather than capability-driven.

Low · redundancy

Two help affordances

A header “Help” button and a floating “?” beacon coexist on the same screen.

Low · asset paths

YouTube admin assets 404

YouTube enqueues admin CSS/JS from a non-existent public/build/ while the real files sit at the plugin root — a broken path independent of the SPA.

Per-plugin galleryEvery captured settings tab — click any shot to open full size

📷

Instagram Feed

Legacy menu: Instagram Feed slug: sbi-settings
Tabs — free: General · Feeds · Advanced · pro: General · Feeds · Advanced · Snippets

The 3-tab baseline. Pro (unlicensed) swaps the friendly green “you’re on Lite” banner for a red “license key is inactive” alert and adds a Snippets tab. Green upsell banner; bottom CTA reads “Try Demo”.

Free / Lite

General
General
Feeds
Feeds
Advanced
Advanced

Pro (unlicensed)

General
General
Feeds
Feeds
Advanced
Advanced
Snippets
Snippets
📘

Facebook Feed

Legacy menu: Facebook Feed slug: cff-settings
Tabs — free: General · Feeds · Translation · Advanced · pro: General · Feeds · Translation · Advanced

Adds a Translation tab Instagram lacks, but Pro adds no Snippets tab. Blue upsell banner (vs Instagram green); bottom CTA reads “Get Started” (vs “Try Demo”). Bug: breadcrumb reads “/ Dashboard” on the Settings page.

Free / Lite

General
General
Feeds
Feeds
Translation
Translation
Advanced
Advanced

Pro (unlicensed)

General
General
Feeds
Feeds
Translation
Translation
Advanced
Advanced
🐦

Twitter / X Feeds

Legacy menu: Twitter Feeds (free) / Twitter Feed (pro) slug: ctf-settings
Tabs — free: General · Feeds · Translation · Advanced · pro: General · Feeds · Translation · Advanced

Same 4-tab shape as Facebook. Menu label flips plural→singular between free (“Twitter Feeds”) and pro (“Twitter Feed”). Bug: on a fresh Pro install the Settings page 403s (“you are not allowed to access this page”) until onboarding is dismissed. SQLite migration error on Pro activation.

Free / Lite

General
General
Feeds
Feeds
Translation
Translation
Advanced
Advanced

Pro (unlicensed)

General
General
Feeds
Feeds
Translation
Translation
Advanced
Advanced
🎵

TikTok Feeds

New (React) menu: TikTok Feeds slug: sbtt-settings
Tabs — free: General · Feeds · Advanced · Code Snippets

First plugin on the new shared React customizer. Visibly different design system: blue “Save Changes” with a checkmark, a collapsible “Show Features” upsell, and friendly empty states (“Looks like you have not added any source”). Tab named Code Snippets (vs Instagram Pro’s “Snippets”).

Free / Lite

General
General
Feeds
Feeds
Advanced
Advanced
Code Snippets
Code Snippets

Reviews Feed

New (React) menu: Reviews Feed slug: sbr-settings
Tabs — free: General · Feeds · Advanced · Language & Translation

New React customizer. Translation tab is named “Language & Translation” here — a third spelling of the same idea. Left menu carries locked PRO items (Collections, Review Alerts). Ships unbuilt in the reference (blank until compiled).

Free / Lite

General
General
Feeds
Feeds
Advanced
Advanced
Language Translation
Language Translation
▶️

YouTube Feed

New (React) menu: YouTube Feed slug: youtube-feed-settings
Tabs — free: General · Feeds · Advanced · pro: General · Feeds · Translation · Advanced

New React “frontend” SPA (shipped unbuilt — we compiled it). Pro adds a Translation tab (free omits it), a separate “YouTube Videos” CPT menu + a notification badge, and drops the “Setup” wizard. Also an admin-asset path mismatch: chrome assets enqueued from a non-existent public/build/.

Free / Lite

General
General
Feeds
Feeds
Advanced
Advanced

Pro (unlicensed)

General
General
Feeds
Feeds
Translation
Translation
Advanced
Advanced
🧱

Social Wall

New (React) menu: Social Wall slug: sbsw
Tabs — free: General · Feeds · Advanced

Aggregator, on the new React UI. Settings is a reduced set — only General / Feeds / Advanced (no Translation, no Snippets). Ships unbuilt, and the reference hard-PHP-fatals out of the box (missing main.asset.php) — we compiled it to audit. Cross-sells the other feed plugins via menu links.

Unlicensed

General
General
Feeds
Feeds
Advanced
Advanced
🧵

Threads Feed

Not built menu: slug:
Tabs — free:

Greenfield. No source exists — the reference folder and the upstream repo are empty placeholders (repo created 2026-07-06, never pushed). No settings UI to audit. The ideal candidate to ship natively on the converged design.

No screenshots — plugin source not available.

Where the redesign boundary landsA pragmatic convergence proposal

  • Finish the migration, don’t restart it. The shared React sb-customizer is already the direction. Back-port Instagram, Facebook and Twitter onto it and retire the legacy per-plugin settings.
  • One canonical tab taxonomy for every feed: General · Feeds · Translation · Advanced · Code Snippets — same names, same order, tabs simply hidden when N/A.
  • One licensing surface. Merge the “free upsell” and “pro-unlicensed” states into a single license component with graceful states, so upgrading has no visual seam.
  • One design system for controls: a single Save button style/placement, one upsell pattern, shared empty states, one help affordance.
  • Consistent menu naming (pick singular or plural family-wide) and fix the Facebook breadcrumb + Twitter Pro access-gate + SQLite migration bugs as part of the port.
  • Fix the release pipeline so React bundles ship compiled — no blank pages, no fatals.
  • Build Threads on the converged system from day one — it’s greenfield, the perfect proof-of-concept for the new standard.