Onboarding Builder

I developed an in-house design tool for building first-time user onboarding flows and deploying them remotely into mobile and desktop apps.

The first impression a digital product leaves on a potential customer can make or break it. Most mobile apps operate under the assumption that they will make most of their revenue from users on day zero. In this paradigm, the onboarding flow preceding the first paywall becomes a crucial part of the user's journey: the most opportune moment to communicate the product's benefits and value to the user, then converting convinced users immediately.

At JoyoLabs, we prioritized rapid iteration on our onboarding flows as much as we did our in-app paywalls. However, the tools we used for paywall iteration at the time lacked the capability to produce multi-page flows that might house an onboarding. As the lead designer responsible for onboarding and paywall iterations, I built an in-house tool for the job with the flexibility to grow alongside our needs as a SaaS startup.

Using the builder, we shipped over 175 onboarding iterations across four mobile apps and one desktop app. The Svelte+Vite powered renderer bundles the flows into single HTML files which could be deployed easily in A/B tests, and rendered on any environment with a webview with the help of an SDK. The renderer is capable of highly performant page transitions and animations; image, video, audio and Lottie rendering; and complex, contentful, fully native HTML graphics to ease the production of localized and personalized content. The accompanying TypeScript-powered CMS system is designed to maximize reusability and iteration speed, with flows structured out of template pages, components and content schemas. The CMS supports automated content localization; personalization based on user data internal or external to the onboarding; and conditional routing. Through the SDK, the onboarding flows remained securely connected to the overall app state, making it possible to read, update and act on relevant user data during onboarding flows; and to ask users for native device permissions such as notifications or microphone.