Back

Increasing consumer confidence with an off the shelf Onboarding Tool

Timeline

6 weeks

Year

2025

Role

Lead Design Engineer

Company

TLDR;

Reduction in feature-related & onboarding customer support tickets.

33%

Reduction in feature-related & onboarding customer support tickets.

33%

Empowered Marketing to modify announcements without engineering intervention.

Zero-code

Empowered Marketing to modify announcements without engineering intervention.

Zero-code

Established the company's first testing and validation workflow for third-party UI overlays.

Visual QA

Core challenge

Fragmented communications and an outdated "Welcome" page left users confused about new feature rollouts, while design and product were locked in a 3-week alignment stalemate.

Solution

Evaluated, selected, and integrated Product Fruits into the shell app to empower non-technical teams to deploy onboarding flows and feature announcements natively. Rolled out across the New Dashboard, Quick Add, and L2 Configuration updates.

The design team was stuck…

…we had spent three weeks fighting with Product over feature announcements and documentation ownership. Shifting roles and shifting priorities meant nobody was taking responsibility for how customers learned about new capabilities.

We were in the middle of a complete dashboard redesign, but our main entry
point—the legacy Welcome page—was a dead-end graveyard of broken links and outdated videos.

During a design crit, I pitched killing the standalone Welcome page altogether. Instead, we could pull onboarding directly into the core user flow and launch target announcements via lightweight, in-app modals.

The idea landed, but engineering capacity was fully booked. Building an in-house announcement system wasn't feasible, so we pivoted to an off-the-shelf integration. We evaluated Userpilot, Chameleon, Userflow, and Product Fruits against budget and flexibility. Product Fruits won on cost and adaptability.

I built a quick Proof of Concept to confirm the vendor tool would fit our stack.

Once approved, I stepped up as Lead Design Engineer to own the rollout. I integrated the SDK directly into our core shell app—a process that included a humbling code review from our 10x senior dev that ultimately forced me to refine my integration logic.

Out of the box, the vendor modals looked generic and flat. I wrote custom CSS overrides to align every overlay with our new Nimbus Design System. To elevate the visual polish, I created custom micro-animations in Jitter rather than relying on static images. I then partnered with Marketing using Google Docs to iterate on copy, before configuring the release across Dev, Test, and Prod environments.

Because our QE team had never validated third-party client overlays, I created a hands-on visual QA process to guide them through testing dynamic UI changes without code deployments.

Looking back, the real win was building a bridge: relieving engineering from minor content updates while giving Marketing and Product total autonomy over customer touchpoints. I would have loved to engage engineering even earlier in the discovery phase and explore more of Product Fruits' extended feature set—like their interactive checklists and feedback widgets.

How I would approach this today with AI?

Rather than overcomplicating the stack, I’d keep it simple and leverage practical AI features built directly into modern off-the-shelf tools or design workflows:

In-Tool AI Copy & Translation: Use built-in AI writing assistants within the tool to instantly draft announcement variants and translate copy for international users, eliminating manual back-and-forth in Google Docs.
AI-Assisted CSS Styling: Use AI coding assistants (like Cursor) to feed in our Nimbus Design System tokens and generate the exact Product Fruits CSS overrides in seconds instead of writing custom CSS manually.
Auto-Generated Walkthroughs: Use AI screen-recording tools to capture a feature flow and automatically draft the step-by-step Product Fruits tour steps for review.

Rather than overcomplicating the stack, I’d keep it simple and leverage practical AI features built directly into modern off-the-shelf tools or design workflows:

In-Tool AI Copy & Translation: Use built-in AI writing assistants within the tool to instantly draft announcement variants and translate copy for international users, eliminating manual back-and-forth in Google Docs.
AI-Assisted CSS Styling: Use AI coding assistants (like Cursor) to feed in our Nimbus Design System tokens and generate the exact Product Fruits CSS overrides in seconds instead of writing custom CSS manually.
Auto-Generated Walkthroughs: Use AI screen-recording tools to capture a feature flow and automatically draft the step-by-step Product Fruits tour steps for review.

Rather than overcomplicating the stack, I’d keep it simple and leverage practical AI features built directly into modern off-the-shelf tools or design workflows:

In-Tool AI Copy & Translation: Use built-in AI writing assistants within the tool to instantly draft announcement variants and translate copy for international users, eliminating manual back-and-forth in Google Docs.
AI-Assisted CSS Styling: Use AI coding assistants (like Cursor) to feed in our Nimbus Design System tokens and generate the exact Product Fruits CSS overrides in seconds instead of writing custom CSS manually.
Auto-Generated Walkthroughs: Use AI screen-recording tools to capture a feature flow and automatically draft the step-by-step Product Fruits tour steps for review.