One Onboarding Form, Every Entry Point: Making Context Inputs Consistent

When Features Work for Some Users but Not Others

Onboarding flows tend to grow organically. A feature lands in one context, works well, and then quietly stays there — while users arriving through a different path never see it.

That's exactly what happened with our enrichment inputs: the product image uploader, custom instructions field, and DNA context panel. They existed in the URL-based onboarding tab but were absent from the Instagram and TikTok connected forms. A user who linked their Instagram account and skipped the URL step had no way to provide product photos or content preferences before the AI pipeline ran.

Why Entry Point Inconsistency Hurts Output Quality

The enrichment inputs aren't decorative. Product images give the image generation pipeline concrete visual references instead of inferring from a website scrape. Custom instructions let a business owner say "lean into sustainability messaging" or "avoid showing food, we're halal-certified" before a single post is generated. The DNA context panel allows them to introduce the person behind the brand — their face, tone, and personality — so the AI doesn't construct an anonymous creator from scratch.

When those inputs are missing from a form, the pipeline still runs — it just runs with less signal. The gap between a business that came in via URL and one that connected their Instagram account was invisible to the user, but visible in the output. Richer inputs consistently produce more on-brand, product-accurate content.

The Extraction Pattern: One Component, Four Forms

The fix required more than copy-pasting JSX into two more form sections. The onboarding page already had these blocks duplicated between the URL and manual handle tabs — a subtle maintenance debt that grew with each new field added to one form but not the other.

We extracted a single shared component for the three enrichment blocks and dropped it into all four onboarding modes: URL, Instagram connected, TikTok connected, and manual handle. The state and submission logic were already shared at the parent level — the component just needed to surface them in every path. A minor inconsistency (a plain x instead of the correct × character for removing uploaded files) was also corrected in the process.

The result is that every onboarding mode now presents the same enrichment surface, regardless of how the user arrived. Switching between tabs no longer resets what you've already filled in — state persists across mode changes.

Fixing the OAuth Return Trip

While reviewing the Instagram onboarding flow, we caught a second issue: authenticated users who clicked "Connect Instagram" from the dashboard were being routed through the public sign-in page after completing the OAuth handshake, adding an unnecessary redirect hop that could silently drop the session in certain browser environments.

The callback now checks whether the user already has a session. Authenticated users land directly back on the dashboard with their Instagram credentials attached. Unauthenticated users — arriving via a marketing link or QR code — still pass through the sign-in page as intended. The fix also parallelises the two independent operations in that callback path, shaving latency from the return trip.

Consistency as a Quality Gate

The deeper principle here is that input richness determines output ceiling. The AI pipeline is only as informed as what gets passed to it at the start. Ensuring that every onboarding path gives users access to the same enrichment tools isn't a nice-to-have — it's a prerequisite for consistent content quality across the user base.

We're continuing to look for places where features land in one context and quietly stay there. The right mental model is to treat each input field as a pipeline signal, and ask: is this signal available from every entry point? If not, that's a quality gap worth closing.